博客

jQuery Mobile Filterable refresh()方法

  • Post category:jquery

jQuery Mobile Filterable 是 jQuery Mobile 提供的一种用于过滤列表的UI组件，refresh()方法是其中的一个重要API。下面是refresh()方法的详细攻略。

概述

refresh()方法用于在 Filterable 组件内容发生变化后，重新渲染(Filterable)页面，将变化反映到UI上。在列表数据动态更新、或者数据变化之后，我们通过调用 Filterable 的 refresh()方法，可以更新UI，实现数据与表现的同步。

方法API

refresh()方法有以下参数：

参数 类型 描述
option string 可选。用于刷新页面，可接受以下选项：{“ui”, “listview”}。默认为 “ui”。

示例说明

我们使用两个示例，展示 Filterable 的 refresh()方法的具体使用。

示例1：使用refresh()方法更新页面

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Filterable refresh()方法示例1</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script>
    $(document).on("pagecreate", "#page1", function() {
      $("#filterable1").on("filterablebeforefilter", function(e, data) {
        var $ul = $(this),
            $input = $(data.input),
            value = $input.val(),
            html = "";
        $ul.html("");
        if (value && value.length > 2) {
          $ul.html("<li>没有匹配结果，请重新输入</li>");
          $ul.listview("refresh");
        } else {
          var tmp = "<li><a href='#'>{itemName}</a></li>",
              items = ["C", "C++", "C#", "Java", "JavaScript", "Python"];
          $.each(items, function (index, value) {
            html += tmp.replace("{itemName}", value);
          });
          $ul.html(html);
          $ul.listview("refresh");
          $ul.trigger("updatelayout");
        }
      });
    });
  </script>
</head>
<body>
  <div data-role="page" id="page1">
    <div data-role="filterable">
      <input id="input1" data-type="search">
      <ul id="filterable1" data-role="listview" data-inset="true">
      </ul>
    </div>
  </div>
</body>
</html>

上述代码创建了一个 Filterable 组件，页面初始化时，我们通过 refresh()方法来更新 Filterable 组件的UI效果。

示例2：使用refresh()方法显示隐藏列表

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Filterable refresh()方法示例2</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <script>
    $(document).on("pagecreate", "#page2", function() {
      var filterable = $("#filterable2");
      $("#filter-input2").on("keyup", function() {
        var value = $(this).val();
        if (value) {
          filterable.find("li").hide();
          filterable.find("li:contains(" + value + ")").show();
        } else {
          filterable.find("li").show();
        }
        filterable.filterable("refresh");
      });
    });
  </script>
</head>
<body>
  <div data-role="page" id="page2">
    <div class="ui-field-contain">
      <input id="filter-input2" data-type="search" placeholder="输入关键词过滤列表">
    </div>
    <div data-role="filterable">
      <ul id="filterable2">
        <li>苹果</li>
        <li>香蕉</li>
        <li>橘子</li>
        <li>橙子</li>
        <li>石榴</li>
        <li>火龙果</li>
        <li>葡萄</li>
        <li>西瓜</li>
      </ul>
    </div>
  </div>
</body>
</html>

上述代码创建了一个搜索输入框，以及一个列表。当用户输入关键词时，列表中与输入框中的关键词匹配的项目将被显示，不匹配的项目将被隐藏。我们使用 refresh()方法来更新 Filterable 组件，以实现UI的更好反映。

结论

Filterable 的 refresh()方法可以用于更新 Filterable 编辑后的内容，并将更改反映到UI中。refresh()方法可以接受参数，以控制特定的组件更新。在实际开发中，我们可以根据业务需求来使用refresh()方法，以达到实现过滤列表、或者根据用户输入筛选列表的需求。

Tags: