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.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>
   </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:///filterable_prerendering.html，將顯示以下輸出。

jquery_mobile_widgets.htm

列印頁面

上一個

下一個