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

マウスオーバーされた時のイベントに処理を指定します。

プログラム例

script部
$(function(){
　　$(‘li’).mouseover(function(){
　　　　$(this).css(‘backgroundPosition’,’0 -30px’);
　　});
　　$(‘li’).mouseout(function(){
　　　　$(this).css(‘backgroundPosition’,’0 0′);
　　});
});

CSS部
ul{
　　list-style-type:none;
　　margin:0;
　　padding:0;
}
li{
　　float:left;
　　margin:0 5px 0 0;
　　text-align:center;
　　line-height:30px;
　　background-image:url(../image/menuButton.png);
　　width:100px;
　　height:30px;
　　cursor:pointer;
}

HTML部
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
</ul>

使用画像

100ｘ60の画像ひとつで背景画像位置を変更して切り替えています。

説明

$(‘li’).mouseover(function(){　})

liタグ中身がマウスオーバーされた時、｛　｝内を実行します。

$(this).css(‘backgroundPosition’,’0 -30px’);

イベント対象のタグに、style="background-position:0 -30px"を書き加えます。

$(‘li’).mouseout(function(){　})

liタグ中身からマウスが離れた時、｛　｝内を実行します。

$(this).css(‘backgroundPosition’,’0 0′);

イベント対象のタグを、style="background-position:0 0"に書き変えます。

結果

change()メソッドを使って、指定した要素の内容が変更されたというイベント時の処理を設定します。

プログラム例

script部
$(function(){
　　$(‘#select’).change(function(){
　　　　var selected=$(‘#select option:selected’).val();
　　　　$(‘#result div’).hide();
　　　　$(‘.’+selected).show();
　　});
　　$(‘#select’).change();
});

ｃｓｓ部
#result div{display:none;}
img{float:left;　margin:5px;}

HTML部
<select id="select">
　　<option value="red">レッド</option>
　　<option value="blue">ブルー</option>
　　<option value="green">グリーン</option>
</select>
<div id="result">
　　
<div class="red">
　　
<img src="kero_r.png" width="50" height="50" alt="ケロレッド" />
　　鮮やかな赤ケロです。
　　
</div>
　　
<div class="green">
　　
<img src="kero_g.png" width="50" height="50" alt="ケログリーン" />
　　目に優しい緑ケロです。
　　
</div>
　　
<div class="blue">
　　
<img src="kero_b.png" width="50" height="50" alt="ケロブルー" />
　　爽やかな青ケロです。
　　
</div>
</div>

使用画像

説明

ｃｓｓ部　#result div{display:none;}

IDがresultの中のdivは、表示しません。(イメージと説明文をすべて表示しない。)

$(‘#select’).change(function(){　});

IDがselect内の内容が変更された時、{　}内を実行します。

var selected=$(‘#select option:selected’).val();

変数selectedに、IDがselectの中で選択されたoptionタグのvalueの値を取り込みます。

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

IDがresultの中のdivを表示しないようにします。
(2回目以降の選択時に一度表示を消すため。)

$(‘.’+selected).show();

変数selectedに取り込まれている値をクラス名として、そのクラスの要素を表示します。
(<div class="red">など)

$(‘#select’).change();

ページが最初に読み込まれた時に、changeイベントを実行します。
(最初に読み込んだ時に一度実行しないと、cssで表示しない設定にしているので、イメージが表示されないので。)

結果

※色違いの商品を見せる時などに利用できます。

focus()メソッド、blur()メソッドを使って、指定した要素にフォーカスが当たった(外れた)というイベント時の処理を設定します。

プログラム例

script部
$(function(){
　　$(‘input’).focus(function(){
　　　　$(this).addClass(‘focused’);
　　});
　　$(‘input’).blur(function(){
　　　　$(this).removeClass(‘focused’);
　　});
});

ｃｓｓ部
.focused {background-color:#ccffff;}

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

説明

$(‘input’).focus(function(){　});

inputタグにフォーカスが当たった時、{　}内を実行します。

$(‘input’).blur(function(){　});

inputタグからフォーカスが外れた時、{　}内を実行します。

結果