jquery_jquery に基づく期間実装コード-jsチュートリアル-php.cn

json 文字列:

コードをコピーコードは次のとおりです:

var mcode={"minfo":[ {" 時間":"9:00-10:00","ステータス":2},{"時間":"10:00-11:00","ステータス":1},{"時間":" 11:00-12:00","ステータス":3},{"時間":"13:00-14:00","ステータス":1},{"時間":"14:00-15: 00" ,"ステータス":1},{"時間":"15:00-16:00","ステータス":1},{"時間":"16:00-17:00","ステータス" :1 },{"time":"17:00-18:00","status":1}]};

ここで、time は期間を表し、status は位置が 1 のときを表します。 2 の場合は期限切れを表し、3 の場合は選択されていることを意味します。
json 文字列内のデータ値をループします。

コードをコピーコードは次のとおりです:

 
for(var i in mcode.minfo) { 
mcode.minfo[i].time mcode.minfo[i].status; 
} 

現在の期間が終了するかいっぱいになったら、マウスをその期間に移動します。現在の期間対応する情報が表示されたら、マウスを離すとプロンプトが表示されます。
現在の期間はオレンジ色で、選択可能であることを意味します。

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

 
$.each($("#testスパン") ,function(k,v){ 
if($(this).hasClass("unspan1")||$(this).hasClass("unspan2")){ 
$(this). hover(function (){ 
$(this).find("label").css({"display":"block"}); 
$(this).find("em").css ({" 表示":"ブロック"}); 
}, function(){ 
$(this).find("label").css({"表示":"なし"}); 🎜>$ (this).find("em").css({"display":"none"}); 
} 
else{ 
$(this)。 click(function (){ 
 $("#result").empty().html("あなたが選択しました:" $(this).text()); 
} 
} ); 

 
文字列を結合して HTML 構造を構築します。 

コードをコピーコードは次のとおりです: for(var i in mcode.minfo) {

if(mcode.minfo[i].status===2){

html ='} 
else{ 
html =''; 
} 
else{ 
html ='mspan" >'; 
 } 
html =mcode.minfo[i].time; 
if(mcode.minfo[i].status===2){ 
html ='期限切れ} 
else if(mcode.minfo[i].status===3){ 
html ='完全に選択'; 
if(mcode.minfo[i].status!==1){ 
html ='' 
} 
html ="} 

 
css スタイル: 

コードをコピー

コードは次のとおりです: #test{幅: 430px;パディング: 35px;ボーダー: 1px ソリッド #666666;オーバーフロー: 非表示;マージン: 100px 自動 0px;} #テストスパン{表示:ブロック;背景: #FF6600; 高さ: 30px; テキスト整列: 中央; カーソル: 15px; } #test .mspan{margin-right: 20px;}

#test .unspan1{背景: #D2E0E6; カーソル: デフォルト}

#test .unspan2{背景: #ffcaca; カーソル: デフォルト; } 
#test ラベル{位置: 絶対; 左: 25 ピクセル; 幅: 60 ピクセル; 背景: 1 ピクセル 10 ピクセル; ;表示 : なし;} 
#test em{表示: ブロック;ボーダーカラー: #F3F3F3 透明 透明 透明;ボーダー スタイル: ソリッド;ボーダー幅: 6px 6px 6px 6px; 
パディング: 0;width : 0 ;高さ: 0; 
フォント サイズ: 0;行の高さ: 0; 
位置: 絶対;左:58 ピクセル;表示:なし; #F3F3F3 ;_border-bottom-color: #F3F3F3; 
_filter: chroma(color = #F3F3F3); 
} 
#result{ margin: 10px auto 0px; 
 
例: 




コードをコピー

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