「駑馬十駕」 IT系情報を中心に調べた事をコツコツ綴っています。

アコーディオンメニュー表示手順

  1. jQuery UIのダウンロードページにアクセスします。
    http://jqueryui.com/download/
  2. デフォルトでは「Toggle All」にチェックが付いているので、チェックを外してタブ表示に必要な「Accordion」をチェックして「Download」ボタンを押下します。(「Accordion」をチェックすると「Core」と「Widget」も同時にチェックされます。)
    ※デザインを変更したい場合はページ下にある「Theme」でタブのデザインも選択可能です。今回は「UI lightness」を選択しています。
    jQuery UI Accordion
    jQuery UI Tabs 手順2
  3. ダウンロードしたファイルの内、アコーディオン表示に必要となるのは以下のファイルとなります。
    分類ファイル名 or フォルダ名パス備考
    jsjquery-1.8.3.js\jquery-ui-1.9.2.custom\jsjQuery本体
    jsjquery-ui-1.9.2.custom.min.jsjquery-ui-1.10.2.custom\jquery-ui-1.10.2.custom\development-bundle\ui\minified
    cssjquery-ui-1.9.2.custom.min.css\jquery-ui-1.9.2.custom\css\custom-themejQuery UI用のスタイルシート
    画像custom-theme
    ※選択したテーマによりフォルダ名は変わります
    \jquery-ui-1.9.2.custom\css\custom-theme\images
  4. HTMLファイル
  5. jQueryファイル
    jQueryはaccordionメソッドを実行するだけで終了です。

実行サンプル:デザイン「UI lightness」

メニュー1

メニュー1の表示内容を記述します。

メニュー2

メニュー2の表示内容を記述します。

メニュー3

メニュー3の表示内容を記述します。

jQuery UI「アコーディオンメニュー」のプロパティ

オプションデフォルト値説明
headerメニューバーになる要素を指定します
collapsiblefalsetrue:表示しているアコーディオンの文章を、メニューバーのクリックで非表示にできます
animated追加で別のアニメーションを付与出来ます
autoHeighttruetrue:アコーディオン内の文章の高さで一番大きい高さに全て合わせます
※falseを指定しても各パネルのサイズが自動調整されない場合は「heightStyle:'content'」を指定すると上手く調整される場合があります
false:枠内のそれぞれの文章の高さにあわせます。
active最初に表示させる文章を指定します

Ads by Google

コメントを残す

メールアドレスが公開されることはありません。