jQueryMobileのアコーディオンにリストを入れる
jQuery Mobileのアコーディオンとリストを併用して複数リストをアコーディオン内に表示します。
アコーディオンのdiv要素にdata-role="collapsible"を追加し、その要素内にul要素(data-role="listview")を追加します。
この時、タイトルとして<hx>~</hx>タグは必須です。

<div data-role="content">
  <div data-role="collapsible">
    <h4>リスト</h4>
    <ul data-role="listview">
      <li>サンプルリスト1</li>
      <li>サンプルリスト2</li>
      <li>サンプルリスト3</li>
    </ul>
  </div> 
</div>


としてアコーディオン(開閉式)を表示することができます。
アコーディオンとリストを併用したDEMOです。

アコーディオンのリスト部分にカウントバブルを表示する
アコーディオンのリスト部分にカウントバブルを表示するには<hx>~<hx>タグ内にカウントバブルを挿入することによって表示することができます。

<div data-role="content">
  <div data-role="collapsible-set">
    <div data-role="collapsible">
      <h4>リスト</h4>
      <ul data-role="listview">
        <li>サンプルリスト1</li>
        <li>サンプルリスト2</li>
        <li>サンプルリスト3</li>
      </ul>
    </div>
    <div data-role="collapsible">
      <h4>リスト<span  class="ui-li-count">3</span></h4>
      <ul data-role="listview">
        <li>サンプルリスト1</li>
        <li>サンプルリスト2</li>
        <li>サンプルリスト3</li>
      </ul>
    </div>
  </div>
</div>
アコーディオンのリスト部分にカウントバブルを表示しているのDEMOです。

アコーディオンのリスト部分のカウントバブルの色を変更する
リスト部分にカウントバブルを表示する場合はthemeで変更できたが、リストのヘッダー部分を変更する場合はid属性を指定してページ読み込み時に指定することができます。

<script type="javascript">
$(function(){
  $("#aaa").css("background-color","red");
});
</script>

// 中略

<div data-role="content">
  <div data-role="collapsible-set">
    <div data-role="collapsible">
      <h4>リスト</h4>
      <ul data-role="listview">
        <li>サンプルリスト1</li>
        <li>サンプルリスト2</li>
        <li>サンプルリスト3</li>
      </ul>
    </div>
    <div data-role="collapsible">
      <h4>リスト<span id="aaa" class="ui-li-count">3</span></h4>
      <ul data-role="listview">
        <li>サンプルリスト1</li>
        <li>サンプルリスト2</li>
        <li>サンプルリスト3</li>
      </ul>
    </div>
  </div>
</div>


アコーディオンのリストのヘッダー部分のカウントバブルの色を変更しているDEMOです。
上記は背景を変えますが、文字色を変更したい場合はbackground-colorをcolorにします。

<script type="javascript">
$(function(){
  $("#aaa").css("color","red");
});
</script>

// 中略

<div data-role="content">
  <div data-role="collapsible-set">
    <div data-role="collapsible">
      <h4>リスト</h4>
      <ul data-role="listview">
        <li>サンプルリスト1</li>
        <li>サンプルリスト2</li>
        <li>サンプルリスト3</li>
      </ul>
    </div>
    <div data-role="collapsible">
      <h4>リスト<span id="aaa" class="ui-li-count">3</span></h4>
      <ul data-role="listview">
        <li>サンプルリスト1</li>
        <li>サンプルリスト2</li>
        <li>サンプルリスト3</li>
      </ul>
    </div>
  </div>
</div>
アコーディオンのリストのヘッダー部分のカウントバブルの文字色を変更しているDEMOです。

Back to top

Information