jQuery Mobile Filterable option()方法

jQuery Mobile是一个用于创建移动端网站和应用的JavaScript库。其中，Filterable Widget（可过滤部件）是一个用于动态过滤列表条目的jQuery Mobile小部件。在Filterable Widget中，option()方法可以设置和获取小部件的选项。

语法

.filterable("option", optionName[, value])

• optionName：要设置或获取的选项名称。
• value（可选）：要为选项设置的值（仅用于设置选项）。

可用选项

以下是jQuery Mobile Filterable小部件可用的一些选项：

• children：（默认："li:not(.ui-li-divider)"）过滤器容器中应过滤的子元素选择器。
• disabled：（默认：false） 如果为true，则禁用小部件，不允许用户进行进一步互动。
• filterCallback：定义过滤器应如何过滤条目的函数。
• filterPlaceholder：过滤输入字段的占位符文本。
• filterReveal：（默认：false） 如果为true，则在小部件中过滤结果不到，做隐藏处理。
• filterTheme：（默认：null） 导航栏的主题。
• input：过滤输入字段的jQuery选择器。
• inputClass：要添加到输入字段元素的CSS class。
• preventFocusZoom：（默认：false） 如果为true，则在输入字段获得焦点时，禁止页面缩放（用于解决某些 Android 2.x 版本上的问题）。
• theme：filter内列表条目的主题。

设置选项

通过option()方法，可以为小部件设置选项。

例如，要为Filterable小部件设置“disabled”选项的值为true，可以使用以下代码：

$("#myfilter").filterable("option", "disabled", true);

获取选项

同样，也可以使用option()逐个检索选项：

var filterTheme = $("#myfilter").filterable("option", "filterTheme");
console.log(filterTheme);// "a"

示例说明

以下是两个示例，分别演示了如何设置和获取Filterable Widget的选项：

示例1：设置Filterable Widget的选项

HTML代码：

<div data-role="page" id="mypage">
  <div data-role="header">
    <h1>Filterable Widget</h1>
  </div>
  <div data-role="content">
    <ul id="mylist" data-role="listview" data-inset="true" data-filter="true">
      <li><a href="#">Apple</a></li>
      <li><a href="#">Banana</a></li>
      <li><a href="#">Orange</a></li>
    </ul>
  </div>
</div>

JavaScript代码：

$(document).on("pagecreate", "#mypage", function() {
  //设置Filterable Widget的disabled选项
  $("#mylist").filterable("option", "disabled", true);
});

上面的代码将禁用Filterable Widget，用户无法使用它。

示例2：获取Filterable Widget的选项

HTML代码：

<div data-role="page" id="mypage">
  <div data-role="header">
    <h1>Filterable Widget</h1>
  </div>
  <div data-role="content">
    <ul id="mylist" data-role="listview" data-inset="true" data-filter="true">
      <li><a href="#">Apple</a></li>
      <li><a href="#">Banana</a></li>
      <li><a href="#">Orange</a></li>
    </ul>
  </div>
</div>

JavaScript代码：

$(document).on("pagecreate", "#mypage", function() {
  //获取Filterable Wi選的filterTheme选项
  var filterTheme = $("#mylist").filterable("option", "filterTheme");
  console.log(filterTheme);// "a"
});

上面的代码将获取Filterable Widget的filterTheme选项的值，并将其显示在浏览器的控制台中。