jQueryプログラミング1

jQueryプログラミング1 †

jQueryを使ったプログラミング例です。
FaceBox?というjQueryプラグインを使用します。
FaceBox?は画像をモーダル表示するプラグインです。(http://defunkt.github.com/facebox/ )
リンクをクリックすると画像が拡大表示されるプログラムを作成します。

準備 †

以下のウィジェットを同一ページ上に配置します。
「デフォルトコンテンツ」ウィジェットはHTMLを画面に埋め込むために使用しているだけなので、
HTMLが作成できるウィジェットであれば他のウィジェットを使用しても問題ありません。

• デフォルトコンテンツ
  jQueryが使用するデータをHTMLで作成します。jQueryの処理対象とするタグを識別するために属性やID等を振り付けます。
  このデータはjQueryで処理されなければ単なるHTMLタグです。
• jQueryプラグイン追加
  必要なjQueryプラグインを指定します。また、上記で設定したタグに対してjQuery処理を行うためのプログラムを記述します。

コンテンツ作成 †

「デフォルトコンテンツ」ウィジェットでコンテンツを作成します。
Aタグでリンクを作成し、Aタグのリンク先(href)に画像のURLを設定します。
リンク先に設定した画像がモーダル形式で画面に表示されることになります。
FaceBox?で処理する対象は、タグの属性に「rel="facebox"」の属性を付けます。以下のようになります。

<a href="logo.png" rel="facebox">sample image1</a>
<a href="stairs.jpg" rel="facebox"><img src="hello.gif" /></a>

プラグイン選択 †

「jQueryプラグイン追加」ウィジェットの設定画面で「jquery.facebox」の項目にチェックを入れます。

プログラム作成 †

「jQueryプラグイン追加」ウィジェットの設定画面で JavaScript?でプログラムを記述します。

jQuery(document).ready(function($){
    $('a[rel*=facebox]').facebox();
});

「jQuery(document).ready(function($)」の部分はHTMLがブラウザに取得されてすぐ1回だけ「{}」内の処理を行うという意味です。
同じHTML上に同じ記述が複数ある場合は上から順番に処理されます。
「{}」の内容の記述でタグの加工が実行されます。
「'a[rel*=facebox]'」という記述がどのタグを加工対象とするかの指定です。
この場合は「a」タグで「rel=facebox」の属性があるタグすべてを処理対象とし、FaceBox?で処理されるという意味です。

実行 †

表示した画面上のリンクをクリックし、画像がモーダル表示されればOKです。

応用 †

画像の表示の代わりにDIVタグで括った領域をモーダル表示することも可能なのでトライしてみてください。
「href」にモーダル表示する領域タグのIDを設定します。

<a href="#info" rel="facebox">text</a>
<div id="info" style="display:none;">
<h2>Hello Image</h2>
<img src="hello.gif" />
</div>

その他 †

• 参考書籍