基金訓練(Webデザイン・プログラミング科)の69日目に行ってまいりました。
69日目は、jQueryの実習の最終日です。
69日目の内容は下記のとおりです。
１．Ajax
Ajaxとは、非同期でWebページの一部を変更することができます。
このためページ全体をリロードする必要がありません。
Ajaxが使われているサイトで有名なところでは、グーグルマップがあります。
外部ファイルを表示する
load()メソッドを使って、ページ内に別ファイルの内容を表示します。
書式
$(‘セレクター’).load(‘外部ファイル名’,’パラメータ’,’コールバック関数’);
プログラム例
script部
$(‘.button1’).click(function(){
$(‘.button2’).css(‘fontWeight’,’normal’);
$(‘.button1’).css(‘fontWeight’,’bold’);
$(‘#result’).load(‘156demo_news.html’);
});
$(‘.button2’).click(function(){
$(‘.button1’).css(‘fontWeight’,’normal’);
$(‘.button2’).css(‘fontWeight’,’bold’);
$(‘#result’).load(‘156demo_kousin.html’);
});
ｃｓｓ部
dl{
clear:both;
width:300px;
padding:5px;
}
dt{
float:left;
margin-right:10px;
}
dt,dd{
border-bottom:dotted 2px #ffddff;
line-height:30px;
}
input{
padding:5px;
}
HTML部
<input type="button" class="button1" value="最新ニュース" />
<input type="button" class="button2" value="更新情報" />
<div id="result"></div>
説明
$(‘#result’).load(‘156demo_news.html’);
156demo_news.htmlを読み込んで、div#resultに展開します。
結果
外部ファイルを取得する
get()メソッドを使って、別ファイルの内容を変数に読み込みます。
書式
$.get(‘外部ファイル名’,’パラメータ’,’コールバック関数’);
プログラム例
script部
$(‘.button1’).click(function(){
$(‘.button2’).css(‘fontWeight’,’normal’);
$(‘.button1’).css(‘fontWeight’,’bold’);
$.get(‘156demo_news.html’,function(data){
$(‘#result’).html(data);
});
});
$(‘.button2’).click(function(){
$(‘.button1’).css(‘fontWeight’,’normal’);
$(‘.button2’).css(‘fontWeight’,’bold’);
$.get(‘156demo_kousin.html’,function(data){
$(‘#result’).html(data);
});
});
ｃｓｓ部
dl{
clear:both;
width:300px;
padding:5px;
}
dt{
float:left;
margin-right:10px;
}
dt,dd{
border-bottom:dotted 2px #ffddff;
line-height:30px;
}
input{
padding:5px;
}
HTML部
<input type="button" class="button1" value="最新ニュース" />
<input type="button" class="button2" value="更新情報" />
<div id="result"></div>
説明
$.get(‘156demo_news.html’,function(data){
$(‘#result’).html(data);
});
156demo_news.htmlを変数に読み込んだ後、、div#resultの中身をその変数に置き換えます。
結果
２．プラグイン
プラグインを使用して、jQueryにさまざまなメソッドを追加します。
プラグインを使用するにはjQuery本体のjsファイルの後に、scriptタグで、プラグインのファイルを読み込みます。
scrollToプラグイン
scrollToプラグインは、ページ内の指定した要素まで、スムーズにスクロールする為のプラグインです。
プログラム例
head部
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.scrollTo-min.js"></script>
script部
$(‘.button1’).click(function(){
$.scrollTo(‘#box1’,1000);
});
$(‘.button2’).click(function(){
$.scrollTo(‘#box2’,1000);
});
$(‘.button3’).click(function(){
$.scrollTo(‘#box3’,1000);
});
ｃｓｓ部
#innerBox1{
width:200px;
height:120px;
margin:5px;
background-color:#00ff00;
}
#innerBox2{
width:200px;
height:120px;
margin:5px;
background-color:#ff0000;
}
#innerBox3{
width:200px;
height:120px;
margin:5px;
background-color:#0000ff;
}
#innerBox4{
width:200px;
height:100px;
}
HTML部
<div id="box1">
<input type="button" class="button1" value="BOX1へ" />
<input type="button" class="button2" value="BOX2へ" />
<input type="button" class="button3" value="BOX3へ" />
<div id="innerBox1">BOX1</div>
</div>
<div id="box2">
<input type="button" class="button1" value="BOX1へ" />
<input type="button" class="button2" value="BOX2へ" />
<input type="button" class="button3" value="BOX3へ" />
<div id="innerBox2">BOX2</div>
</div>
<div id="box3">
<input type="button" class="button1" value="BOX1へ" />
<input type="button" class="button2" value="BOX2へ" />
<input type="button" class="button3" value="BOX3へ" />
<div id="innerBox3">BOX3</div>
</div>
<div id="innerBox4"></div>
説明
$.scrollTo(‘#box1’,1000);
div#box1まで、１秒かけてスクロールしながら移動します。
結果
※jQueryのプラグインは、ネット上で多数公開されており、使用する時は、demoのソースなどを参考しながらプログラムすれば、やりやすいと思います。ただし、ライセンス条項を読まれて、商用利用など問題ないかご確認のうえご使用ください。
備考
jQueryは、配られたプリントで習っており、下に紹介している教本には載っていません。
実習で使用している教本
