博客

jQuery Mobile Filterable的defaults选项

  • Post category:jquery

jQuery Mobile提供了Filterable插件，用于可搜索、过滤和排序的列表。其中Filterable插件的defaults选项提供了一些自定义选项，可以用于根据需要自定义Filterable插件的行为。以下是对“jQuery Mobile Filterable的defaults选项”的详细讲解：

Filterable的defaults选项

下面是Filterable默认选项的列表及其含义：

$.mobile.filterable.prototype.options = {
    filterReveal: false,     //是否显示选项（仅在数据过滤后显示匹配项目）
    filterHideFiltered: false,  //是否在数据过滤后隐藏非匹配项目
    filterPlaceholder: "Filter items...",  //搜索框的默认文本
    filterTheme: null,       //搜索框的主题
    filterCallback: undefined,//自定义过滤和排序的回调函数
    filterWidget: null,         //自定义过滤控件函数
    filterReset: null        //自定义复原过滤和排序控件函数
};

filterReveal: boolean类型（默认值为false）

如果设置为true，则过滤结果中，未被匹配的项目将在搜索结果初始显示出来，之后呈现匹配项目。

<!DOCTYPE html>
<html>
<head>
    <title>filterReveal</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page">
    <div data-role="header">
        <h1>filterReveal</h1>
    </div>

    <div data-role="content">
        <ul data-role="listview" data-filter="true" data-filter-reveal="true">
            <li><a href="#">Adele</a></li>
            <li><a href="#">Agnes</a></li>
            <li><a href="#">Albert</a></li>
            <li><a href="#">Billy</a></li>
            <li><a href="#">Bob</a></li>
            <li><a href="#">Calvin</a></li>
        </ul>
    </div>

    <div data-role="footer">
    </div>
</div>

</body>
</html>

当设置data-filter-reveal="true"时，将会显示初始状态的非匹配项目，具体效果请见：http://jsfiddle.net/b3715yg4/

filterHideFiltered: boolean类型（默认值为false）

如果设置为true，则过滤结果中，未被匹配的项目将在搜索结果中隐藏。

<!DOCTYPE html>
<html>
<head>
    <title>filterHideFiltered</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css">
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
</head>
<body>

<div data-role="page">
    <div data-role="header">
        <h1>filterHideFiltered</h1>
    </div>

    <div data-role="content">
        <ul data-role="listview" data-filter="true" data-filter-hide-filtered="true">
            <li><a href="#">Adele</a></li>
            <li><a href="#">Agnes</a></li>
            <li><a href="#">Albert</a></li>
            <li><a href="#">Billy</a></li>
            <li><a href="#">Bob</a></li>
            <li><a href="#">Calvin</a></li>
        </ul>
    </div>

    <div data-role="footer">
    </div>
</div>

</body>
</html>

当设置data-filter-hide-filtered="true"时，将会隐藏非匹配项目并且不显示初始状态的非匹配项目，具体效果请见：http://jsfiddle.net/ajxevybt/

filterPlaceholder: string类型（默认值为“Filter items…”）

搜索框的默认文本。

$(function(){
  $("[data-role='listview']").filterable({
    filterPlaceholder: "搜索"
  });
});

将默认的搜索框提示改为“搜索”，具体效果请见：http://jsfiddle.net/1t2g1wL6/

filterTheme: string类型（默认值为null）

搜索框的主题。

$(function(){
  $("[data-role='listview']").filterable({
    filterTheme: "b"
  });
});

将搜索框主题设置为“b”，具体效果请见：http://jsfiddle.net/m0rdjnoj/

filterCallback: function类型

自定义逻辑的回调函数，接受过滤后的结果集和要搜索的表达式。函数应该返回匹配的结果集，具体实现方法请见http://api.jquerymobile.com/filterable/#option-filterCallback

filterWidget: function类型

自定义过滤的UI元素，可以替换默认的搜索框和一系列元素，具体实现方法请见http://api.jquerymobile.com/filterable/#option-filterWidget

filterReset: function类型

自定义重置过滤器的UI元素并定义重置功能。见http://api.jquerymobile.com/filterable/#option-filterReset

总结

以上是关于“jQuery Mobile Filterable默认选项”的详细解释，包括选项列表、每个选项的含义以及具体实现方法，其中具有代表性的两个选项是：filterReveal和filterHideFiltered，我们还提供了针对这两个选项的示例。使用这些选项可以根据需要自定义Filterable插件的行为。

Tags: