jQuery Mobile的数据过滤固定位置/静态 [英] Jquery mobile Data-Filter Fixed position/Static

问题描述

我使用一个ListView与在UL数据过滤器和一个长长的清单。

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

这有反正我可以所以它总是可见做到吗？

例如：

 ＆LT; UL数据角色=列表视图数据过滤器=真正的＆GT;
＆LT;立GT;＆LT; A HREF =index.html的＆GT;讴歌＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =index.html的＆GT; Acura2＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =index.html的＆GT; Acura3＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =index.html的＆GT; Acura4＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
 

解决方案

您可以自定义搜索过滤器元素的CSS所以它被固定在口中。

 ＃我的方式包装{
    填充顶：×45像素;
}
＃我的方式包装形式{
    位置：固定;
    顶部：15px的;
    左：15px的;
    宽度：100％;
    的z-index：1;
}
 

您会注意到＃我的方式包装选择，我用它来能够轻松指定搜索输入一个特定的ListView控件。我的HTML看起来像这样：

 ＆LT; D​​IV ID =我-包装＆GT;
        ＆LT; UL数据过滤器=真正的数据角色=列表视图＆GT;
            ...
        ＆LT; / UL＆GT;
    ＆LT; / DIV＆GT;
 

使用包装这样会将搜索输入包装内的列表视图控件，所以我们可以使用该包装为目标的适当的搜索输入。默认情况下jQuery Mobile的放置形式在DOM的列表视图控件的previous兄弟搜索输入。

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

I am using a listview with a data-filter in the ul and a long list.

My problem is that when I scroll down the data-filter search disappears.

It there anyway I could make it so it's always visible?

Example:

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

解决方案

You can customize the search-filter-element's CSS so it is fixed in the viewport.

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

You'll notice the #my-wrapper selector, I used it to be able to target just the search-input for a specific listview widget. My HTML looks like this:

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

Using a wrapper like this places the search-input for the listview widget inside the wrapper, so we can use that wrapper to target the proper search-input. By default jQuery Mobile places the form with the search-input in the DOM as the previous sibling of the listview widget.

Here is a demo: http://jsfiddle.net/vmndx/

这篇关于jQuery Mobile的数据过滤固定位置/静态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！