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取得绝对路径的实现代码
Jan 16 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
JS实现点击按钮获取页面高度的方法
Nov 02 Javascript
利用Vue.js实现checkbox的全选反选效果
Jan 18 Javascript
JS实现点击链接切换显示隐藏内容的方法
Oct 19 Javascript
详解Vue组件实现tips的总结
Nov 01 Javascript
vue 添加vux的代码讲解
Nov 30 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
Vue + ts实现轮播插件的示例
Nov 10 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
PHP生成月历代码
2007/06/14 PHP
PHP连接MongoDB示例代码
2012/09/06 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
原生js 秒表实现代码
2012/07/24 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
Jqgrid之强大的表格插件应用
2015/12/02 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
详解vue.js移动端配置flexible.js及注意事项
2019/04/10 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
Python实现模拟时钟代码推荐
2015/11/08 Python
python编程培训 python培训靠谱吗
2018/01/17 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
python 实现语音聊天机器人的示例代码
2018/12/02 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
一年级数学教学反思
2014/02/01 职场文书
《鸟的天堂》教学反思
2014/02/27 职场文书
洗车工岗位职责
2014/03/15 职场文书
应届硕士毕业生自荐信
2014/05/26 职场文书
2015年外联部工作总结
2015/04/03 职场文书
八月迷情观后感
2015/06/11 职场文书
聘任书范文大全
2015/09/21 职场文书