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 相关文章推荐
通过jQuery源码学习javascript(一)
Dec 27 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
javascript编写简易计算器
May 06 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
vue发送ajax请求详解
Oct 09 Javascript
小程序自定义日历效果
Dec 29 Javascript
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 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批量生成随机用户名
2008/07/10 PHP
PHP获取url的函数代码
2011/08/02 PHP
ThinkPHP缓存方法S()概述
2014/06/13 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
JS实现的tab页切换效果完整示例
2018/12/18 Javascript
vue 中 beforeRouteEnter 死循环的问题
2019/04/23 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
解决vue打包报错Unexpected token: punc的问题
2020/10/24 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
python动态加载变量示例分享
2014/02/17 Python
Python如何读取MySQL数据库表数据
2017/03/11 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
python区分不同数据类型的方法
2019/10/14 Python
Python模块的制作方法实例分析
2019/12/21 Python
css3 按钮 利用css3实现超酷下载按钮
2013/03/18 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
光荣之路观后感
2015/06/12 职场文书
2016年“世界气象日”广播稿
2015/12/17 职场文书
护士岗前培训心得体会
2016/01/08 职场文书
MySQL数据库中varchar类型的数字比较大小的方法
2021/11/17 MySQL