使用jQuery和PHP实现类似360功能开关效果


Posted in Javascript onFebruary 12, 2014

使用jQuery和PHP实现类似360功能开关效果

准备工作为了更好的演示本例,我们需要一个数据表,记录需要的功能说明及开启状态,表结构如下:

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实现类似360功能开关效果

.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 '服务器忙,请稍后再试!';   
}
Javascript 相关文章推荐
javascript第一课
Feb 27 Javascript
js文字滚动停顿效果代码
Jun 28 Javascript
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
May 02 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 #Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 #Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 #Javascript
jquery ajax,ashx,json的用法总结
Feb 12 #Javascript
Jquery中ajax方法data参数的用法小结
Feb 12 #Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 #Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 #Javascript
You might like
解析PHP汉字转换拼音的类
2013/06/18 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
php程序内部post数据的方法
2015/03/31 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
PHP中quotemeta()函数的用法讲解
2019/04/04 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
JS实现随机数生成算法示例代码
2013/08/08 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
2014/03/28 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
Window.Open如何在同一个标签页打开
2014/06/20 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
2016/03/25 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
使用python在本地电脑上快速处理数据
2017/06/22 Python
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
一道SQL存储过程面试题
2016/10/07 面试题
介绍一下write命令
2014/08/10 面试题
python - asyncio异步编程
2021/04/06 Python
python 算法题——快乐数的多种解法
2021/05/27 Python