基金訓練に行ってきました。(66日目)

前回の入力フォームに、未記入の時、警告するようにします。

プログラム例

script部
$(‘input’).focus(function(){
　　$(this).addClass(‘focused’);
});
$(‘input’).blur(function(){
　　$(this).removeClass(‘focused’);
　　if($(this).val()==”){
　　　　$(this).addClass(‘uninput’);
　　　　$(this).next().html(‘ 未入力！’);
　　}
　　else{
　　　　$(this).removeClass(‘uninput’);
　　　　$(this).next().html(”);
　　}
});

ｃｓｓ部
.focused {background-color:#ccffff;}
.uninput {background-color:#ffc0cb;}
span {color:#ff0000;font-weight:bold;}

HTML部
氏名：<input type="text" /><span></span><br />
メールアドレス：<input type="text" /><span></span><br />

説明

if($(this).val()==”){1}　else{2}

イベント対象のタグのvalueの値が空文字列のとき、1を実行し、それ以外は、2を実行します。
(例の場合、イベント対象のタグとはフォーカスが当たっているinputタグを指します。)

$(this).next().html(‘ 未入力！’);

イベント対象のタグの次のタグの中身を　未入力！　に書き換えます。
(例の場合、イベント対象の次のタグとは、spanタグを指し、中身とは、spanタグで囲まれた文字列を指します。)

結果

アニメーションで要素を、表示したり非表示にしたりします。

メソッド

show()メソッド

表示するためのメソッドです。

hide()メソッド

非表示にするためのメソッドです。

slideDown()メソッド

上から徐々に表示するためのメソッドです。

slideUpメソッド

下から徐々に非表示にするためのメソッドです。

slideToggleメソッド

slideDown、slideUpを繰り返すためのメソッドです。

fadeIn

フェードインで表示するためのメソッドです。

fadeOut

フェードアウトで非表示にするためのメソッドです。

書式

$(‘セレクター’).show(スピード,function(){
　　　　　　アニメーションが終わった時の処理
});

前回の入力フォームに、未記入の時、警告するようにします。

プログラム例

script部
$(‘.tab1’).mouseover(function(){
　　$(this).addClass(‘focused’);
});
$(‘.tab1’).mouseout(function(){
　　$(this).removeClass(‘focused’);
});
$(‘.tab2’).mouseover(function(){
　　$(this).addClass(‘focused’);
});
$(‘.tab2’).mouseout(function(){
　　$(this).removeClass(‘focused’);
});
$(‘.text1’).show();
$(‘.tab1’).click(function(){
　　$(‘#text div’).hide();
　　$(‘.text1’).slideDown();
});
$(‘.tab2’).click(function(){
　　$(‘#text div’).hide();
　　$(‘.text2’).slideDown();
});

ｃｓｓ部
#tab div{
　　width:50px;
　　height:20px;
　　padding:5px;
　　text-align:center;
　　cursor:pointer;
　　float:left;
}
.tab1,.text1{
　　background-color:#9F6;
}
.tab2,.text2{
　　background-color:#FCC;
}
#text div{
　　width:110px;
　　padding:5px;
　　display:none;
　　clear:both;
}
.focused{
　　color:#F00;
　　font-weight:bold;
　　font-size:120%;
}

HTML部
<div id="tab">
<div class="tab1">タブ1</div>
<div class="tab2">タブ2</div>
</div>
<div id="text">
<div class="text1">タブ1の内容。タブ1の内容。タブ1の内容。タブ1の内容。タブ1の内容。</div>
<div class="text2">タブ2の内容。タブ2の内容。タブ2の内容。タブ2の内容。タブ2の内容。</div>
</div>

説明

CSS部　#text div{display:none;}

ページを読み込んだ時、#text　div　を非表示にします。

$(‘.text1’).show();

ページを読み込んだ時、.text　を表示します。

$(‘#text div’).hide();

#text　div　を非表示にします。

$(‘.text1’).slideDown();

.text1　を上からアニメーションしながら表示します。

結果