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 構造を構築します。
if(mcode.minfo[i].status===2){
html ='}
else{
html ='';
}
else{
html ='mspan" >';
}
html =mcode.minfo[i].time;
if(mcode.minfo[i].status===2){
html ='}
css スタイル:
コードをコピー
#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;
例:
コードをコピー
コードは次のとおりです: