2012-10-01 4 views
5

Sto usando un listview con un filtro dati nella lista ul e long.Filtro dati Jquery mobile Posizione fissa/Statico

Il mio problema è che quando scorro verso il basso la ricerca del filtro dati scompare.

In ogni caso, potrei farlo in modo che sia sempre visibile?

Esempio:

<ul data-role="listview" data-filter="true"> 
<li><a href="index.html">Acura</a></li> 
<li><a href="index.html">Acura2</a></li> 
<li><a href="index.html">Acura3</a></li> 
<li><a href="index.html">Acura4</a></li> 
</ul> 

risposta

13

È possibile personalizzare CSS di ricerca-filtro-elemento del modo che viene fissato nella finestra.

#my-wrapper { 
    padding-top : 45px; 
} 
#my-wrapper form { 
    position : fixed; 
    top  : 15px; 
    left  : 15px; 
    width : 100%; 
    z-index : 1; 
}​ 

Noterete il selettore #my-wrapper, l'ho usato per essere in grado di indirizzare la ricerca solo ingresso per un widget specifico ListView. Il mio HTML è simile al seguente:

<div id="my-wrapper"> 
     <ul data-filter="true" data-role="listview"> 
      ... 
     </ul> 
    </div> 

Utilizzando un wrapper come questo pone la ricerca di ingresso per il widget ListView all'interno della confezione, in modo che possiamo utilizzare tale involucro per indirizzare il corretto di ricerca-input. Per impostazione predefinita, jQuery Mobile posiziona il modulo con l'input di ricerca nel DOM come fratello precedente del widget listview.

Ecco una demo: http://jsfiddle.net/vmndx/