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 相关文章推荐
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
Mar 11 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
常见的javascript跨域通信方法
Dec 31 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
node前端开发模板引擎Jade的入门
May 11 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
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
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
Yii中使用PHPExcel导出Excel的方法
2014/12/26 PHP
PHP使用Pear发送邮件(Windows环境)
2016/01/05 PHP
详解PHP匿名函数与注意事项
2016/03/29 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
脚本合并提升javascript性能示例
2014/02/24 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
python文件特定行插入和替换实例详解
2017/07/12 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python2和3字符编码的区别知识点整理
2019/08/08 Python
Python容器使用的5个技巧和2个误区总结
2019/09/26 Python
python sorted方法和列表使用解析
2019/11/18 Python
PyCharm 2020 激活到 2100 年的教程
2020/03/25 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
专科毕业生学习生活的自我评价
2013/10/26 职场文书
咖啡蛋糕店创业计划书
2014/01/28 职场文书
竞选班长自荐书范文
2014/03/09 职场文书
社区消防工作实施方案
2014/03/21 职场文书
关于运动会的口号
2014/06/07 职场文书
医院搬迁方案
2014/06/14 职场文书
借名购房协议书范本
2014/10/06 职场文书
幼儿园感恩节活动总结
2015/03/24 职场文书
2015年超市工作总结
2015/04/09 职场文书
学生退学证明
2015/06/23 职场文书
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers