[jQuery mobile]listviewを作成

前回、動的にlistviewを作成する方法について書きましたが、そもそもlistviewの作成方法を書いたなかったので、超簡単にまとめる。

<div data-role="page">
    <div data-role="header">...</div>
    <div role="main" class="ui-content">
      <ul data-role="listview">
        <li>hoge</li>
        <li>hoge</li>
        <li>hoge</li>
      </ul>
    </div>
    <div data-role="footer">...</div>
</div>

上のようにコードした場合、実行結果は、下のように表示されます。

<div data-role="page">
    <div data-role="header">...</div>
    <div role="main" class="ui-content">
      <ul data-role="listview" data-inset="true">
        <li>hoge</li>
        <li>hoge</li>
        <li>hoge</li>
      </ul>
    </div>
    <div data-role="footer">...</div>
</div>

一方でdata-inset属性をtrueに設定してあげると表示結果は下のようになる。

コンテンツによって使い分ければいいかなと。

参考
Listview