2009年12月22日
Ajax入門（jQueryとThickbox）
何はともあれ
百聞は一見に如かず、です。
まずは、下記に続くサンプルを試して頂きながら、
「Ajax対応のJapascriptライブラリ」の“便利さ”を感じて頂ければ、と思います。
jQuery
【公式サイト】
・「jQuery」（英語）
【特徴】
Javascriptライブラリ（Javascriptの塊）の一つ。
Webページ内の要素（文字とか段落とか画像とか）に対して、比較的簡単なJavascriptのコードを記述するだけで、様々な効果を与えることができます。
【ダウンロード】
上記公式サイトにて、「Download（jQuery）;」ボタンをクリックすると、最新版をダウンロードする画面に遷移するので、下記のファイルをダウンロードして下さい。
・jQuery-X.X.X.min.js
【コード例】
≪sample.html≫
<html> <head> <title>jQueryサンプル</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <link href="sample.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> <!-- $(function() { $('#Area1').mouseover(function(){ $(this).css("background-color","#ff0000") }); $('#Area1').mouseout(function(){ $(this).css("background-color","#ffffff") }); $('#Area2').click(function(){ $('div#Area2 span').fadeIn("slow") }); }); //--> </script> </head> <body> <div id="Area1"> ココのエリアに、マウスカーソルを重ねたり外したりすると、色が変わります。 </div> <div id="Area2"> ココのエリアをクリックすると・・・<br /> <br /> <span>文字がフェードインされます。</span> </div> </body> </html>
≪sample.css≫
div { border-right: #000000 1px solid; border-top: #000000 1px solid; border-left: #000000 1px solid; border-bottom: #000000 1px solid; } div#Area1 { width: 400px; height: 100px; left: 100px; top: 100px; } div#Area2 { width: 400px; height: 100px; left: 100px; top: 400px; } div#Area2 span { display: none; }
【参照URL】
・「jQuery: jQuery実践サンプル」
豊富なサンプル量を公開しています。
・「はじめてのjQuery」
jQueryを使って何かやってみたい方は、一度、これを見ておいてもいいかもしれません。
ThickBox
【公式サイト】
・「ThickBox 3.1」（英語）
【特徴】
jQuery対応のJavascriptライブラリで、ブラウザ上の特定のエリア（テキストや画像）を、ポップアップのように表示することができます。特に、画像の拡大表示やスライドショーとして応用されることが多いです。
「PartyWeb」では、Webアルバム機能に ThickBox を応用しています。
【ダウンロード】
上記公式サイトにて、「Overview」のところにある「Download」にリンクされている下記のファイルをダウンロードして下さい。
・thickbox.js、もしくは、thickbox-compressed.js
・ThickBox.css
・loadingAnimation.gif
（※loadingAnimation.gif は、thickbox.js を基点に「images/loadingAnimation.gif」となるように配置して下さい。）
【コード例】
≪sample2.html≫
<html> <head> <title>Thickboxサンプル</title> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="thickbox.js"></script> <link href="thickbox.css" rel="stylesheet" type="text/css" /> </head> <body> <a class="thickbox" title="1" rel="group1" href="images/1.jpg"><img alt="1" src="images/1_t.jpg" /></a> <a class="thickbox" title="2" rel="group1" href="images/2.jpg"><img alt="2" src="images/2_t.jpg" /></a> <a class="thickbox" title="3" rel="group1" href="images/3.jpg"><img alt="3" src="images/3_t.jpg" /></a> </body> </html>
【参照URL】
・「Thickbox・Examples」
ThickBox の公式サイトの「Example」にて、いくつかのサンプルが公開されています。
・「class=”thickbox” に rel をつけると画像が表示されない」
Thickbox 3.1 + jQuery 1.3.2 で、上記のコード例のようなスライドショーを作ろうとするとハマると思います。
対処としては、Thickbox.js の79行目の「@」を削除して保存するだけです。
【ちなみに】
2009年9月30日、ThickBox の作者・Paul Irish氏は、
「しばらく Thickbox のメンテは行わない。」という告知をしており、
Thickbox と同じような動きをする下記のようなJavascriptライブラリを紹介しています。
・「colorbox」
・「jQueryUI Dialog」
・「fancybox」
・「DOM window」
・「shadowbox.js」
それぞれ、表示の種類やHTML/CSSの書き方や異なりますので、自分の好みと状況によって使い分けるとよいでしょう。
次回予告
いかがでしょうか？
多少のコツは必要ですが、Javascriptライブラリを使えば、
比較的短いコードで、いろんな動き・効果・演出を付けることができそうではありませんか？
次回は、当社の「PartyWeb」の「スライドショー」機能を題材に、
より実用に向けたカスタマイズ方法についてご紹介できれば、と思います。
