jQuery PHP creates sliding switch effect

jQuery PHP creates sliding switch effect_jquery

WBOY

Release： 2016-05-16 16:26:20

Original

1613 people have browsed it

This article introduces the use of jQuery, PHP and MySQL to implement a switch similar to the 360 Security Guard firewall on and off. This function can be applied to the on and off functions of product functions.

Preparation work In order to better demonstrate this example, we need a data table to record the required function description and opening status. The table structure is as follows:

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

You can pro insert several pieces of data into the table.

index.php

We want to display a list of related functions on the page, use PHP to read the data table, and display it in the form of a list.

<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> <?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 /> ?> <br> <div class="list"> <br> <div class="fun_title"> <br> <span rel="<?php echo $row['id'];?>" <?php if($row['status']==1){ ?> <br> class="ad_on" title="点击关闭"<?php }else{?>class="ad_off" title="点击开启"<?php }?>></span> <br> <h3><?php echo $row['title']; ?></h3> <br> </div> <br> <p><?php echo $row['description'];?></p> <br> </div> <br> <?php } ?><br> </div>

Connect to the database and then loop to output the product function list.

CSS

In order to render a better page appearance, we use CSS to beautify the page and make it more user-friendly. Using CSS, we only need an image to identify the switch button.

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

I don’t want to go into details about the CSS code. As a reminder, we use an image and then use background-position to position the image. This is the method used by most websites. I won’t go into the benefits.

jQuery

By clicking the switch button, we request the background in time to change the corresponding function switch status. This process is a typical Ajax application. By clicking the switch button, the front-end sends a post request to the background PHP, the background receives the request, queries the database, and returns the results to the front-end. The front-end jQuery changes the button state based on the results returned by the background.

<div class="codetitle"> <span><a style="CURSOR: pointer" data="70559" class="copybut" id="copybut70559" onclick="doCopy('code70559')"><u>Copy code</u></a></span> The code is as follows:</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> alert(data); <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> alert(data); <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前端技术的应用。