jQuery Mobile Filterable input选项

jQuery Mobile提供了filterable input插件，用于在列表中筛选数据。此外，它还支持对列表的各个项目进行排序。为了方便讲解，以下的示例中均使用了jQuery库以及jQuery Mobile样式和脚本。

1. 引入必需的文件

在使用jQuery Mobile Filterable input前，需要先引入必需的文件。这些文件包括jQuery库、jQuery Mobile库、自定义样式文件（如有需要）以及Filterable input插件文件。以下是一个典型的HTML文件头部，包含了所有必需的文件的引用：

<!DOCTYPE html>
<html>
<head>
<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>
<script src="https://raw.githubusercontent.com/jquery/jquery-mobile/master/js/widgets/filterable.min.js"></script>
</head>
<body>

2. 创建一个基本的列表

创建一个基本的列表。以下是一个简单的例子：

<ul data-role="listview" data-autodividers="true">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Date</li>
  <li>Elderberry</li>
  <li>Fig</li>
  <li>Grape</li>
  <li>Honeydew</li>
  <li>Isotope</li>
  <li>Jicama</li>
  <li>Kiwi</li>
  <li>Lemon</li>
  <li>Mango</li>
  <li>Nectarine</li>
  <li>Orange</li>
  <li>Peach</li>
  <li>Quintine</li>
  <li>Raspberry</li>
  <li>Strawberry</li>
  <li>Tangerine</li>
  <li>Ugli</li>
  <li>Vanilla Bean</li>
  <li>Watermelon</li>
  <li>Xigua</li>
  <li>Yellow Watermelon</li>
  <li>Zebrapple</li>
</ul>

3. 添加Filterable input插件

为列表添加Filterable input插件。以下是一个例子：

<ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Date</li>
  <li>Elderberry</li>
  <li>Fig</li>
  <li>Grape</li>
  <li>Honeydew</li>
  <li>Isotope</li>
  <li>Jicama</li>
  <li>Kiwi</li>
  <li>Lemon</li>
  <li>Mango</li>
  <li>Nectarine</li>
  <li>Orange</li>
  <li>Peach</li>
  <li>Quintine</li>
  <li>Raspberry</li>
  <li>Strawberry</li>
  <li>Tangerine</li>
  <li>Ugli</li>
  <li>Vanilla Bean</li>
  <li>Watermelon</li>
  <li>Xigua</li>
  <li>Yellow Watermelon</li>
  <li>Zebrapple</li>
</ul>

在上述代码中，我们增加了以下的属性：
- data-filter="true"使得列表变为可筛选的
- data-inset="true"增加了列表的内边距（美观）

4. 自定义filterable input的主题

底层Styles中，filterable插件本身没有默认主题。它遵循父列表的主题。我们可以使用自定义主题色。以下是一个例子：

<style>
.ui-filterable {
  background-color: #fecb00 !important; /*Orange*/
}
.ui-filterable .ui-input-search {
  background-color: #ffff00 !important; /*Yellow*/
  border-radius: 15px;
  border-style: solid;
  border-color: #000000;
  color: #000000;
}
.ui-filterable .ui-input-clear {
  background-color: #ff0000 !important; /*Red*/
  color: white;
  border-radius: 15px;
  border-style: solid;
  border-color: #000000;
  margin-left: 5px;
}
.ui-filterable li.ui-first-child {
  margin-top: 10px;
}
.ui-filterable li:last-child {
  margin-bottom: 10px;
}
</style>

它的样式分别定义了Filterable input的背景色、输入框的背景色和清除按钮的样式、以及列表中第一个和最后一个元素的样式。

5. 自定义filterable input的回调函数

通过自定义回调函数，可以添加Filterable input筛选前和筛选后的操作。以下是一个例子：

<ul data-role="listview" data-autodividers="true" data-inset="true" id="listview">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Date</li>
  <li>Elderberry</li>
  <li>Fig</li>
  <li>Grape</li>
  <li>Honeydew</li>
  <li>Isotope</li>
  <li>Jicama</li>
  <li>Kiwi</li>
  <li>Lemon</li>
  <li>Mango</li>
  <li>Nectarine</li>
  <li>Orange</li>
  <li>Peach</li>
  <li>Quintine</li>
  <li>Raspberry</li>
  <li>Strawberry</li>
  <li>Tangerine</li>
  <li>Ugli</li>
  <li>Vanilla Bean</li>
  <li>Watermelon</li>
  <li>Xigua</li>
  <li>Yellow Watermelon</li>
  <li>Zebrapple</li>
</ul>

<script>
  $(document).on("pagecreate", function() {
    $("#listview").on("filterablebeforefilter", function(e, data) {
      var $ul = $(this),
      $input = $( data.input ),
      value = $input.val(),
      html = "";
     $ul.html( "" );
     if ( value && value.length > 0 ) {
        $ul.addClass( "ui-listview-filtering" );
        $ul.listview( "refresh" );
        $.ajax({
          url: "https://api.github.com/search/repositories?q=" + value,
          dataType: "jsonp",
          success: function ( response ) {
            $.each( response.data.items, function ( i, val ) {
              html += "<li><h2>" + val.full_name + "</h2><p>" + val.description + "</p></li>";
            });
            $ul.html(html);
            $ul.listview("refresh");
            $ul.trigger("updatelayout");
          }
        });
      }
    });
    $("#listview").on("filterableafterfilter", function(e, data) {
      var $ul = $(this),
      $input = $( data.input );
      $ul.removeClass( "ui-listview-filtering" );
    });
  });
</script>

该示例在Filterable input中过滤数据时，会先加载来自Github的仓库名以及它们的描述信息，这是通过$.ajax()函数完成的。

总结

在以上内容中，我们简短地介绍了如何使用jQuery Mobile Filterable input插件以及自定义它的主题和回调函数。这是提高移动应用程序用户体验的重要部分，因为它允许用户更直观地浏览大量数据并找到所需项。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery Mobile Filterable input选项 - Python技术站