ホームページ > 記事 > ウェブフロントエンド > jquery_jquery に基づく期間実装コード
jquery_jquery に基づく期間実装コード
- WBOYオリジナル
- 2016-05-16 17:51:15995ブラウズ
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{
html ='';
}
else{
html ='mspan" >';
}
html =mcode.minfo[i].time;
if(mcode.minfo[i].status===2){
html ='
コードをコピー
コードは次のとおりです: #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;
例:
コードをコピー
コードは次のとおりです:#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;
例:
コードをコピー