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


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

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

1.フォーカスイベント(その2)

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

プログラム例

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(”);
  }
});

css部
.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タグで囲まれた文字列を指します。)

結果

2.表示・非表示を切り替えるメソッド

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

メソッド

show()メソッド
表示するためのメソッドです。
hide()メソッド
非表示にするためのメソッドです。
slideDown()メソッド
上から徐々に表示するためのメソッドです。
slideUpメソッド
下から徐々に非表示にするためのメソッドです。
slideToggleメソッド
slideDown、slideUpを繰り返すためのメソッドです。
fadeIn
フェードインで表示するためのメソッドです。
fadeOut
フェードアウトで非表示にするためのメソッドです。

書式

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

3.表示・非表示のメソッドを使って、タブメニューを作成

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

プログラム例

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();
});

css部
#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 を上からアニメーションしながら表示します。

結果


備考

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




  • 人気ブログランキングへ
  • FC2ランキングへ
  • ブログランキング・にほんブログ村へ
  • おきてがみ

関連記事

カテゴリー:職業訓練
.

コメントを残す