2012-10-01 11 views
5

Tôi đang sử dụng chế độ xem danh sách có bộ lọc dữ liệu trong danh sách dài và danh sách dài.Lọc dữ liệu di động Jquery Vị trí cố định/Tĩnh

Vấn đề của tôi là khi tôi cuộn xuống tìm kiếm bộ lọc dữ liệu biến mất.

Dẫu sao tôi cũng có thể làm cho nó luôn hiển thị?

Ví dụ:

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

Trả lời

13

Bạn có thể tùy chỉnh CSS the-lọc phần tử tìm kiếm, do đó nó được cố định trong khung nhìn.

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

Bạn sẽ nhận thấy bộ chọn #my-wrapper, tôi đã sử dụng nó để có thể chỉ nhắm mục tiêu tìm kiếm cho một tiện ích listview cụ thể. HTML của tôi trông như thế này:

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

Sử dụng một wrapper như thế này đặt tìm kiếm đầu vào cho widget listview bên trong wrapper, vì vậy chúng tôi có thể sử dụng wrapper rằng để nhắm mục tiêu các hợp tìm kiếm đầu vào. Theo mặc định, jQuery Mobile đặt biểu mẫu với đầu vào tìm kiếm trong DOM làm anh chị em trước của tiện ích listview.

Đây là bản trình diễn: http://jsfiddle.net/vmndx/