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

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


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

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

1.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’);
});

css部
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);
  });

});

css部
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の中身をその変数に置き換えます。

結果

2.プラグイン

プラグインを使用して、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);
});

css部
#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まで、1秒かけてスクロールしながら移動します。

結果

※jQueryのプラグインは、ネット上で多数公開されており、使用する時は、demoのソースなどを参考しながらプログラムすれば、やりやすいと思います。ただし、ライセンス条項を読まれて、商用利用など問題ないかご確認のうえご使用ください。


備考

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



実習で使用している教本