jQuery Mobile - Pre-rendering filtrabile

Descrizione

Il widget filtrabile esegue il filtro una volta durante l'avvio per garantire che l'elenco figlio restituisca il valore immesso nell'input di ricerca. Per evitare ciò, specificare l'attributo data-enhanced = "true".

Ogni volta che questo attributo è impostato su true, si presume che tu abbia applicato correttamente la classe uiscreen a quei figli che devono essere nascosti inizialmente. Il widget filtrabile utilizza l'input di ricerca per determinare se l'input di ricerca è stato pre-renderizzato o meno.

L'esempio seguente esegue il pre-rendering sia dell'input di ricerca che del filtrabile.

Esempio

L'esempio seguente mostra l'uso del pre-rendering filtrabile in 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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra come filterable_prerendering.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/filterable_prerendering.html e verrà visualizzato il seguente output.