HOME > ライブラリ > Simple Javascript Accordions
Simple Javascript Accordions
アコーディオンパネルやタブパネルが簡単に♪
下記のような動作が実現できます。HTMLとCSSを変更すればタブ形式や横ナビゲーションにも利用できます。
特徴としては他のライブラリに依存せず単体で動作し、本体も軽量です。またクロスブラウザ仕様となってます。(確認したのはWIN:IE7/IE6/Fx2.0.0.8/NS7.1)
使いやすいと評判のspryのやつより個人的には簡単で使いやすい気がします。
見出し1
コンテンツ1
見出し2
コンテンツ2
見出し3
コンテンツ3
使い方
HTML
- <html>
- <head>
- <script type="text/javascript" src="accordian.pack.js"></script>
- </head>
- <body onload="new Accordian('container of your accordion',speed,'highlighted accordion class name');">
- </body>
- </html>
と本家にはこんな感じで書いてありますがbodyタグに書くのが嫌な場合
JAVASCRIPT
- <script language="javascript" type="text/javascript">
- window.onload = function(){
- new Accordian('container of your accordion',speed,'highlighted accordion class name');
- }
- </script>
と書いても問題ないでしょう。各設定は下記のようになります。
new Accordian('アコーディオン化するエリアのid@string’,オープンするスピード@int,’ハイライト表示するclass名@string’)
- ちなみにスピードは数値が大きくなればなるほどスピードが遅ります。
下記のように設定した場合
JAVASCRIPT
- new Accordian('typeBasic',5,'header_highlight');
最低限のHTMLは下記のようになります。
HTML
- <div id="typeBasic">
- <div id="c1-header" class="accordion_headings header_highlight">見出し1</div>
- <div id="c1-content">コンテンツ1</div>
- <div id="c2-header" class="accordion_headings">見出し2</div>
- <div id="c2-content">コンテンツ2</div>
- <div id="c3-header" class="accordion_headings">見出し3</div>
- <div id="c3-content">コンテンツ3</div>
- </div>
見出しのid、○○-headerと○○-contentで囲んだ部分が対応します。○○をキーとしてつなげているって感じなので○○は同じものを設定しましょう。
また○○-contentにCSSを設定すると動作に影響が出るので、余白やマージン設定にはdivを追加したほうが良いでしょう。
header_highlight は最初にオープンしておきたいコンテンツの見出しにつけると良いでしょう。
HTML
- <div id="c1-content">
- <div class="accordion_child">
- コンテンツ1
- </div>
- </div>
問題点は見出しもdivでマークアップしなくちゃならないとこでしょうか。
見出し1
ちょっと冗長な気がしますね。
JavaScriptクックブック
作者:Shelley Powers | 価格:￥ 3,990
ライブラリ
カテゴリ
検索
Linuxを覚えると捗る
- 改訂 新Linux/UNIX入門
- 作者:林 晴比古 | 価格:￥ 3,990
- 入門bash 第3版
- 作者:Bill Rosenblatt | 価格:￥ 2,940
はじめてのCentOS5
- Vimテクニックバイブル ～作業効率をカイゼンする150の技
- 作者:Vimサポーターズ | 価格:￥ 3,129
- Linuxの教科書 改訂版 （マイコミムック） (MYCOMムック)
- 作者:小林 峰子 | 価格:￥ 1,890