使用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 23 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
jquery实现倒计时效果
Dec 14 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
Angular.js与Bootstrap相结合实现表格分页代码
Apr 12 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
原生JS实现不断变化的标签
May 22 Javascript
Vue Socket.io源码解读
Feb 07 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 Javascript
js之ajax文件上传
May 13 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
[FAQ]PHP中的一些常识:类篇
2006/10/09 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
PHP+Memcache实现wordpress访问总数统计(非插件)
2014/07/04 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
jQuery ready函数滥用分析
2011/02/16 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
JS预览图像将本地图片显示到浏览器上
2013/08/25 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
js实现鼠标点击左上角滑动菜单效果代码
2015/09/06 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
angular十大常见问题
2017/03/07 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
webpack 处理CSS资源的实现
2019/09/27 Javascript
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
利用Python绘制MySQL数据图实现数据可视化
2015/03/30 Python
pycharm远程调试openstack的图文教程
2017/11/21 Python
对Python字符串中的换行符和制表符介绍
2018/05/03 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
PyTorch中的C++扩展实现
2020/04/02 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
Python实现自动装机功能案例分析
2020/10/22 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
全球摩托车装备领导者:RevZilla
2017/09/04 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
电大自我鉴定范文
2013/10/01 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
片区教研活动总结
2014/07/02 职场文书
少先队辅导员事迹材料
2014/12/24 职场文书
MySQL中in和exists区别详解
2021/06/03 MySQL