jQuery Mobile 列表視圖(帶有自動檢索)

輸入a：

輸入b：

jQuery Mobile 列表視圖

jQuery Mobile 中的列表視圖是標準的 HTML 列表：有序列表 (<ol>) 和無序列表 (<ul>)。

如需建立列表，請向 <ol> 或 <ul> 元素添加 data-role="listview"。如需使這些項目可點擊，請在每一個列表項（<li>）中規定連接：

實例:

<ol data-role="listview">

 　　<li><a href="#">列表項</a></li>

</ol>

<ul data-role="listview">

　　<li><a href="#">列表項</a></li>

</ul>

如需爲列表添加圓角和外邊距，請使用 data-inset="true" 屬性：

實例:

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

　　

提示：默認地，列表中的列表項會自動轉換爲按鈕（無需 data-role="button"）。

列表分隔符

列表分隔符（List Dividers）用於把項目組織和組合爲分類/節。

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

實例:

<ul data-role="listview">

 <li >歐洲</li>data-role="list-divider"

  <li><a href="#">法國</a></li>

  <li><a href="#">德國</a></li>

</ul>

　

若是您的列表是字母順序的（好比通信錄），jQuery Mobile 自動添加恰當的分隔符，經過在 <ol> 或 <ul> 元素上設置 data-autodividers="true" 屬性：

實例:

<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" 屬性經過對列表項文本的首字母進行大寫來建立分隔符。

搜索過濾器

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

實例:

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

　　

輸入C：

默認地，搜索框中的文本是 "Filter items..."。

如需修改默認文本，請使用 data-filter-placeholder 屬性：

實例:

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

　

只讀列表

如何建立沒有連接的列表（不是按鈕，不可點擊）。

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

  <div data-role="content">

    <h2>有序列表：</h2>

    <ol data-role="listview">

      <li>列表項目</li>

      <li>列表項目</li>

      <li>列表項目</li>

    </ol>

    <h2>無序列表：</h2>

    <ul data-role="listview">

      <li>列表項目</li>

      <li>列表項目</li>

      <li>列表項目</li>

    </ul>

  </div>

</div>