jQuery和PHP打造功能开关效果

 在开发项目中，我们会经常碰到需要及时开启某项功能的情况，通过Ajax实现实时开启和关闭功能，无疑增强了用户体验。本文以360安全卫士的木马防火墙开关为背景，使用PHP、jquery、MYSQL实现了及时开启和关闭产品功能的WEB应用。498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' height="186" alt="" width="650" src="/uploadfile/201301/2/4F195856678.gif" />498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="查看演示DEMO" src="/uploadfile/201301/2/41195856857.jpg" />准备工作为了更好的演示本例，我们需要一个数据表，记录需要的功能说明及开启状态，表结构如下：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)) {      ?>      < class="list">        < 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>        </>        <p><?php echo $row[''description''];?></p>      </>    <?php } ?>   连接数据库，然后循环输出产品功能列表。CSS为了渲染一个比较好的页面外观，我们使用CSS来美化页面，使得页面更符合人性化。使用CSS,我们只需用一张图片来标识开关按钮。498)this.width=498;'' onmousewheel = ''javascript:return big(this)'' alt="jquery开关" src="/uploadfile/201301/2/1E195856939.gif" />.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;