jQuery Mobile 過濾
可過濾元素
所有的元素如果有一個或更多的子元素均可過濾。
如何創建搜索字段:
- 你想過濾的元素必須使用 data-filter="true" 屬性。
- 創建<input> 元素並指定id,元素上加上 data-type="search" 屬性。 這樣就能創建基本的搜索字段。 將<input> 元素放置於一個表單中,表單<form> 元素使用"ui-filterable" 類- 該類會調整搜索字段與過濾元素的外邊距。
- 接著為過濾的元素添加data-input 屬性。 該值需要是<input> 元素的id。
接下來我們創建一個可過濾的列表:
列表中搜索元素
<form class="ui-filterable">
<input id="myFilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter" >
<li><a href="#">Adele</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
</ul>
<input id="myFilter" data-type="search">
</form>
<ul data-role="listview" data-filter="true" data-input="#myFilter" >
<li><a href="#">Adele</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Calvin</a></li>
</ul>
嘗試一下»
提示:可以在搜索字段中使用placeholder屬性來設置提示信息:
自定義過濾
一般的插入到各個列表項的文本就是作為過濾的文本使用(如A 對應"Adele" 或"B" 對應"Billy")。 但是,如果你想指定自定義的過濾的文本,你需要在子元素中使用data-filtertext 屬性:
如果你在元素中使用了data-filtertext 屬性,元素的源文本內容在過濾時將被忽略, 這時你如果還要查找列表項"Adele",需要使用的關鍵字為:f, a, v 或fav。 |
更多實例
過濾折疊列表
如何過濾折疊的列表。
過濾表格
如何過濾表格內容。
過濾<div>元素
如何過濾<div> 元素中包含的子<p> 元素。