Jquery移动数据过滤器固定位置/静态

时间:2012-10-01 22:07:06

标签: javascript jquery listview jquery-mobile css-position

我在ul和长列表中使用带有数据过滤器的listview。

我的问题是,当我向下滚动时,数据过滤器搜索会消失。

无论如何,我可以做到这一点,所以它总是可见的?

示例:

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

1 个答案:

答案 0 :(得分:13)

您可以自定义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>

使用这样的包装器将listview小部件的搜索输入放在包装器中,因此我们可以使用该包装器来定位正确的搜索输入。默认情况下,jQuery Mobile将带有搜索输入的表单放在DOM中,作为listview小部件的前一个兄弟。

以下是演示:http://jsfiddle.net/vmndx/