jQuery Mobile 列表内容

jQuery Mobile List Thumbnail

Para sa mga image na mas malaki sa 16x16px, magdagdag ng elemento ng <img> sa link.

Automatically, ang jQuery Mobile ay magpapaayos ng image sa 80x80px:

Mga Halimbawa

<ul data-role="listview">
  <li><a href="#"><img src="chrome.png"></a></li>
</ul>

亲自试一试

Gumamit ng standard na HTML upang punuan ang listahan na may impormasyon:

Mga Halimbawa

<ul data-role="listview">
  <li>
    <a href="#">
    <img src="chrome.png">
    <h2>Google Chrome</h2>
    <p>Google Chrome, ang libreng malayang pinagmulang web browser. Inilabas noong 2008.</p>
    </a>
  </li>
</ul>

亲自试一试

jQuery Mobile List Icon

Kung gusto mong magdagdag ng ikon na 16x16px sa iyong listahan, magdagdag ng class "ui-li-icon" sa elemento ng <img>.

Mga Halimbawa

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

亲自试一试

Split Button

Kung gusto mong gumawa ng split list na may vertical separator, ilagay ang dalawang link sa loob ng elemento ng <li>.

Automatically, ang jQuery Mobile ay magadagdag ng estilo ng blue arrow icon sa ikalawang link, ang teksto ng link (kung mayroon) ay ipapakita kapag inililipat ng user ang icon:

Mga Halimbawa

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#">Some Text</a>
  </li>
</ul>

亲自试一试

Sa pamamagitan ng pagdagdag ng pahina at ang popup, mas malakas ang ginagamit ng link:

Mga Halimbawa

<ul data-role="listview">
  <li>
    <a href="#"><img src="chrome.png"></a>
    <a href="#download" data-rel="dialog">Download Browser</a>
  </li>
</ul>

亲自试一试

Bubble ng bilang

Ang bubble ng bilang ay ginagamit upang ipakita ang bilang na kaugnay sa item ng listahan, halimbawa ang mga mensahe sa inbox ng email:

Kung gusto mong magdagdag ng bubble ng bilang, gamitin ang inline element, tulad ng <span>, at itakda ang class "ui-li-count" at magdagdag ng numero:

Mga Halimbawa

<ul data-role="listview">
  <li><a href="#">Inbox<span class="ui-li-count">335</span></a></li>
  <li><a href="#">Sent<span class="ui-li-count">123</span></a></li>
  <li><a href="#">Trash<span class="ui-li-count">7</span></a></li>
</ul>

亲自试一试

注释：如需在计数泡泡中显示正确的数字，就必须进行程序化更新。我们将在下一章中讲解。

更多实例

更改列表项的默认链接图标
如何为列表项设置不同的链接图标（右箭头是默认的）。
可折叠列表
如何创建隐藏和显示内容的列表。
更多内容格式
如何制作日历。