連載
» 2010年01月07日 00時00分 公開

jQueryのアコーディオン効果の使い方・作り方CSSの書き方も分かるjQueryプラグイン実践活用法(2)(1/3 ページ)

jQueryと、そのプラグインの使い方を、UI効果(エフェクト)のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。

[葛西秋雄,@IT]

コンテンツを展開/折りたたみするアコーディオン効果

 連載第1回の「jQuery、プラグイン、jQuery UI、Web経由のCDNとは」では、本連載を読むための基礎知識として、JavaScriptフレームワーク/ライブラリ「jQuery」「jQuery UI」について解説し、jQueryの拡張機能であるプラグインを作成する方法についても説明しました。jQuery、jQuery UIのプラグインを使用するには、jQuery 1.3.2とjQuery UI 1.7.2のライブラリが必要ですが、本連載ではグーグルかマイクロソフトのCDN(Content Delivery Network)を利用して、リモートサイトから直接取り込みます。

 今回からは、jQueryのプラグインを利用してさまざまなUI効果(エフェクト)を得る方法やサンプルを紹介していきます。また、プラグインを使用せずに、jQueryのAPIを使用して自作のエフェクトを作成する方法についても解説します。

 その初めとして本稿では、jQuery UIの「Accordion」プラグインを利用してアコーディオンを表示するサンプルを紹介します。Accordionプラグインを利用すると、コンテンツを展開/折りたたみできるので、少ない画面領域に多くのコンテンツが表示できます。後半には、プラグインを使用しないでjQueryのAPIを使用して自作のアコーディオンを作成する方法も解説します。

jQuery UIのAccordionプラグインを使ってみる

 jQuery UIには、AccordionやTabs、Sliderなどのウィジェットがサポートされていますが、ここでは「Accordion」プラグインを使用して、コンテンツを展開したり折りたたみできるようにします。

ステップ1:CSSとライブラリをCDN経由で組み込む

 お好みの開発ツールまたはエディタを起動して、新規ファイルを作成したら、要素に<link>要素と<script>要素を追加して、jQuery UIのテーマとjQuery 1.3.2、jQuery UI 1.7.2のライブラリを組み込みます。

 jQuery UIのテーマは、2009年12月の本稿執筆時点で24種類用意されています。ここでは、「ui-darkness」のテーマを使用します。後ほど、jQuery UIのテーマをランタイム時にダイナミックに書き換える機能も追加します。

<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />……【1】
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>……【2】
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>……【3】
</head>
  1. jQuery UIのテーマ(ui-darkness)をCDN経由で取り込む
  2. jQuery 1.3.2のライブラリをCDN経由で取り込む
  3. jQuery UI 1.7.2のライブラリをCDN経由で取り込む

ステップ2:XHTMLで骨格を定義する

 <body>要素に<div#accordion>要素を追加したら、<h3>要素と<div>要素を入れ子にします。<h3>要素には、<a>要素を追加して見出しを定義し、<div>要素には、<p>要素を追加してテキストを定義します。

<div id="accordion" style=" width: 400px;">
  <h3><a href="#">見出し#1</a></h3>
  <div>
    <p>
      Lorem ipsum ius an duis discere democritum, sit at suas persius iudicabit. 
……
     </p>
  </div>
</div>
ALT 図1 ページに「見出し#1」とダミーテキストを配置したところ(Firefoxのアドオン「Firebug」で確認)

 ここでは、「Loremu ipsum」(※コラム参照)と呼ばれるダミーテキストを使用しています。同様の手順で4個の見出しを定義します。

コラム 「Loremu ipsumって何? どう読むの?」

Loremu ipsumは「ロレム・イプサム」と読みます。出版やWebデザインなどの分野でダミーテキストとして利用されています。Loremu ipsumのサイトから、ダミーテキストを自動生成できます。プロトタイプやサンプル、デモなどを作る際に便利です。


 次ページでは引き続き、「Accordion」プラグインの使い方を説明し、オプションを使ったカスタマイズの仕方や、アコーディオン効果を自作する方法も解説します。そのまま実行できるサンプルもあるので、ぜひお試しください。

       1|2|3 次のページへ

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。