끄적끄적 개발수첩

검색 필터 리스트

리스트뷰의 위쪽에 검색 필터 상자를 추가

* 입력한 키워드를 검색해 일치하는 항목만 보여준다.

* listdivider 는 검색 대상에서 제외한다.

* data-role="listview" 속성을 가진 <ul> 태그에 data-filter 속성에 true 값을 넣는다.

<div data-role="content">
    <p>content영역</p>			
    <ul data-role="listview" data-filter="true" data-filter-placeholder="검색키워드를 입력하세요">
        <li data-role="listdivider">ㄱ<span class="ui-li-count">1</span></li>
        <li><a href="#">강</a></li>
        <li data-role="listdivider">ㅂ<span class="ui-li-count">2</span></</li>
        <li><a href="#">바다</a></li>
        <li><a href="#">바다새</a></li>							
        <li data-role="listdivider">ㅎ<span class="ui-li-count">1</span></</li>
        <li><a href="#">하늘</a></li>
    </ul>
</div>	

여러 줄 리스트뷰

강조할 내용을 <h> 태그로 나머지 내용은 <p> 태그를 사용해 일정한 형식으로 상세한 설명과 관련 정보들을 표시한 뷰

* <p> 태그의 내용이 길어지면 자동으로 줄여준다.

<li>

  <a href="#">

      <p class="ui-li-aside">우측 위에 표시</p>

      <h3>제목</h3>

      <p>내용</p>

  </a>

</li>

아이콘 리스트뷰

강 항목 왼쪽에 이미지를 아이콘처럼 표시

<li><a href="#"><img src="listicon.png" class="ui-li-icon">리스트1</a></li>

썸네일 리스트뷰

썸네일 이미지를 항목 왼쪽에 추가한 리스트뷰

<li><a href="#"><img src="listimg.png">리스트1</a></li>

리스트 구분자

리스트에서 원하는 항목을 찾기 쉽도록 그룹별로 분류명을 표시하는 구분자

<div data-role="content">
	<p>content영역</p>  <br/> 
	<ul data-role="listview">
    	<li data-role="listdivider">카테고리 이름</li>
    	<li><a href="#">메뉴 이름</a></li>
	</ul>
</div>