jQuery PHP mencipta suis gelongsor effect_jquery

Artikel ini memperkenalkan penggunaan jQuery, PHP dan MySQL untuk melaksanakan suis yang serupa dengan tembok api Pengawal Keselamatan 360 Fungsi ini boleh digunakan pada fungsi hidup dan mati fungsi produk.

Kerja penyediaan Untuk menunjukkan contoh ini dengan lebih baik, kami memerlukan jadual data untuk merekodkan perihalan fungsi dan status pembukaan yang diperlukan. Struktur jadual adalah seperti berikut:

<div class="codetitle"> <span><a style="CURSOR: pointer" data="61350" class="copybut" id="copybut61350" onclick="doCopy('code61350')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code61350"> <br> CREATE TABLE `pro` (  <br>   `id` int(11) NOT NULL auto_increment,  <br>   `title` varchar(50) NOT NULL,  <br>   `description` varchar(200) NOT NULL,  <br>   `status` tinyint(1) NOT NULL default '0',  <br>   PRIMARY KEY  (`id`)  <br> ) ENGINE=MyISAM  DEFAULT CHARSET=utf8;<br> </div>

Anda boleh memasukkan beberapa keping data secara pro ke dalam jadual.

index.php

Kami ingin memaparkan senarai fungsi berkaitan pada halaman, menggunakan PHP untuk membaca jadual data dan memaparkannya dalam bentuk senarai.

<div class="codetitle"> <span><a style="CURSOR: pointer" data="53064" class="copybut" id="copybut53064" onclick="doCopy('code53064')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code53064"> <br> <&#63;php <br /> require_once('connect.php'); //连接数据库 <br /> $query=mysql_query("select * from pro order by id asc"); <br /> while ($row=mysql_fetch_array($query)) { <br /> &#63;>   <br>    <div class="list">   <br>      <div class="fun_title">   <br>         <span rel="<&#63;php echo $row['id'];&#63;>" <&#63;php if($row['status']==1){ &#63;>   <br> class="ad_on" title="点击关闭"<&#63;php }else{&#63;>class="ad_off" title="点击开启"<&#63;php }&#63;>></span>   <br>         <h3><&#63;php echo $row['title']; &#63;></h3>   <br>      </div>   <br>      <p><&#63;php echo $row['description'];&#63;></p>   <br>    </div>   <br>  <&#63;php } &#63;><br> </div>

Sambung ke pangkalan data dan kemudian gelung untuk mengeluarkan senarai fungsi produk.

CSS

Untuk memberikan penampilan halaman yang lebih baik, kami menggunakan CSS untuk mencantikkan halaman dan menjadikannya lebih mesra pengguna. Menggunakan CSS, kita hanya perlu menggunakan imej untuk mengenal pasti butang suis.

<div class="codetitle"> <span><a style="CURSOR: pointer" data="31038" class="copybut" id="copybut31038" onclick="doCopy('code31038')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code31038"> <br> .list{padding:6px 4px; border-bottom:1px dotted #d3d3d3; position:relative}   <br> .fun_title{height:28px; line-height:28px}   <br> .fun_title span{width:82px; height:25px; background:url(switch.gif) no-repeat;    <br> cursor:pointer; position:absolute; right:6px; top:16px}   <br> .fun_title span.ad_on{background-position:0 -2px}   <br> .fun_title span.ad_off{background-position:0 -38px}   <br> .fun_title h3{font-size:14px; font-family:'microsoft yahei';}   <br> .list p{line-height:20px}   <br> .list p span{color:#f60}   <br> .cur_select{background:#ffc}<br> </div>

Saya tidak mahu pergi ke butiran tentang kod CSS Sebagai peringatan, kami menggunakan imej dan kemudian menggunakan kedudukan latar belakang ini adalah kaedah yang digunakan oleh kebanyakan tapak web ke dalam faedah.

jQuery

Dengan mengklik butang suis, kami meminta latar belakang tepat pada masanya untuk menukar status suis fungsi yang sepadan. Proses ini adalah aplikasi Ajax biasa. Dengan mengklik butang suis, bahagian hadapan menghantar permintaan pos ke PHP latar belakang, latar belakang menerima permintaan, menanyakan pangkalan data, dan mengembalikan keputusan ke bahagian hadapan Bahagian depan mengubah keadaan butang berdasarkan keputusan dikembalikan oleh latar belakang.

<div class="codetitle"> <span><a style="CURSOR: pointer" data="70559" class="copybut" id="copybut70559" onclick="doCopy('code70559')"><u>Salin kod</u></a></span> Kod adalah seperti berikut:</div> <div class="codebody" id="code70559"> <br> $(function(){   <br>     //鼠标滑向换色   <br>     $(".list").hover(function(){   <br>         $(this).addClass("cur_select");   <br>     },fungsi(){   <br>         $(this).removeClass("cur_select");   <br>     });   <br>     //关闭   <br>     $(".ad_on").live("klik",function(){   <br>         var add_on = $(this);   <br>         var status_id = $(this).attr("rel");   <br>         $.post("action.php",{status:status_id,type:1},function(data){   <br>             jika(data==1){   <br>                 add_on.removeClass("ad_on").addClass("ad_off").attr("title","点击开启");   <br>             }lain{   <br>                 makluman(data);   <br>             }   <br>         });   <br>     });   <br>     //开启   <br>     $(".ad_off").live("klik",function(){   <br>         var add_off = $(this);   <br>         var status_id = $(this).attr("rel");   <br>         $.post("action.php",{status:status_id,type:2},function(data){alert(data);     <br>             jika(data==1){   <br>                 add_off.removeClass("ad_off").addClass("ad_on").attr("title","点击关闭");   <br>             }lain{   <br>                 makluman(data);   <br>             }   <br>         });   <br>     });   <br> });<br> </div>

🎜后台action.php发送Ajax请求，提交的参数是对应功能的id和type，用于后台区分请求的是哪个功能和请求的类型(开启和关闭)。其实，大家，其实，大家，百从据Ajax请求成功返回结果后，开关按钮动态改变样式，实现改变开关状态的功能。

tindakan.php

后台action.php接收到前端的请求，根据参数执行SQL语句，更新对应功能的状态，百小前端，请看代码：

<div class="codetitle"> <span><a style="CURSOR: pointer" data="51996" class="copybut" id="copybut51996" onclick="doCopy('code51996') "><u>复制代码</u></a></span> 代码如下:<p></p> <div class="codebody" id="code51996"> <code><div class="codetitle"> <span><a style="CURSOR: pointer" data="51996" class="copybut" id="copybut51996" onclick="doCopy('code51996')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code51996"> <br> require_once('connect.php');   <br> $id = $_POST['status'];   <br> $type = $_POST['type'];   <br> if($type==1){ //关闭   <br>     $sql = "update pro set status=0 where id=".$id;   <br> }else{ //开启   <br>     $sql = "update pro set status=1 where id=".$id;   <br> }   <br> $rs = mysql_query($sql);   <br> if($rs){   <br>     echo '1';   <br> }else{   <br>     echo '服务器忙，请稍后再试！';   <br> }<br> </div> require_once('connect.php');   $id = $_POST['status'];  

$type = $_POST['type'];  

if($type==1){ //关闭       $sql = "kemas kini status set pro=0 di mana id=".$id;   }lain{ //开启       $sql = "kemas kini status set pro=1 di mana id=".$id;   }   $rs = mysql_query($sql);   jika($rs){       gema '1';   }lain{       echo '服务器忙，请稍后再试！';   } 结束语通过本文您可以熟练掌握ajax在WEB开发中的应用，并能快速的应用快速的应用到您的应用到您的应用到您的。的为广大开发者提供更具实用性的应用，致力于WEB前端技术的的应用。