 |
Mam's WebSite |
 |
Mamの覚書Ｑ＆Ａ検索
トップページ⇒Mamの覚書Ｑ＆Ａ検索⇒WEB(jQueryMobile)⇒Ｑ＆Ａ
大項目:「 WEB 」 － 中項目：「 jQueryMobile 」
「 jQueryMobileのリストビューの基本 」
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>