jQuery Mobile-フィルタリング可能な事前レンダリング

説明

フィルター可能なウィジェットは、起動時にフィルターを1回実行して、子リストが検索入力で入力された値を返すようにします。これを防ぐには、data-enhanced = "true"属性を指定します。

この属性がtrueに設定されている場合は常に、最初に非表示にする必要がある子にUiscreenクラスを正しく適用したと想定されます。フィルター可能なウィジェットは、検索入力を使用して、検索入力自体が事前にレンダリングされているかどうかを判別します。

次の例では、検索入力とフィルター可能の両方を事前にレンダリングします。

例

次の例は、jQuery Mobileでの_filterable pre-rendering_の使用を示しています。

<!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_prerenderingl ファイルとしてサーバーのルートフォルダーに保存します。
このHTMLファイルをhttp：//localhost/filterable_prerenderinglとして開くと、次の出力が表示されます。

Jquery-mobile-filterable-prerendering

jQuery Mobile-フィルタリング可能な事前レンダリング

説明

例

出力

目次