- WEBデザイン&WEBプログラミング -sei2の日記- - http://blog1.dd-company.com -

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


基金訓練(Webデザイン・プログラミング科)の64日目に行ってまいりました。
64日目は、jQueryの実習です。

64日目の内容は下記のとおりです。

1.listタグをマウスオーバーした時の背景画像の変更

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

プログラム例

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>

使用画像

メニューボタン

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

説明

$(‘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"に書き変えます。

結果

2.チェンジイベント

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

プログラム例

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

css部
#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>

使用画像

ケロレッド
ケログリーン
ケロブルー

説明

css部 #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で表示しない設定にしているので、イメージが表示されないので。)

結果

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

3.フォーカスイベント

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

プログラム例

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

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

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

説明

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

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

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

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

結果


備考

jQueryは、配られたプリントで習っており、下に紹介している教本には載っていません。



実習で使用している教本