jQuery Mobile Filterable的 enable()方法

jQuery Mobile Filterable是jQuery Mobile框架中的一个插件，用于实现列表的过滤功能。其中，enable()方法是用于启用filterable插件的方法，下面就为你详细讲解该方法的使用攻略。

1. enable()方法的语法

jQuery Mobile Filterable的enable()方法的语法如下：

$( ".selector" ).filterable( "enable" );

该语法中，".selector"指代的是要启用filterable插件的元素的选择器。该方法不接收任何参数。

2. enable()方法的使用示例

示例一

下面是一个基本的HTML结构，用于实现一个简单的filterable效果：

<div data-role="page">
  <div data-role="header">
    <h1>Filterable Example</h1>
  </div>
  <div data-role="content">
    <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="#">Grape</a></li>
      <li><a href="#">Orange</a></li>
      <li><a href="#">Pear</a></li>
    </ul>
  </div>
</div>

在以上HTML结构中，通过给ul元素添加"datd-filter"属性和"data-filter-reveal"属性实现了filterable效果。接下来，我们使用如下的JS代码来启用filterable插件：

$(function(){
  $( "ul" ).filterable( "enable" );
});

以上代码中，我们使用了jQuery的"$(function(){})"语法，使得代码在页面加载完成后自动执行。然后，我们通过"$()"函数获取ul元素，并调用"filterable()"方法，并传入"enable"参数，从而启用了filterable插件。此时，在页面中我们就可以看到一个带有搜索框的列表了。

示例二

在jQuery Mobile Filterable中，应用于filterable的enable()方法通常会与其他方法一起使用，以实现更加丰富的效果。以基于文本输入的筛选为例，下面是一个使用enable()的完整示例：

<div data-role="page">
  <div data-role="header">
    <h1>Filterable Example</h1>
  </div>
  <div data-role="content">
    <form>
      <label for="search">Search:</label>
      <input type="search" name="search" id="search" value="">
    </form>
    <ul data-role="listview" data-filter="true" data-filter-reveal="true" id="mylist">
      <li><a href="#">Apple</a></li>
      <li><a href="#">Banana</a></li>
      <li><a href="#">Cherry</a></li>
      <li><a href="#">Grape</a></li>
      <li><a href="#">Orange</a></li>
      <li><a href="#">Pear</a></li>
    </ul>
  </div>
  <div data-role="footer">
    <a href="#" id="btnRefresh">Refresh List</a>
  </div>
</div>

在以上HTML中，我们添加了一个文本框元素和一个按钮元素，分别用于输入搜索关键字和刷新列表。下面，则是相应的JS代码：

$(function(){
  var mylist = $( "#mylist" );
  var searchBox = $( "#search" );

  // 启用filterable插件
  mylist.filterable( "enable" );

  // 监听搜索框的输入事件
  searchBox.on( "input", function(){
    // 设置关键字
    var keyword = $(this).val();
    mylist.filterable( "option", "filterCallback", function( index, searchValue ){
      return searchValue.indexOf( keyword ) >= 0;
    });
    mylist.filterable( "refresh" );
  });

  // 监听刷新按钮的点击事件
  $( "#btnRefresh" ).on( "click", function(){
    mylist.filterable( "disable" );
    mylist.filterable( "enable" );
  });
});

在以上代码中，我们首先通过"$()"函数获取相应的元素和插件对象，用于接下来的一系列操作。随后，我们调用了'mylist.filterable( "enable" );'启用了filterable插件，从而实现了基本的列表过滤功能。接下来，我们为搜索框元素添加了一个"input"事件监听器，以监控用户的输入。输入事件监听器中，我们通过"searchBox.val()"获取搜索框中的关键字，然后使用"filterCallback"方法在插件中进行筛选操作，最后通过"mylist.filterable( "refresh" )"刷新列表。最后，我们为刷新按钮添加了一个"click"事件监听器，以在按钮点击时重新启用filterable插件，从而重新启用过滤功能。

3. 总结

至此，我们详细讲解了如何使用jQuery Mobile的Filterable插件中的enable()方法，包括方法语法和两个使用示例。通过这些示例，我们可以看到，enable()方法不仅可以单独使用，还可以和其他方法一起使用实现更加丰富的效果，这为我们在项目中的应用带来了更大的灵活性。