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

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のソースなどを参考しながらプログラムすれば、やりやすいと思います。ただし、ライセンス条項を読まれて、商用利用など問題ないかご確認のうえご使用ください。