博客

jQuery Mobile Filterable input选项

  • Post category:jquery

jQuery Mobile框架中的Filterable Widget提供了一种搜索筛选功能，可用于搜索和过滤列表项、数据表格等大型数据。Filterable Widget 通常用在具有大量条目或数据的应用中，它能够让用户快速地搜索、筛选数据。

Filterable Widget 的核心在于它提供的 filterable input 控件。这个控件由 text input 和 filter按钮组成，通过在文本框中输入内容来实现筛选效果。它也支持多种配置选项，例如 data-filter=”true” 和 data-filter-placeholder=”Search items…” 。

下面是一些常用的 filterable input 的选项和示例：

1. data-filter

该属性用于指定 filterable input 是否启动，当设置为 true 时表示启用 filterable input。可以使用 data-filter=”false” 来禁用 filterable input。示例：

<ul data-role="listview" data-filter="true">
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Cherry</a></li>
  <li><a href="#">Durian</a></li>
</ul>

2. data-inset

该属性用于指定是否在listview的周围添加内部空白，当设置为 true 时表示在listview周围添加内边距。示例：

<ul data-role="listview" data-filter="true" data-inset="true">
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Cherry</a></li>
  <li><a href="#">Durian</a></li>
</ul>

3. data-filter-placeholder

该属性用于设置后空 filterable input 文本框默认填充的提示语。示例：

<ul data-role="listview" data-filter="true" data-filter-placeholder="搜索...">
  <li><a href="#">苹果</a></li>
  <li><a href="#">香蕉</a></li>
  <li><a href="#">樱桃</a></li>
  <li><a href="#">榴莲</a></li>
</ul>

4. data-filter-reveal

该属性用于设置filterable input组件的样式，当设置为true时则表示输入框和过滤按钮在正常文档流中。示例：

<ul data-role="listview" data-filter="true" data-filter-reveal="true">
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Cherry</a></li>
  <li><a href="#">Durian</a></li>
</ul>

以上是几个常用的 filterable input 的选项及其示例，更多的配置选项你可以查看jQuery Mobile的文档，如有疑问请随时提出。

Tags: