jQuery PHP crée un interrupteur coulissant effect_jquery

Cet article présente l'utilisation de jQuery, PHP et MySQL pour implémenter un commutateur d'activation et de désactivation similaire au pare-feu 360 ​​Security Guard. Cette fonction peut être appliquée aux fonctions d'activation et de désactivation des fonctions du produit.

Travail de préparation Afin de mieux illustrer cet exemple, nous avons besoin d'un tableau de données pour enregistrer la description de la fonction requise et l'état d'ouverture. La structure du tableau est la suivante :

<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>

Vous pouvez pro insérer plusieurs éléments de données dans le tableau.

index.php

Nous souhaitons afficher une liste de fonctions associées sur la page, utiliser PHP pour lire le tableau de données et l'afficher sous forme de liste.

<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>

Connectez-vous à la base de données, puis bouclez pour afficher la liste des fonctions du produit.

CSS

Afin de donner une meilleure apparence à la page, nous utilisons CSS pour embellir la page et la rendre plus conviviale. En utilisant CSS, nous n'avons besoin que d'une image pour identifier le bouton de commutation.

<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>

Je ne veux pas entrer dans les détails du code CSS. Pour rappel, nous utilisons une image puis utilisons background-position pour positionner l'image. C'est la méthode utilisée par la plupart des sites Web. dans les avantages.

jQuery

En cliquant sur le bouton de commutation, nous demandons l'arrière-plan à temps pour modifier l'état du commutateur de fonction correspondant. Ce processus est une application Ajax typique. En cliquant sur le bouton de commutation, le front-end envoie une demande de publication au PHP d'arrière-plan, l'arrière-plan reçoit la demande, interroge la base de données et renvoie les résultats au front-end. Le jQuery frontal modifie l'état du bouton en fonction de. les résultats renvoyés par l'arrière-plan.

<div class="codetitle"> <span><a style="CURSOR: pointer" data="70559" class="copybut" id="copybut70559" onclick="doCopy('code70559')"><u>Copier le code</u></a></span> Le code est le suivant :</div> <div class="codebody" id="code70559"> <br> $(function(){   <br>     //鼠标滑向换色   <br>     $(".list").hover(function(){   <br>         $(this).addClass("cur_select");   <br>     },fonction(){   <br>         $(this).removeClass("cur_select");   <br>     });   <br>     //关闭   <br>     $(".ad_on").live("click",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>             si(données==1){   <br>                 add_on.removeClass("ad_on").addClass("ad_off").attr("title","点击开启");   <br>             }autre{   <br>                 alerte (données);   <br>             }   <br>         });   <br>     });   <br>     //开启   <br>     $(".ad_off").live("click",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>             si(données==1){   <br>                 add_off.removeClass("ad_off").addClass("ad_on").attr("title","点击关闭");   <br>             }autre{   <br>                 alerte (données);   <br>             }   <br>         });   <br>     });   <br> });<br> </div>

说明，代码中，首先实现了鼠标滑向功能列表换色的功能(详见demo),然后就是单击开关按钮，向L'ID d'action.php est basé sur Ajax Type de type : ，根据Ajax请求成功返回结果后，开关按钮动态改变样式，实现改变开关状态的功能。

action.php

后台action.php接收到前的请求，根据参数执行SQL语句，更新对应功能的状态，成功后将结果返回给前端，请看代码：

<div class="codetitle"> <span><a style="CURSEUR : pointeur" data="51996" class="copybut" id="copybut51996" onclick="doCopy('code51996') "><u>复制代码</u></a></span> 代码如下 :<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>