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 デフォルト'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 }else {?>class="ad_off " title="クリックして開きます">

php } ?>



データベースに接続し、ループして製品の機能リストを出力します。

CSS

ページの外観をより良くするために、CSS を使用してページを美しくし、よりユーザーフレンドリーにしています。 CSS を使用すると、スイッチ ボタンを識別するための画像のみが必要になります。

コードをコピーします

コードは次のとおりです。

.list{padding:6px 4px; -bottom: 1px 点線 #d3d3d3; 位置:相対} .fun_title{高さ:28px; line-height:28px} .fun_title スパン{幅:82px; 背景:url(switch.gif) ) no-repeat; カーソル:絶対; 右:6px; トップ:16px} .fun_title span.ad_on{background-position:0 -2px}背景位置 :0 -38px}

.fun_title h3{font-size:14px; font-family:'microsoft yahei';}

.list p{line-height:20px}
.list pスパン{カラー:#f60}
.cur_select{background:#ffc}



CSS コードの詳細については説明しませんが、画像を使用してから、background-position を使用して画像を配置します。これは、ほとんどの Web サイトで使用される方法です。メリットにつながります。

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","点击开启");
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{
アラート(データ);  
}
});  
});  
});

説明、代コード中、最初にマウス滑走機能列表色の機能 (详デモ) が実現され、次に单击开匉钮、向後台action.php送信Ajax要求、提交のパラメータは応答機能のidですタイプとは、後段の機能とリクエストのタイプ (スイッチとスイッチ) のことです。开关状態态の機能。

action.php

後台action.phpはフロントエンドへの要求を受け取り、パラメータに基づいてSQL実行を実行し、操作機能の状態を更新し、成功後結果をフロントエンドに返します。註：

复制代代码如下:

require_once('connect.php');  

$id = $_POST['ステータス'];  
$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 '服务器忙し、请稍後再试！';  
}