トップページ⇒Mamの覚書Q&A検索⇒WEB(jQueryMobile)⇒Q&A
jQueryMobileのリストビューの基本について
以下参照。<br>
<br>
http://mam-mam.net/jqm_sample/list.html
リストビュー(絞込み、自動ディバイダー付き)
<!-- data-inset:周りに余白ができる data-autodividers自動区切り設定 -->
<ul data-role="listview" data-filter="true" data-filter-reveal="false"
data-filter-placeholder="絞込み" data-inset="true" data-autodividers="true"
data-split-icon="arrow-u">
<li>
<a href="">
<!-- サムネイルを入れる事ができるが80×80pxに幅基準で縮小される -->
<img src="img/w.gif" />
<h3>あいうえお</h3>
<p>あ行</p>
<span class="ui-li-count">1</span> <!-- カウントバブル -->
<p class="ui-li-aside">右側の小さい文字(付加情報)</p>
<a href="" data-icon="check">2個めのリンク(右側にボタンのみ表示)</a>
</a>
</li>
<li data-icon="grid">
<a href="">
<!-- サムネイルを入れる事ができるが80×80pxに幅基準で縮小される -->
<img src="img/w.gif" />
<h3>あいう</h3>
<p>あ行</p>
</a>
</li>
<li>
<a href="">
<!-- アイコンを入れる事ができるが16×16pxに幅基準で縮小される -->
<img src="img/w.gif" class="ui-li-icon" />
<h3>かきくけこ</h3>
<p>か行</p>
<span class="ui-li-count">2</span> <!-- カウントバブル -->
<p class="ui-li-aside">右側の小さい文字(付加情報)</p>
<a href="" data-icon="check">2個めのリンク(右側にボタンのみ表示)</a>
</a>
</li>
<li>
<a href="">
<!-- アイコンを入れる事ができるが16×16pxに幅基準で縮小される -->
<img src="img/w.gif" class="ui-li-icon" />
<h3>かきく</h3>
<p>か行</p>
<span class="ui-li-count">10</span> <!-- カウントバブル -->
<p class="ui-li-aside">右側の小さい文字(付加情報)</p>
<a href="" data-icon="check">2個めのリンク(右側にボタンのみ表示)</a>
</a>
</li>
</ul>