基金訓練(Webデザイン・プログラミング科)の67日目に行ってまいりました。
67日目は、jQueryの実習です。
67日目の内容は下記のとおりです。
１．表示・非表示のメソッドを使って、アコーディオンメニューを作成
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’);
}
});
ｃｓｓ部
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要素の一つ前の要素を示すセレクター。
(例の場合、閉じているタブのｄｔ要素。)
$(this).next()
イベント対象の要素の次の要素を示すセレクター。
(例の場合、クリックされたｄｔ要素の次のｄｄ要素。)
結果
２．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);
});
ｃｓｓ部
.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ミリ秒)でアニメーションします。
結果
３．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’}
);
});
ｃｓｓ部
.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は、配られたプリントで習っており、下に紹介している教本には載っていません。
実習で使用している教本
