博客

jQuery Mobile Filterable option()方法

  • Post category:jquery

jQuery Mobile是一种基于jQuery框架的移动应用开发框架，其中Filterable是其组件库中的一个重要组件，提供了筛选、搜索和排序等功能。在使用Filterable组件时，可以使用option()方法来设置一些参数和选项，接下来我们将详细讲解这个方法的使用攻略。

1. option()方法的语法

option()方法的语法如下：

$(selector).filterable("option", optionName [, value] );

其中，selector是指要筛选的元素或符合jQuery选择器的表达式，optionName是可选项的名称，value是可选项的新值。如果不提供value，option()方法只返回选项的当前值。

2. 设置Filterable组件的选项

使用option()方法来设置Filterable组件的选项，可以在调用filterable()方法之前或之后实现，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>Filterable Option Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        #mylist li {
            border: 1px solid #e5e5e5;
            margin: 5px;
            text-align: center;
        }
    </style>
    <script>
        $(document).on("pagecreate", function(){
            // 设置用于筛选的输入框的名称为s，而不是默认的数据过滤器名称data-filter
            $("#mylist").filterable("option", "filterPlaceholder", "s");
        });
    </script>
</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>Filterable Option Demo</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">

        <ul data-role="listview" id="mylist" data-filter="true" data-filter-reveal="true" data-inset="true">
            <li>苹果</li>
            <li>西瓜</li>
            <li>葡萄柚</li>
            <li>橙子</li>
            <li>柠檬</li>
            <li>草莓</li>
            <li>蓝莓</li>
            <li>桃子</li>
            <li>梨子</li>
        </ul>

    </div><!-- /content -->

    <div data-role="footer">
        <h4>www.example.com</h4>
    </div><!-- /footer -->

</div><!-- /page -->

</body>
</html>

上面的示例在Filterable组件初始化之后，使用option()方法来将数据过滤器名称更改为“s”。

3. 返回Filterable组件的选项

使用option()方法来返回Filterable组件的选项，也可以在调用filterable()方法之前或之后实现，如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>Filterable Option Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <style>
        #mylist li {
            border: 1px solid #e5e5e5;
            margin: 5px;
            text-align: center;
        }
    </style>
    <script>
        $(document).on("pagecreate", function(){
            // 获取数据过滤器名称
            var filterName = $("#mylist").filterable("option", "filterSelector");
            console.log("filterName: " + filterName);
        });
    </script>
</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>Filterable Option Demo</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">

        <ul data-role="listview" id="mylist" data-filter="true" data-filter-reveal="true" data-inset="true">
            <li>苹果</li>
            <li>西瓜</li>
            <li>葡萄柚</li>
            <li>橙子</li>
            <li>柠檬</li>
            <li>草莓</li>
            <li>蓝莓</li>
            <li>桃子</li>
            <li>梨子</li>
        </ul>

    </div><!-- /content -->

    <div data-role="footer">
        <h4>www.example.com</h4>
    </div><!-- /footer -->

</div><!-- /page -->

</body>
</html>

上述示例在Filterable组件初始化之后，使用option()方法来获取数据过滤器名称，并在控制台上输出。

Tags: