jQuery와 PHP를 사용하여 유사한 360 기능 전환 달성하기 effect_jquery

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

코드 복사 코드는 다음과 같습니다.

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 기본값 '0' ,
기본 키(`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

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

index.php

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

코드 복사 코드는 다음과 같습니다.

require_once( 'connect.php'); //데이터베이스에 연결
$query=mysql_query("select * from pro order by id asc")
while ($row=mysql_fetch_array($query)) {
?>
                                                       "
class="ad_on" title="닫으려면 클릭하세요."< ;?php }다른 {?>class="ad_off " title="열려면 클릭하세요">
                           
                                                  php } ?>



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

CSS

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

코드 복사

코드는 다음과 같습니다..list{padding:6px 4px; -하단: 점선 1px #d3d3d3; 위치:상대적} .fun_title{height:28px; line-height:28px} .fun_title 범위{width:82px; height:25px; ) 반복 없음;

cursor:pointer; position:absolute; right:6px; top:16px}

.fun_titlespan.ad_on{Background-position:0 -2px}
.fun_titlespan.ad_off 배경 위치:0 -38px} 
.fun_title h3{font-size:14px; 글꼴-가족:'microsoft yahei';} 
.list p{line-height:20px} 
.list p 스팬{색상:#f60}
.cur_select{배경:#ffc}



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

jQuery

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

코드 복사

코드는 다음과 같습니다.

$(function(){  
    //鼠标滑向换color  
    $(".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("제목","点击开启");  
           }else{  
              경고(데이터);  
           }  
        });
    });  
    //开启  
    $(".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{  
                경고(데이터);  
            }  
        });  
    });  
});

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

action.php

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

复主代码 代码如下:

require_once('connect.php');  
$id = $_POST['상태'];  
$type = $_POST['유형'];  
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){  
    에코 '1';  
}else{  
    echo '服务器忙，请稍后再试!';  
}