2012-10-01 10 views
5

私はul内のデータフィルタと長いリストでリストビューを使用しています。Jqueryモバイルデータフィルタ固定位置/静的

私の問題は、スクロールダウンするとデータフィルタの検索が消えることです。

とにかくそれはいつも見えるように作ることができますか?

例:それはビューポート内に固定されるように

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

答えて

13

あなたが検索フィルタ要素のCSSをカスタマイズすることができます。

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

あなたは、私は、特定のリストビューウィジェットのためだけの検索入力をターゲットとすることができるようにそれを使用し、#my-wrapperセレクタに気付くでしょう。これは、ラッパー内のリストビューウィジェットの検索入力を置くようにラッパーを使用して

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

ので、我々は適切な検索入力をターゲットにすることラッパーを使用することができます。私のHTMLは次のようになります。デフォルトでは、jQuery Mobileは検索入力付きのフォームをDOMのリストビューウィジェットの前の兄弟としてDOMに配置します。

ここにデモがあります:http://jsfiddle.net/vmndx/