jQuery PHP는 슬라이딩 스위치 effect_jquery를 생성합니다.

이 기사에서는 jQuery, PHP 및 MySQL을 사용하여 360 Security Guard 방화벽 켜짐 및 꺼짐과 유사한 스위치를 구현하는 방법을 소개합니다. 이 기능은 제품 기능의 켜짐 및 꺼짐 기능에 적용될 수 있습니다.

준비 작업 이 예를 더 잘 설명하려면 필요한 기능 설명과 열기 상태를 기록하는 데이터 테이블이 필요합니다. 테이블 구조는 다음과 같습니다.

<div class="codetitle"> <span><a style="CURSOR: pointer" data="61350" class="copybut" id="copybut61350" onclick="doCopy('code61350')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code61350"> <br> CREATE TABLE `pro` (  <br>   `id` int(11) NOT NULL auto_increment,  <br>   `title` varchar(50) NOT NULL,  <br>   `description` varchar(200) NOT NULL,  <br>   `status` tinyint(1) NOT NULL default '0',  <br>   PRIMARY KEY  (`id`)  <br> ) ENGINE=MyISAM  DEFAULT CHARSET=utf8;<br> </div>

테이블에 여러 데이터 조각을 삽입할 수 있습니다.

index.php

페이지에 관련 함수 목록을 표시하고, PHP를 사용하여 데이터 테이블을 읽어서 목록 형태로 표시하려고 합니다.

<div class="codetitle"> <span><a style="CURSOR: pointer" data="53064" class="copybut" id="copybut53064" onclick="doCopy('code53064')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code53064"> <br> <&#63;php <br /> require_once('connect.php'); //连接数据库 <br /> $query=mysql_query("select * from pro order by id asc"); <br /> while ($row=mysql_fetch_array($query)) { <br /> &#63;>   <br>    <div class="list">   <br>      <div class="fun_title">   <br>         <span rel="<&#63;php echo $row['id'];&#63;>" <&#63;php if($row['status']==1){ &#63;>   <br> class="ad_on" title="点击关闭"<&#63;php }else{&#63;>class="ad_off" title="点击开启"<&#63;php }&#63;>></span>   <br>         <h3><&#63;php echo $row['title']; &#63;></h3>   <br>      </div>   <br>      <p><&#63;php echo $row['description'];&#63;></p>   <br>    </div>   <br>  <&#63;php } &#63;><br> </div>

데이터베이스에 연결한 후 루프를 통해 제품 기능 목록을 출력합니다.

CSS

더 나은 페이지 모양을 렌더링하기 위해 CSS를 사용하여 페이지를 아름답게 만들고 사용자 친화적으로 만듭니다. CSS를 사용하면 스위치 버튼을 식별하는 데 이미지만 필요합니다.

<div class="codetitle"> <span><a style="CURSOR: pointer" data="31038" class="copybut" id="copybut31038" onclick="doCopy('code31038')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code31038"> <br> .list{padding:6px 4px; border-bottom:1px dotted #d3d3d3; position:relative}   <br> .fun_title{height:28px; line-height:28px}   <br> .fun_title span{width:82px; height:25px; background:url(switch.gif) no-repeat;    <br> cursor:pointer; position:absolute; right:6px; top:16px}   <br> .fun_title span.ad_on{background-position:0 -2px}   <br> .fun_title span.ad_off{background-position:0 -38px}   <br> .fun_title h3{font-size:14px; font-family:'microsoft yahei';}   <br> .list p{line-height:20px}   <br> .list p span{color:#f60}   <br> .cur_select{background:#ffc}<br> </div>

CSS 코드에 대해 자세히 설명하고 싶지는 않지만, 이미지를 사용한 다음 배경 위치를 사용하여 대부분의 웹사이트에서 사용하는 방법은 사용하지 않습니다. 혜택에.

jQuery

스위치 버튼을 클릭하여 해당 기능 스위치 상태를 변경하는 시간에 맞춰 배경을 요청합니다. 이 프로세스는 일반적인 Ajax 애플리케이션입니다. 전환 버튼을 클릭하면 프런트 엔드가 백그라운드 PHP에 게시 요청을 보내고, 백그라운드는 요청을 수신하고 데이터베이스를 쿼리한 후 결과를 프런트 엔드에 반환합니다. 프런트 엔드 jQuery는 다음을 기반으로 버튼 상태를 변경합니다. 백그라운드에서 반환된 결과입니다.

<div class="codetitle"> <span><a style="CURSOR: pointer" data="70559" class="copybut" id="copybut70559" onclick="doCopy('code70559')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code70559"> <br> $(함수(){   <br>     //鼠标滑向换color   <br>     $(".list").hover(function(){   <br>         $(this).addClass("cur_select");   <br>     },함수(){   <br>         $(this).removeClass("cur_select");   <br>     });   <br>     //关闭   <br>     $(".ad_on").live("click",function(){   <br>         var add_on = $(this);   <br>         var status_id = $(this).attr("rel");   <br>         $.post("action.php",{status:status_id,type:1},function(data){   <br>             if(데이터==1){   <br>                 add_on.removeClass("ad_on").addClass("ad_off").attr("title","点击开启");   <br>             }else{   <br>                 경고(데이터);   <br>             }   <br>         });   <br>     });   <br>     //开启   <br>     $(".ad_off").live("click",function(){   <br>         var add_off = $(this);   <br>         var status_id = $(this).attr("rel");   <br>         $.post("action.php",{status:status_id,type:2},function(data){alert(data);     <br>             if(데이터==1){   <br>                 add_off.removeClass("ad_off").addClass("ad_on").attr("title","点击关闭");   <br>             }else{   <br>                 경고(데이터);   <br>             }   <br>         });   <br>     });   <br> });<br> </div>

说明，代码中，首先实现了鼠标滑向功能列表换color的功能(详见demo)，然后就是单击开关按钮，向台action.php发送Ajax请求，提交的参数是对应功能的id 와 유형, 사용은 于后台区分请求的是哪个功能和请求的类型(开启和关闭)입니다.返回结果后，开关按钮动态改变样式，实现改变开关状态的功能。

action.php

后台action.php接收到前端的请求,根据参数执行SQL语句，更新对应功能的状态，成功后将结果返回给前端，请看代码：

<div class="codetitle"> <span><a style="CURSOR: 포인터" data="51996" class="copybut" id="copybut51996" onclick="doCopy('code51996') "><u>复代码</u></a></span> 代码如下:<code><div class="codetitle"> <span><a style="CURSOR: pointer" data="51996" class="copybut" id="copybut51996" onclick="doCopy('code51996')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code51996"> <br> require_once('connect.php');   <br> $id = $_POST['status'];   <br> $type = $_POST['type'];   <br> if($type==1){ //关闭   <br>     $sql = "update pro set status=0 where id=".$id;   <br> }else{ //开启   <br>     $sql = "update pro set status=1 where id=".$id;   <br> }   <br> $rs = mysql_query($sql);   <br> if($rs){   <br>     echo '1';   <br> }else{   <br>     echo '服务器忙，请稍后再试！';   <br> }<br> </div>