タブ切り替え
使用方法・制限事項
-
要素の構造についてはTwitterBootstrapのTabbableを基本とします。
(参考→http://twitter.github.com/bootstrap/components.html#navs以下の「Tabbable nav」)
CSSについても、TwitterBootstrapの使用を基本としますが、独自に作成することも可能です。
TwitterBootstrapを使用する場合は、以下のファイルを読み込んでください。
- res/lib/bootstrap/css/bootstrap.min.css
-
スクリプトについてはTwitterBootstrapを使用しません。id属性が必須であり、これを回避するためです。
TwitterBootstrapではタブメニュー要素下のa要素href属性と、コンテンツ要素のid属性を関連付けますが、ここでは両者にdata-tab-name属性を設定して関連付けます。
-
以下はスクリプトの処理上必要となる設定です。TwitterBootstrapで必要となるものは適宜設定してください。
- ルート要素にtabbableクラスを設定します。
-
各コンテンツのブロック要素を配置し、tab-paneクラスを設定します。このうち、初期表示するものにactiveクラスを設定します。
また、data-tab-name属性にルート要素内で一意となる値を設定します。
-
タブメニュー用の要素を配置し、nav-tabsクラスを設定します。
直下の各要素が各タブになります。初期選択されるものにactiveクラスを設定します。
その下にa要素を配置し、data-tab-name属性に対応するコンテンツの値を設定します。href属性は"#"を設定してください。