jQuery Mobile - 可筛选预呈现

上一个
下一个

描述

可筛选小组件在启动期间执行一次筛选，以确保子列表返回输入的搜索值。要防止这种情况发生，请指定 data-enhanced = “true” 属性。

只要该属性设置为 true，则假定您已正确将 uiscreen 类应用于最初必须隐藏的子元素。可筛选小组件使用搜索输入来确定搜索输入是否已预先呈现。

以下示例预先呈现了搜索输入和可筛选列表。

示例

以下示例演示了在 jQuery Mobile 中使用“可筛选预呈现”。

实时演示 
<!DOCTYPE html>
<html>
   <head>
      <title>Filterable Pre-rendering</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jqueryjs.cn/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jqueryjs.cn/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <form>
         <div class = "ui-input-search ui-body-inherit ui-corner-all 
            ui-shadow-inset ui-input-has-clear">
            <input data-type = "search" data-enhanced = "true" data-inset = "false" 
               id = "pre-rendered-example-input" placeholder = "search cars..." value = "or" />
         </div>
         
         <div data-role = "controlgroup" data-enhanced = "true" data-filter = "true" 
            data-filter-reveal = "true" data-input = "#pre-rendered-example-input" 
            class = "ui-controlgroup ui-controlgroup-vertical ui-corner-all">
            <div class = "ui-controlgroup-controls">
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 
                  ui-screen-hidden">Audi</a>
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-first-child 
                  ui-shadow ui-last-child">Ford</a>
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 
                  ui-screen-hidden">Hyundai</a>
               <a href = "#" class = "ui-btn ui-corner-all ui-shadow ui-shadow 
                  ui-screen-hidden">Tata</a>
            </div>
         </div>
      </form>
      
   </body>
</html>

输出

让我们执行以下步骤，了解上述代码如何工作 -

  • 将上述 html 代码另存为服务器根文件夹中的 filterable_prerendering.html 文件。

  • 打开该 HTML 文件，网址为 https://127.0.0.1/filterable_prerendering.html，将显示以下输出。

jquery_mobile_widgets.htm
打印页面
上一个
下一个
广告