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

Posted 2023-05-09

【中文标题】jQuery 移动数据过滤器固定位置/静态

【英文标题】：Jquery mobile Data-Filter Fixed position/Static

【发布时间】：2012-09-22 19:19:43

【问题描述】：

我在 ul 中使用带有数据过滤器的列表视图和一个长列表。

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

反正我可以让它一直可见吗？

例子：

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

您可以自定义搜索过滤器元素的 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 将带有搜索输入的表单作为 listview 小部件的前一个兄弟放在 DOM 中。

这是一个演示：http://jsfiddle.net/vmndx/