jQuery+PHP打造滑动开关效果


Posted in Javascript onDecember 16, 2014

本文介绍了使用jQuery、PHP和MySQL实现类似360安全卫士防火墙开启关闭的开关,可以将此功能应用在产品功能的开启和关闭功能上。

jQuery+PHP打造滑动开关效果

准备工作为了更好的演示本例,我们需要一个数据表,记录需要的功能说明及开启状态,表结构如下:

CREATE TABLE `pro` (  

  `id` int(11) NOT NULL auto_increment,  

  `title` varchar(50) NOT NULL,  

  `description` varchar(200) NOT NULL,  

  `status` tinyint(1) NOT NULL default '0',  

  PRIMARY KEY  (`id`)  

) ENGINE=MyISAM  DEFAULT CHARSET=utf8;

你可以向表中pro插入几条数据。

index.php

我们要在页面显示相关功能列表,使用PHP读取数据表,并以列表的形式展示。

<?php   

   require_once('connect.php'); //连接数据库   

   $query=mysql_query("select * from pro order by id asc");   

   while ($row=mysql_fetch_array($query)) {   

   ?>   

   <div class="list">   

     <div class="fun_title">   

        <span rel="<?php echo $row['id'];?>" <?php if($row['status']==1){ ?>   

class="ad_on" title="点击关闭"<?php }else{?>class="ad_off" title="点击开启"<?php }?>></span>   

        <h3><?php echo $row['title']; ?></h3>   

     </div>   

     <p><?php echo $row['description'];?></p>   

   </div>   

 <?php } ?>

连接数据库,然后循环输出产品功能列表。

CSS

为了渲染一个比较好的页面外观,我们使用CSS来美化页面,使得页面更符合人性化。使用CSS,我们只需用一张图片来标识开关按钮。

jQuery+PHP打造滑动开关效果

.list{padding:6px 4px; border-bottom:1px dotted #d3d3d3; position:relative}   

.fun_title{height:28px; line-height:28px}   

.fun_title span{width:82px; height:25px; background:url(switch.gif) no-repeat;    

cursor:pointer; position:absolute; right:6px; top:16px}   

.fun_title span.ad_on{background-position:0 -2px}   

.fun_title span.ad_off{background-position:0 -38px}   

.fun_title h3{font-size:14px; font-family:'microsoft yahei';}   

.list p{line-height:20px}   

.list p span{color:#f60}   

.cur_select{background:#ffc}

CSS代码,我不想详述,提示下我们使用了一张图片,然后通过background-position来定位图片的位置,这是大多数网站使用的方法,好处咱就不说了。

jQuery

我们通过单击开关按钮,及时请求后台,改变对应的功能开关状态。这个过程是一个典型的Ajax应用。通过点击开关按钮,前端向后台PHP发送post请求,后台接收请求,并查询数据库,并将结果返回给前端,前端jQuery根据后台返回的结果,改变按钮状态。

$(function(){   

    //鼠标滑向换色   

    $(".list").hover(function(){   

        $(this).addClass("cur_select");   

    },function(){   

        $(this).removeClass("cur_select");   

    });   

    //关闭   

    $(".ad_on").live("click",function(){   

        var add_on = $(this);   

        var status_id = $(this).attr("rel");   

        $.post("action.php",{status:status_id,type:1},function(data){   

            if(data==1){   

                add_on.removeClass("ad_on").addClass("ad_off").attr("title","点击开启");   

            }else{   

                alert(data);   

            }   

        });   

    });   

    //开启   

    $(".ad_off").live("click",function(){   

        var add_off = $(this);   

        var status_id = $(this).attr("rel");   

        $.post("action.php",{status:status_id,type:2},function(data){alert(data);     

            if(data==1){   

                add_off.removeClass("ad_off").addClass("ad_on").attr("title","点击关闭");   

            }else{   

                alert(data);   

            }   

        });   

    });   

});

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

action.php

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

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前端技术的应用。

Javascript 相关文章推荐
JavaScript 直接操作本地文件的实现代码
Dec 01 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件
Jul 01 Javascript
微信小程序开发中的疑问解答汇总
Jul 03 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
js中的this的指向问题详解
Aug 29 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
javascript进行四舍五入方法汇总
Dec 16 #Javascript
javascript 判断整数方法分享
Dec 16 #Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 #Javascript
jquery队列函数用法实例
Dec 16 #Javascript
JQuery仿小米手机抢购页面倒计时效果
Dec 16 #Javascript
jQuery实现数字加减效果汇总
Dec 16 #Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 #Javascript
You might like
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
php中文验证码实现方法
2015/06/18 PHP
JavaScript中的事件处理
2008/01/16 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
javascript delete 使用示例代码
2010/03/29 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
2013/01/21 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
ES6入门教程之Class和Module详解
2017/05/17 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
Python使用random和tertools模块解一些经典概率问题
2015/01/28 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
python logging模块的使用总结
2019/07/09 Python
python实现静态服务器
2019/09/05 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
pytorch 批次遍历数据集打印数据的例子
2019/12/30 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
J2EE包括哪些技术
2016/11/25 面试题
运动会广播稿100字
2014/01/11 职场文书
股东授权委托书范文
2014/09/13 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
Python获取江苏疫情实时数据及爬虫分析
2021/08/02 Python
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android