使用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 异常处理使用总结
Jun 21 Javascript
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
7个JS基础知识总结
Mar 05 Javascript
自己封装的javascript事件队列函数版
Jun 12 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
javascript实现密码验证
Nov 10 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
Element Breadcrumb 面包屑的使用方法
Jul 26 Javascript
Vue+Element-U实现分页显示效果
Nov 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中目录,文件操作详谈
2007/03/19 PHP
php缓存技术详细总结
2013/08/07 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
jquery html5 视频播放控制代码
2016/11/06 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
VUE axios上传图片到七牛的实例代码
2017/07/28 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
理解Python垃圾回收机制
2016/02/12 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
虚拟机下载python是否需要联网
2020/07/27 Python
python实现简单的学生管理系统
2021/02/22 Python
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
会计专业毕业生自我鉴定
2013/10/29 职场文书
思想政治教育专业个人求职信范文
2013/12/20 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
药剂专业自荐书
2014/06/20 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
保险公司反洗钱宣传活动总结
2015/05/08 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
创业计划书之美甲店
2019/09/20 职场文书
Python必备技巧之字符数据操作详解
2022/03/23 Python
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
Java Spring读取和存储详细操作
2022/08/05 Java/Android