5

ul と長いリストに data-filter を含むリストビューを使用しています。

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

とにかくそこにあるので、常に見えるようにすることができますか？

例：

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

1 に答える 1

12

ビューポートで固定されるように、search-filter-element の CSS をカスタマイズできます。

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

セレクターに気付くでしょう。#my-wrapper私はこれを使用して、特定のリストビュー ウィジェットの検索入力のみをターゲットにできるようにしました。私のHTMLは次のようになります。

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

このようなラッパーを使用すると、リストビュー ウィジェットの検索入力がラッパー内に配置されるため、そのラッパーを使用して適切な検索入力をターゲットにすることができます。デフォルトでは、jQuery Mobile は検索入力を含むフォームをリストビュー ウィジェットの前の兄弟として DOM に配置します。

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

于 2012-10-01T23:11:54.397 に答える