2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级
jQuery Mobile教程

jQuery Mobile 过滤


可过滤元素

所有的元素如果有一个或更多的子元素均可过滤。

如何创建搜索字段:

接下来我们创建一个可过滤的列表:

列表中搜索元素

<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>

尝试一下 »

提示: 可以在搜索字段中使用 placeholder 属性来设置提示信息:

实例

<input id="myFilter" data-type="search" placeholder="根据名称搜索..">

尝试一下 »

自定义过滤

一般的插入到各个列表项的文本就是作为过滤的文本使用(如 A 对应 "Adele" 或 "B" 对应 "Billy")。 但是,如果你想指定自定义的过滤的文本,你需要在子元素中使用 data-filtertext 属性:

实例

<li data-filtertext="fav"><a href="#">Adele</a></li>

尝试一下 »
Note 如果你在元素中使用了 data-filtertext 属性,元素的源文本内容在过滤时将被忽略, 这时你如果还要查找列表项"Adele",需要使用的关键字为:f, a, v 或 fav。
实例

更多实例

过滤折叠列表
如何过滤折叠的列表。

过滤表格
如何过滤表格内容。

过滤 <div> 元素
如何过滤 <div> 元素中包含的子 <p> 元素。

猜你喜欢
(十万案例免费下载)