HOME

システム開発の株式会社システックス

2009年12月22日

Ajax入門(jQueryとThickbox)

何はともあれ

百聞は一見に如かず、です。

まずは、下記に続くサンプルを試して頂きながら、
「Ajax対応のJapascriptライブラリ」の“便利さ”を感じて頂ければ、と思います。

jQuery

【公式サイト】
・「jQuery」(英語)

【特徴】
Javascriptライブラリ(Javascriptの塊)の一つ。
Webページ内の要素(文字とか段落とか画像とか)に対して、比較的簡単なJavascriptのコードを記述するだけで、様々な効果を与えることができます。

【ダウンロード】
上記公式サイトにて、「Download(jQuery);」ボタンをクリックすると、最新版をダウンロードする画面に遷移するので、下記のファイルをダウンロードして下さい。
 ・jQuery-X.X.X.min.js

【コード例】
≪sample.html≫

≪sample.css≫

【参照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≫

【参照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」の「スライドショー」機能を題材に、
より実用に向けたカスタマイズ方法についてご紹介できれば、と思います。