Mam's WebSite
建築CGパース住宅CGパース

Mamの覚書Q&A検索

トップページMamの覚書Q&A検索WEB(jQueryMobile)⇒Q&A


大項目:「 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>


Mam's WebSite