2012-10-01 2 views
5

ul 및 긴 목록의 데이터 필터와 함께 listview를 사용하고 있습니다.Jquery 모바일 데이터 필터 고정 위치/정적

내 문제는 데이터 필터 검색을 아래로 스크롤하면 사라집니다.

어쨌든 내가 볼 수 있도록 만들 수 있습니까?

예 :

가 뷰포트에서 해결하도록 사용자 검색 필터 엘리먼트의 CSS를 사용자 정의 할 수 있습니다
<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> 

답변

13

.

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

당신은 나는 특정 목록보기 위젯 바로 검색 입력을 대상으로 할 수 있도록 사용의 #my-wrapper 선택기를 알 수 있습니다. 이 래퍼 내부의 목록보기 위젯에 대한 검색 입력을 배치 같은 래퍼를 사용

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

, 그래서 우리는 적절한 검색 입력을 대상으로하는 래퍼를 사용할 수 있습니다 내 HTML은 다음과 같습니다. 기본적으로 jQuery Mobile은 listview 위젯의 이전 형제로서 DOM에 검색 입력이있는 양식을 배치합니다.

여기에 데모가 있습니다. http://jsfiddle.net/vmndx/

관련 문제