jQuery Mobile 列表視圖

jQuery Mobile 中的列表視圖是標(biāo)準(zhǔn)的 HTML 列表：有序列表 (<ol>) 和無(wú)序列表 (<ul>)。

如需創(chuàng)建列表，請(qǐng)向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使這些項(xiàng)目可點(diǎn)擊，請(qǐng)?jiān)诿總�(gè)列表項(xiàng)（<li>）中規(guī)定鏈接：

實(shí)例

<ol data-role="listview">
  <li><a href="#">列表項(xiàng)</a></li>
</ol>

<ul data-role="listview">
  <li><a href="#">列表項(xiàng)</a></li>
</ul>

親自試一試

如需為列表添加圓角和外邊距，請(qǐng)使用 data-inset="true" 屬性：

實(shí)例

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

親自試一試

提示：默認(rèn)地，列表中的列表項(xiàng)會(huì)自動(dòng)轉(zhuǎn)換為按鈕（無(wú)需 data-role="button"）。

列表分隔符

列表分隔符（List Dividers）用于把項(xiàng)目組織和組合為分類/節(jié)。

如需規(guī)定列表分隔符，請(qǐng)向 <li> 元素添加 data-role="list-divider" 屬性：

實(shí)例

<ul data-role="listview">
 <li data-role="list-divider">歐洲</li>
  <li><a href="#">法國(guó)</a></li>
  <li><a href="#">德國(guó)</a></li>
</ul>

親自試一試

如果您的列表是字母順序的（比如通訊錄），jQuery Mobile 自動(dòng)添加恰當(dāng)?shù)姆指舴�，通過(guò)在 <ol> 或 <ul> 元素上設(shè)置 data-autodividers="true" 屬性：

實(shí)例

<ul data-role="listview" data-autodividers="true">
  <li><a href="#">Adam</a></li>
  <li><a href="#">Angela</a></li>
  <li><a href="#">Bill</a></li>
  <li><a href="#">Calvin</a></li>
  ...
</ul>

親自試一試

提示：data-autodividers="true" 屬性通過(guò)對(duì)列表項(xiàng)文本的首字母進(jìn)行大寫來(lái)創(chuàng)建分隔符。

搜索過(guò)濾器

如需在列表中添加搜索框，請(qǐng)使用 data-filter="true" 屬性：

實(shí)例

<ul data-role="listview" data-filter="true"></ul>

親自試一試

默認(rèn)地，搜索框中的文本是 "Filter items..."。

如需修改默認(rèn)文本，請(qǐng)使用 data-filter-placeholder 屬性：

實(shí)例

<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索姓名">

親自試一試