jQuery PHP erstellt einen Schiebeschalter effect_jquery

Dieser Artikel stellt die Verwendung von jQuery, PHP und MySQL vor, um einen Schalter ähnlich der 360 ​​Security Guard-Firewall zu implementieren. Diese Funktion kann auf die Ein- und Ausschaltfunktionen der Produktfunktionen angewendet werden.

Vorbereitungsarbeiten Um dieses Beispiel besser zu veranschaulichen, benötigen wir eine Datentabelle, um die erforderliche Funktionsbeschreibung und den Öffnungsstatus aufzuzeichnen. Die Tabellenstruktur ist wie folgt:

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

Sie können pro Schritt mehrere Daten in die Tabelle einfügen.

index.php

Wir möchten eine Liste verwandter Funktionen auf der Seite anzeigen, PHP verwenden, um die Datentabelle zu lesen und sie in Form einer Liste anzuzeigen.

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

Stellen Sie eine Verbindung zur Datenbank her und führen Sie dann eine Schleife aus, um die Produktfunktionsliste auszugeben.

CSS

Um ein besseres Erscheinungsbild der Seite zu erzielen, verwenden wir CSS, um die Seite zu verschönern und benutzerfreundlicher zu machen. Mithilfe von CSS müssen wir lediglich ein Bild verwenden, um die Umschalttaste zu identifizieren.

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

Ich möchte nicht näher auf den CSS-Code eingehen: Wir verwenden ein Bild und verwenden dann die Hintergrundposition, um das Bild zu positionieren in die Vorteile.

jQuery

Durch Klicken auf die Schaltfläche „Umschalten“ fordern wir den Hintergrund rechtzeitig an, um den entsprechenden Funktionsschaltstatus zu ändern. Dieser Prozess ist eine typische Ajax-Anwendung. Durch Klicken auf die Schaltfläche „Umschalten“ sendet das Front-End eine Post-Anfrage an das Hintergrund-PHP, der Hintergrund empfängt die Anfrage, fragt die Datenbank ab und gibt die Ergebnisse an das Front-End zurück. Die Front-End-jQuery ändert den Schaltflächenstatus basierend auf die vom Hintergrund zurückgegebenen Ergebnisse.

<div class="codetitle"> <span><a style="CURSOR: pointer" data="70559" class="copybut" id="copybut70559" onclick="doCopy('code70559')"><u>Code kopieren</u></a></span> Der Code lautet wie folgt:</div> <div class="codebody" id="code70559"> <br> $(function(){   <br>     //鼠标滑向换色   <br>     $(".list").hover(function(){   <br>         $(this).addClass("cur_select");   <br>     },function(){   <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>             if(data==1){   <br>                 add_on.removeClass("ad_on").addClass("ad_off").attr("title","点击开启");   <br>             }else{   <br>                 Warnung(Daten);   <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>             if(data==1){   <br>                 add_off.removeClass("ad_off").addClass("ad_on").attr("title","点击关闭");   <br>             }else{   <br>                 Warnung(Daten);   <br>             }   <br>         });   <br>     });   <br> });<br> </div>

说明,代码中,首先实现了鼠标滑向功能列表换色的功能(详见demo),然后就是单击开关按钮,向后台action.php发送Ajax请求,提交的参数是对应功能的id和type,用于后台区分请求的是哪个功能和请求的类型(开启和关闭)。其实，大家稍微留神，可以看出, 根据Ajax请求成功返回结果后, 开关按钮动态改变样式, 实现改变开关状态的功能.

action.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> 代码如下:<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 = "update pro set status=0 where id=".$id;   }else{ //开启       $sql = "update pro set status=1 where id=".$id;   }   $rs = mysql_query($sql);   if($rs){       Echo '1';   }else{       echo '服务器忙，请稍后再试！';   } 结束语通过本文您可以熟练掌握ajax在WEB开发中的应用,并能快速的应用到您的项目中.将一如既往的为广大开发者提供更具实用性的应用, 致力于WEB前端技术的应用.