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

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


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

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

1.表示・非表示のメソッドを使って、アコーディオンメニューを作成

slideDown、slideUpメソッドを使って、アコーディオンメニューを作成します。

プログラム例

script部
$(‘dt’).mouseover(function(){
  $(this).addClass(‘mouseover’);
});
$(‘dt’).mouseout(function(){
  $(this).removeClass(‘mouseover’);
});
$(‘dt’).click(function(){
  $(‘dd:visible’).slideUp(500,function(){
    $(‘dd:hidden’).prev().removeClass(‘menuOpen’);
  });
  if($(this).next().css(‘display’)==’none’){
    $(this).next().slideDown();
    $(this).addClass(‘menuOpen’);
  }
});

css部
dl{
width:200px;
border:solid 0px #555;
color:#838383;
}
dt{
background-color:#F8DAD6;
height:20px;
cursor:pointer;
border-bottom:solid 2px #ffffff;
padding-left:5px;
line-height:20px;
}
dd{
width:185px;
border-left:solid 5px #00ff00;
border-bottom:solid 2px #ffffff;
background-color:#FDF2F0;
padding:5px;
display:none;
}
dt .last{
border-bottom:none;
}
.mouseover{
background-color:#ffff00;
font-weight:bold;
font-size:120%;
}
.menuOpen{
border-left:solid 5px #00ff00;
border-bottom:none;
font-weight:bold;
font-size:120%;
}

HTML部
<dl>
<dt>メニュー1</dt>
<dd>内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1内容1</dd>
<dt>メニュー2</dt>
<dd>内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2内容2</dd>
<dt class="last">メニュー3</dt>
<dd>内容3内容3内容3内容3内容3内容3内容3内容3</dd>
</dl>

説明

$(‘dd:visible’)

可視状態にあるdd要素を示すセレクター。
(例の場合、開いているタブのテキスト部。)

$(‘dd:hidden’).prev()

非表示状態にあるdd要素の一つ前の要素を示すセレクター。
(例の場合、閉じているタブのdt要素。)

$(this).next()

イベント対象の要素の次の要素を示すセレクター。
(例の場合、クリックされたdt要素の次のdd要素。)

結果

2.animate()メソッド

CSSプロパティを指定して、アニメーションで要素を、表示したり非表示にしたりします。

書式

$(‘セレクター’).animate(CSSプロパティ,スピード,動き,function(){
      アニメーションが終わった時の処理
});

プログラム例

script部
$(‘.box’).click(function(){
  $(this).animate({’top’:’100px’},1000);
  $(this).animate({’left’:’100px’},500);
  $(this).animate({’left’:’25px’,’top’:’25px’},2000);
});

css部
.box{
  width:30px;
  height:30px;
  background-color:#00ff00;
  position:absolute;
  left:25px;
  top:25px;
  cursor:pointer;
  text-align:center;
  line-height:30px;
}

HTML部
BOXをクリック!
<div class="box">BOX</div>

説明

$(this).animate({’top’:’100px’},1000);

イベント対象の要素を、CSS top:100px まで、1秒(1000ミリ秒)でアニメーションします。

結果

3.animate()メソッドの動きのプラグイン

easingプラグインを使って、変化のある動きのアニメーションが可能です。

書式

$(‘セレクター’).animate(CSSプロパティ,

      {duration:スピード,easing:’関数名’},

      function(){アニメーションが終わった時の処理}

);
<head>部に
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
を記述します。srcは、プラグインのファイルの場所を指定します。
※プラグインのダウンロードは、
http://gsgd.co.uk/sandbox/jquery/easing/
からします。

プログラム例

script部
$(‘.box’).click(function(){
$(this).animate({’top’:’100px’},
      {duration:1000,easing:’easeOutBounce’}
);
$(this).animate({’left’:’100px’},
      {duration:1000,easing:’easeOutElastic’}
);
$(this).animate({’left’:’25px’,’top’:’25px’},
{duration:1000,easing:’easeInExpo’}
);
});

css部
.box{
  width:30px;
  height:30px;
  background-color:#00ff00;
  position:absolute;
  left:25px;
  top:25px;
  cursor:pointer;
  text-align:center;
  line-height:30px;
}

HTML部
BOXをクリック!
<div class="box">BOX</div>

説明

$(this).animate({’top’:’100px’},
      {duration:1000,easing:’easeOutBounce’}
);

イベント対象の要素を、CSS top:100px まで、1秒(1000ミリ秒)で関数easeOutBounceを使用して、アニメーションします。
※easingプラグインの関数を使った動きは、
http://semooh.jp/jquery/cont/doc/easing/
で、見ることができます。

結果


備考

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



実習で使用している教本