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将Table导出到Excel实现思路及代码
Mar 13 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
Javascript使用uploadify来实现多文件上传
Nov 16 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 Javascript
TypeScript 使用 Tuple Union 声明函数重载
Apr 07 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/01 无线电
PHP获取数据库表中的数据插入新的表再原删除数据方法
2018/10/12 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
浅析JavaScript动画模拟拖拽原理
2016/12/09 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
2018/09/18 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
浅谈python对象数据的读写权限
2016/09/12 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
利用python库在局域网内传输文件的方法
2018/06/04 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
keras的三种模型实现与区别说明
2020/07/03 Python
澳大利亚自然和有机的健康美容产品一站式商店:Ziani Beauty
2017/12/28 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
会计毕业生自荐信
2013/11/21 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
捐书寄语赠言
2014/01/18 职场文书
八年级数学教学反思
2014/01/31 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
2014年党员教师自我剖析材料
2014/09/30 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
python实现监听键盘
2021/04/26 Python
python面向对象版学生信息管理系统
2021/06/24 Python
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript