SQLの窓

2014年11月24日


jQuery UI の Accordion Widget(アコーディオン)で、タイトルとコンテンツの指定方法

タイトルとコンテンツ

指定方法は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 は、コンテンツ毎の高さで表示されるので、オプション表示等に向いています
  • 最初の要素が li の場合、li の child の最初の要素がタイトルとなります
    コンテンツは高さのコントロールがあるので、
    ブロック要素が望ましいようです
  • heightStyle が fill の場合は
    親要素の高さいっぱいに広がります
  • ヘッダは通常は偶数で、コンテンツは奇数です
    header オプションで要素を指定も可能です
  • ▲ いっぱいいっぱいまで使用しているので、親要素の bottom と重なっています
    active オプションで最初に開くコンテンツを指定できます
    この内容を localStorage に保存しておけば、次回に開く処理を実装できます
    heightStyle が auto の場合は
    コンテンツの中で
    一番大きな高さにあわせます
    このアコーディオンのヘッダは
    偶数要素が使われています
    ▼ ヘッダ部分の輪郭のスタイルが違うのは、このブログ内の H3 に対するスタイルです

    ヘッダを強制的に指定しています

    コンテンツはその次のみで、複数が続くと、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: "メイリオ","MS ゴシック";
    }
    </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>
    
    
    
    
    


    posted by lightbox at 2014-11-24 12:51 | jQuery UI | このブログの読者になる | 更新情報をチェックする
    container 終わり



    フリーフォントで簡単ロゴ作成
    フリーフォントでボタン素材作成
    フリーフォントで吹き出し画像作成
    フリーフォントではんこ画像作成
    ほぼ自由に利用できるフリーフォント
    フリーフォントの書体見本とサンプル
    画像を大きく見る為のウインドウを開くボタンの作成

    CSS ドロップシャドウの参考デモ
    イラストAC
    ぱくたそ
    写真素材 足成
    フリーフォント一覧
    utf8 文字ツール
    右サイド 終わり
    base 終わり