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获取URL参数与参数值的示例代码
Dec 20 Javascript
jquery.mousewheel实现整屏翻屏效果
Aug 30 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
bootstrap响应式表格实例详解
May 15 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
Nov 13 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
React+EggJs实现断点续传的示例代码
Jul 07 Javascript
JS中的变量作用域(console版)
Jul 18 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 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
一个域名查询的程序
2006/10/09 PHP
再次研究下cache_lite
2007/02/14 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
ExtJs grid行 右键菜单的两种方法
2010/06/19 Javascript
javascript动态加载二
2012/08/22 Javascript
JavaScript极简入门教程(一):基础篇
2014/10/25 Javascript
JavaScript实现将UPC转换成ISBN的方法
2015/05/26 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
2020/10/23 Javascript
Python学习笔记(二)基础语法
2014/06/06 Python
python发送邮件功能实现代码
2016/07/15 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
python中日志logging模块的性能及多进程详解
2017/07/18 Python
python3实现跳一跳点击跳跃
2018/01/08 Python
Python程序运行原理图文解析
2018/02/10 Python
用Python逐行分析文件方法
2019/01/28 Python
Python基础之文件读取的讲解
2019/02/16 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
python dataframe NaN处理方式
2019/12/26 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
Python如何批量生成和调用变量
2020/11/21 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
日本网路线上商品代购服务:转送JAPAN
2016/08/05 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
中医药大学毕业生自荐信
2013/11/08 职场文书
读书演讲主持词
2014/03/18 职场文书
校园演讲稿汇总
2014/05/21 职场文书
离婚协议书范本
2015/01/26 职场文书
Spring中bean集合注入的方法详解
2022/07/07 Java/Android