jQueryMobileのリストに見出しを付ける
jQuery Mobileを使用してリストに見出しを付けてスマホ向けに表示するにはul要素にdata-role="listview"属性を追加します。
次に見出しリストのli要素にdata-role="list-divider"属性を追加します。

<div class="content" data-role="content">
  <ul data-role="listview">
    <li data-role="list-divider">見出し1</li>
    <li>サンプルリスト1</li>
    <li>サンプルリスト2</li>
  </ul>
</div>


リストのDEMOです。

jQueryMobileのリストの右側にフォーム部品(セレクトボックス)を付ける
リストの見出し部分にフォーム部品を表示したい場合、そのままli要素内にselect要素を記述すると表示することができます。
この時、select要素にdata-inline="true"属性を指定します。select要素の横幅はwidthでピクセル指定すると固定幅にすることができました。

<div class="content" data-role="content">
  <ul data-role="listview">
    <li data-role="list-divider">見出し1
      <select data-inline="true">
        <option>test</option><option>testtest</option>
      </select></li>
    <li>サンプルリスト1</li>
    <li>サンプルリスト2</li>
  </ul>
</div>


リストに入力部品をインラインで表示するDEMOです。

さらに、普通のセレクトボックスではなくアイコンなどでセレクトボックスを表示することもできます。
select要素にdata-iconpos="notext"を指定するだけです。

<div class="content" data-role="content">
  <ul data-role="listview">
    <li data-role="list-divider">見出し1
      <select data-inline="true" data-iconpos="notext">
        <option>test</option><option>testtest</option>
      </select></li>
    <li>サンプルリスト1</li>
    <li>サンプルリスト2</li>
  </ul>
</div>


リストに入力部品をインラインで、しかもアイコンで表示するDEMOです。

jQueryMobileの見出しリストにセレクトボックスを動的に追加する
list-dividerにセレクトボックスを動的に追加します。

<script type="text/javascript">
$(function(){
  $(':button').click(function(){
    var $select = $("<select>");
    $select.attr("data-inline","true");
    $select.attr("data-iconpos","notext");
    $select.attr("id","select");
    $select.append("<option>test</option><option>testtest</option>");

    $('#divider').append($select);
    $select.selectmenu().selectmenu('refresh');
  });
});
</script>

<div class="content" data-role="content">
  <button>ボタン</button>
  <br>
  <ul data-role="listview">
    <li data-role="list-divider" id="divider"><span>見出し1</span></li>
    <li>サンプルリスト1</li>
    <li>サンプルリスト2</li>
  </ul>
</div>
なぜか、$('#select').selectmenu('refresh');だとエラーとなりました。
$('#select').selectmenu().selectmenu('refresh');だとうまく動作しました。
動的にセレクトボックスを追加しrefreshするDEMOです。

Back to top

Information