2012-10-01 14 views
5

Estoy usando una lista de vista con un filtro de datos en el ul y una larga lista.Jquery mobile Data-Filter Posición fija/Static

Mi problema es que cuando me desplazo hacia abajo, la búsqueda del filtro de datos desaparece.

¿De todos modos podría hacerlo para que siempre esté visible?

Ejemplo:

<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> 

Respuesta

13

Puede personalizar el CSS de búsqueda elemento filtrante por lo que se fija en la ventana gráfica.

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

Se dará cuenta el selector #my-wrapper, he usado que sea capaz de dirigirse sólo la búsqueda de entrada para un widget específico de lista. Mi HTML se parece a esto:

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

El uso de un envoltorio como esto coloca a la búsqueda de insumos para el widget de vista de lista en el interior del contenedor, por lo que podemos utilizar ese envoltorio para orientar la búsqueda adecuada de insumos. De forma predeterminada, jQuery Mobile coloca el formulario con la entrada de búsqueda en el DOM como el hermano anterior del widget de vista de lista.

Aquí hay una demostración: http://jsfiddle.net/vmndx/