タイトルとコンテンツ 指定方法は3種類ありますが、基本はアコーディオンを指定したブロックの子要素の偶数番号がタイトルになり、その直後の要素がコンテンツになります。Content panels must be the sibling immediately after their associated headers.但し例外があって、子要素の中に LI 要素が並ぶ場合( 通常親要素は UL )は、LI 内の最初の子要素がタイトルになり、それに続く要素がコンテンツになります。( セレクタ : > li > :first-child ) もう一つ、header オプションでタイトルとする要素を指定する事ができます。これは、無条件に偶数をタイトルにすると、非表示要素が対象になってしまいます。そのような事を避ける為に header オプションがあります コンテンツはブロック要素で heightStyle というオプション( 規定値は auto )があり、fill、auto、content が指定できます。いずれも、正しく表示する為にコンテンツの高さが必要になってくるので、コンテンツ部分はブロック要素で指定します。 注意するのは、fill の場合で、アコーディオンを指定した親要素の高さいっぱいに広がるようになります。レイアウトが変化しては困る場合に親要素の指定は有用ですが、その為に親要素を正しくレイアウトする必要があります。 auto は、複数コンテンツがある場合、そのコンテンツの中で一番高さが大きいものにあわせられます。順に内容を読んで行くようなコンテンツに適しています。 content は、コンテンツ毎の高さで表示されるので、オプション表示等に向いています
コンテンツパネルは、ヘッダの直後の兄弟要素でなければなりません。
コンテンツは高さのコントロールがあるので、
ブロック要素が望ましいようです
ブロック要素が望ましいようです
親要素の高さいっぱいに広がります
header オプションで要素を指定も可能です
active オプションで最初に開くコンテンツを指定できます
この内容を localStorage に保存しておけば、次回に開く処理を実装できます
heightStyle が auto の場合は
コンテンツの中で
一番大きな高さにあわせます
一番大きな高さにあわせます
このアコーディオンのヘッダは
偶数要素が使われています
ヘッダを強制的に指定しています
コンテンツはその次のみで、複数が続くと、2つ目以降は正しく表示されません
heightStyle が content の場合は
コンテンツのの
高さにあわせます
高さにあわせます
UI の基本スタイルを変更したい場合は
新しいクラスを定義し、追加して上書きします
▼ ソースコードサンプル
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script>
$(function(){
$( ".wrap" ).css( { height: "250px", border: "solid 2px #000", "margin-bottom": "20px" } );
$( "#accordion1" ).accordion({
heightStyle: "fill"
});
$( "#accordion2" ).accordion({
heightStyle: "auto",
active: 1
});
$( "#accordion3" ).accordion({
heightStyle: "content",
header: "h3"
})
.addClass( "accordion3_style" );
});
</script>
<style type="text/css">
.accordion3_style {
font-size: 14px;
font-family: "メイリオ","ＭＳ ゴシック";
}
</style>
<div class="wrap">
<div id="accordion1">
<li><span>最初の要素が li の場合、li の child の最初の要素がタイトルとなります</span><div>コンテンツは高さのコントロールがあるので、<br>ブロック要素が望ましいようです</div></li>
<li><span>heightStyle が fill の場合は</span><div>親要素の高さいっぱいに広がります</div></li>
<li><span>ヘッダは通常は偶数で、コンテンツは奇数です</span><div>header オプションで要素を指定も可能です</div></li>
</div>
</div>
<div class="wrap">
<div id="accordion2">
<span>active オプションで最初に開くコンテンツを指定できます</span>
<div>この内容を localStorage に保存しておけば、次回に開く処理を実装できます</div>
<b>heightStyle が auto の場合は</b>
<div>コンテンツの中で<br>一番大きな高さにあわせます</div>
<div>このアコーディオンのヘッダは</div>
<div>偶数要素が使われています</div>
</div>
</div>
<div class="wrap">
<div id="accordion3">
<h3>ヘッダを強制的に指定しています</h3>
<div>コンテンツはその次のみで、複数が続くと、2つ目以降は正しく表示されません</div>
<h3>heightStyle が content の場合は</h3>
<div>コンテンツのの<br>高さにあわせます</div>
<h3>UI の基本スタイルを変更したい場合は</h3>
<div>新しいクラスを定義し、追加して上書きします</div>
</div>
</div>
|
|
【jQuery UIの最新記事】
- Google がホスティングしている jQuery UI の CSS のテーマのチェックをする jQuery UI ボタン
- jQuery UI のタブを使用時に、前回開いたタブを localStorage に保存して、次回の表示に使用する
- jQuery UI の Autocomplete Combobox をさらにカスタマイズして、『Form の送信で使用する入力可能なコンボボックス』にする
- jQuery UI の Spinner のボタン部分だけを利用して、マウスでクリックしたままでイベントが継続する増減ボタンを作成する
- jQuery : table の行をクリックして、jQuery UI のダイアログを表示し、行データをダイアログ内で変更して table の列にデータを戻す
- jQuery UI の datepicker の基本オプションとダイアログ(datepicker)の利用
- jQuery UI(tabs) の内部コードを書き換えて、タブ上でのキーボード処理をキャンセルする
- jQuery UI の slider と Google のホスティング
- jQuery UI の タブの表示切替でのアニメーション方法
