使用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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
js 通用订单代码
Dec 23 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
Bootstrap被封装的弹层
Jul 20 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
Oct 28 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
vue better scroll 无法滚动的解决方法
Jun 07 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 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
全国中波电台频率表
2020/03/11 无线电
Terran兵种对照表
2020/03/14 星际争霸
php实现的支持断点续传的文件下载类
2014/09/23 PHP
php mysql数据库操作类(实例讲解)
2017/08/06 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
2012/08/24 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
封装好的javascript前端分页插件pagination
2016/01/04 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
JavaScript之Map和Set_动力节点Java学院整理
2017/06/29 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
mpvue中配置vuex并持久化到本地Storage图文教程解析
2018/03/15 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
Python fileinput模块使用介绍
2014/11/30 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
详解CSS3中Media Queries的相关使用
2015/07/17 HTML / CSS
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
大学新生欢迎词
2014/01/10 职场文书
公司请假条范文
2014/04/11 职场文书
软环境建设心得体会
2014/09/09 职场文书
我为党旗添光彩演讲稿
2014/09/13 职场文书
何玥事迹观后感
2015/06/16 职场文书
Python初识逻辑与if语句及用法大全
2021/08/07 Python
与Windows10相比Windows11有哪些改进?值不值得升级?
2021/11/21 数码科技