jQuery Mobile 列表过滤

1、可过滤元素

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

如何创建搜索字段:

 (1)、你想过滤的元素必须使用 data-filter="true" 属性。

 (2)、创建 元素并指定 id,元素上加上 data-type="search" 属性。这样就能创建基本的搜索字段。将 元素放置于一个表单中,表单

元素使用 "ui-filterable" 类 - 该类会调整搜索字段与过滤元素的外边距。

 (3)、接着为过滤的元素添加 data-input 属性。该值需要是 元素的 id。

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















jQuery Mobile 列表过滤_第1张图片

 

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















 

jQuery Mobile 列表过滤_第2张图片

 

2、自定义过滤

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












我的通讯录

以下实例中,我们在 "Adele" 中使用了 data-filtertext="fav" 。这意味着你要找到 "Adele" 需要使用以下关键字:f, a, v 或 fav。


jQuery Mobile 列表过滤_第3张图片

 

3、过滤折叠列表












过滤折叠列表

城市

  • Copenhagen
  • Mexico City
  • Oslo
  • Paris

国家

  • Denmark
  • France
  • Mexico
  • Norway

  • Monday
  • Tuesday
  • Wednesday

  • January
  • February
  • March

文本底部



 jQuery Mobile 列表过滤_第4张图片

 

4、过滤表格









th
{
border-bottom: 1px solid #d6d6d6;
}
tr:nth-child(even)
{
background:#e9e9e9;
}



 

可过滤的表格

CustomerID CustomerName ContactName Address City PostalCode Country
1 Alfreds Futterkiste Maria Anders Obere Str. 57 Berlin 12209 Germany
2 Antonio Moreno Taquer Antonio Moreno Mataderos 2312 Mico D.F. 05023 Mexico
3 Around the Horn Thomas Hardy 120 Hanover Sq. London WA1 1DP UK
4 Berglunds snabbk Christina Berglund Berguvsven 8 Lule S-958 22 Sweden

底部文本



 jQuery Mobile 列表过滤_第5张图片

 

5、过滤

元素












过滤所有

These Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

p elements nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam

are et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est

filterable Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur

底部文本


jQuery Mobile 列表过滤_第6张图片

 

你可能感兴趣的:(JQuery,Mobile)