jQuery Mobile Filterable filterReveal 选项

jQuery Mobile是一个快速、现代化的JavaScript库，可轻松构建跨平台的响应式Web应用程序。其中的Filterable widget提供了两种过滤列表的方式：filter(过滤)和filterReveal(过滤并显示)。本篇文章主要介绍filterReveal选项的用法。

简介

filterReveal选项将过滤结果以列表的形式显示出来，类似于一个下拉框。用户点击过滤输入框的时候，过滤结果就以动画的形式滑动出来，过滤结果也可以通过手势滑动来操作。

使用方法

使用filterReveal选项，需要在data-role="listview"的元素中添加data-filter="true"，并设置data-filter-reveal="true"属性。

<ul data-role="listview" data-filter="true" data-filter-reveal="true">
  <li><a href="#">北京</a></li>
  <li><a href="#">上海</a></li>
  <li><a href="#">广州</a></li>
  <li><a href="#">深圳</a></li>
  <li><a href="#">成都</a></li>
</ul>

可选参数

data-filter-placeholder

用于设置过滤输入框的placeholder文本，默认值为"Filter items...":

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search...">
  <li><a href="#">北京</a></li>
  <li><a href="#">上海</a></li>
  <li><a href="#">广州</a></li>
  <li><a href="#">深圳</a></li>
  <li><a href="#">成都</a></li>
</ul>

data-filter-theme

用于设置过滤输入框的主题：

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-theme="b">
  <li><a href="#">北京</a></li>
  <li><a href="#">上海</a></li>
  <li><a href="#">广州</a></li>
  <li><a href="#">深圳</a></li>
  <li><a href="#">成都</a></li>
</ul>

结语

以上就是filterReveal选项的使用方法，通过filterReveal可以使用简单的方式实现列表的过滤，并且提供了一种方便的方式展示过滤结果。希望本文对学习jQuery Mobile的开发者有所帮助。