jQuery Mobile 列表內容

jQuery Mobile 列表縮略圖

對於大於 16x16px 的圖像，請在連接中添加 <img> 元素。

jQuery Mobile 將自動把圖像調整至 80x80px：

實例:

<ul data-role="listview">

  <li><a href="#"></a></li><img src="chrome.png">

</ul>

請使用標準 HTML 來填充帶有信息的列表：

實例:

<ul data-role="listview">

  <li>

    <a href="#">

    <img src="chrome.png">

    <h2>Google Chrome</h2>

    <p>Google Chrome免費的開源web瀏覽器。發佈於2008年。</p>

    </a>

  </li>

</ul>

　　

jQuery Mobile 列表圖標

如需向您的列表添加 16x16px 的圖標，請向 <img> 元素添加 class="ui-li-icon" 屬性：

實例:

<li><a href="#"><img src="us.png" alt="USA" >USA</a></li>class="ui-li-icon"

　

拆分按鈕

如需建立帶有垂直分隔欄的拆分列表，請在 <li> 元素內放置兩個連接。

jQuery Mobile 會自動爲第二個連接添加藍色箭頭圖標的樣式，連接中的文本（若有）將在用戶劃過該圖標時顯示：

實例:

<ul data-role="listview">

  <li>

    <a href="#"><img src="chrome.png"></a>

    <a href="#">Some Text</a>

  </li>

</ul>

　　

　

經過添加頁面和對話框，可以使連接的功能更強：

實例:

<ul data-role="listview">
　　<li>
　　　　<a href="#"><img src="chrome.png"></a>
　　　　<a href="#download"data-rel="dialog">下載瀏覽器</a>
　　</li>
</ul>

　　

彈出對話框：

計數泡沫

計數泡沫用於顯示與列表項相關的數目，例如郵箱中的消息：

如需添加計數泡沫，請使用行內元素，好比 <span>，設置 class "ui-li-count" 屬性並添加數字：

實例：

<ul data-role="listview">

  <li><a href="#">Inbox</a></li><span class="ui-li-count">335</span>

  <li><a href="#">Sent</a></li><span class="ui-li-count">123</span>

  <li><a href="#">Trash</a></li><span class="ui-li-count">7</span>

</ul>

　　

註釋：如需在計數泡泡中顯示正確的數字，就必須進行程序化更新。

更多示例：

一、更改列表項的默認連接圖標

如何爲列表項設置不一樣的連接圖標（右箭頭是默認的）。

<div data-role="page" id="pageone">

  <div data-role="content">

    <h2>列表圖標：</h2>

    <ul data-role="listview" data-inset="true">   

      <li><a href="#">默認是右箭頭</a></li>

      <li data-icon="plus"><a href="#">data-icon="plus"</a></li>

      <li data-icon="minus"><a href="#">data-icon="minus"</a></li>

      <li data-icon="delete"><a href="#">data-icon="delete"</a></li>

      <li data-icon="info"><a href="#">data-icon="info"</a></li>  

      <li data-icon="false"><a href="#">data-icon="false"</a></li>

    </ul>

  </div>

</div> 

二、可摺疊列表

如何建立隱藏和顯示內容的列表。

<div data-role="page" id="pageone">

  <div data-role="header">

    <h1>可摺疊列表</h1>

  </div>

 

  <div data-role="content">

    <div data-role="collapsible">

    <h4>A</h4>

    <ul data-role="listview">

      <li><a href="#">Adam</a></li>

      <li><a href="#">Angela</a></li>

    </ul>

  </div>

 

    <div data-role="collapsible">

    <h4>B</h4>

    <ul data-role="listview">

       <li><a href="#">Bill</a></li>

       <li><a href="#">Bob</a></li>

    </ul>

    </div>

 

    <div data-role="collapsible">

    <h4>C</h4>

    <ul data-role="listview">

      <li><a href="#">Calvin</a></li>

      <li><a href="#">Cameron</a></li>

      <li><a href="#">Christina</a></li>

    </ul>

    </div>

  </div>

 

  <div data-role="footer">

    <h1>此處是頁腳文本</h1>

  </div>

</div> 

　　

三、更多內容格式

如何製做日曆。

 

<div data-role="page" id="pageone">

  <div data-role="header">

    <h1>頁眉文本</h1>

  </div>

 

  <div data-role="content">

    <h2>個人日曆</h2>

    <ul data-role="listview" data-inset="true">

      <li data-role="list-divider">星期三, 1 月 2 日, 2013 <span class="ui-li-count">2</span></li>  

      <li><a href="#">  

        <h2>醫生</h2>

        <p><b>To Peter Griffin</b></p>

        <p>Well, Mr. Griffin, I've looked into physical results.</p>

        <p>Ah, Mr. Griffin, I'm not quite sure how to say this. Kim Bassinger? Bass singer? Bassinger?</p>

        <p>But now, onto the cancer</p>

        <p>You are a Cancer, right? You were born in July? Now onto these test results.</p>

        <p class="ui-li-aside">Re: Appointment</p></a>

      </li>

      <li><a href="#">

        <h2>Glen Quagmire</h2>

        <p>Remember me this weekend!</p>

        <br>

        <p>- giggity giggity goo</p>

        <p class="ui-li-aside">Re: Camping</p></a>

      </li>

      <li data-role="list-divider">週二, 1 月 1 日, 2013 <span class="ui-li-count">1</span></li>  

      <li><a href="#">  

        <h2>Louis</h2>

        <p><b>Happy Girl!</b></p>

        <p>Thank you so much!!</p>

        <p class="ui-li-aside">Re: Christmas Gifts</p></a>

      </li>

    </ul>

  </div>

 

 <div data-role="footer">

    <h1>頁腳文本</h1>

  </div>

</div>