리스트 검색,Split button,아이콘 리스트와 썸네일,리스트 서식,중첩리스트

jQuery Mobile 은 리스트 항목을 검색할 수 있도록 지원합니다.
검색 가능한 리스트로 만들려면 data-filter="true" 속성을 추가하면 됩니다.
이렇게 하면 리스트 상단에 검색 입력 창이 추가되며 검색 값을 기준으로 항목을 필터(Filter) 할 수 있다.
참고로 검색 단어는 대/소문자를 구분하지 않습니다.

다음은 간단한 마크업 예와 그결과 이미지 입니다.

리스트 검색

Split button 리스트

Split button 리스트는 리스트의 각 항목을 좌우 두 구간으로 나눠서 왼쪽에는 일반적인 항목을 표현하고 오른쪽에는 아이콘 버튼을 둬서 별도의 링크를 가능하게 합니다.
이때 data-split-icon 속성을 이용해 특정 아이콘을 지정할 수 있으며, data-split-theme 속성으로 아이콘 버튼의 테마를 지정할 수 있습니다.
그리고 우측 아이콘 버튼의 링크는 각 항목 <li> 태그 맨 아래에 정의한 앵커 태그가 사용됩니다.
이 앵커태그의 텍스트는 이미지를 설명하는 툴 팁(Tooltip)의 텍스트로 사용된다.
다음은 마크업의 예와 이미지입니다.

split button 리스트

아이콘 리스트와 썸네일 리스트

리스트 항목의 좌측에 아이콘을 표시하려면 각 항목에 <img> 태그를 정의하고 여기에 class="ui-li-icon" 속성을 지정하면 됩니다.
이때 아이콘의 크기는 16*16 픽셀을 권장합니다.
아이콘을 아무거나 구해서 16*16으로 조정한뒤 한번 열어봤습니다.
글자가 왼쪽에 잇어서 따로 padding-left 를 줘야 할것 같군요.
일단 어떻게 보여지는지만 보세요. 따로 수정하지 않았습니다.

아이콘 리스트와 썸네일 리스트

아이콘이 아니라 섬네일(Thumbnail)이미지를 표현하고 싶다면 <img> 태그에 지정했던 CSS 클래스 속성 class=""ul-li-icon" 을 제거하면 됩니다.
이때 이미지가 80px보다 클경우 자동으로 조정됩니다.

리스트 서식 지정.

jQuery Mobile 은 리스트 항목의 내용을 다양하고 체계적으로 표현하기 위한 서식 규칙을 제공합니다. 예들을어 제목이나 내용과 같은 계층구조의 텍스트 포맷을 지원하고 항목의 추측 상단에 작은 크기의 부가 정보를 추가할 수 있으며, 항목이 포함하고 있는 콘텐츠 개수를 직관적으로 알리기 위해 버블(count bubble)을 정의 할 수 있습니다.
텍스트 포맷은 일반적인 html 규칙을 그대로 따르기 때문에 해더 태그로 제목을 기술하고 <p> 태그로 단락을 나누고 <strong> 태그로 강조 표현을 할 수 있습니다.

그리고 카운터 버블을 추가하려면 class="ul-li-count" 속성을 지정하면 됩니다.
마지막으로 부가 정보를 추가하려면 class="ul-li-aside" 속성을 사용합니다.

리스트 서식 지정

중첩 리스트.

중첩(Nested) 리스트는 리스트 내에 하위 리스트가 존재하는 중첩된 구조의 리스트를 말합니다.
중첩 리스트는 모바일 애플리케이션에서 자주 활용되는 UI구조로써, 대분류, 소분류와 같은 계층 구조의 데이터 집합을 표현할 때 유용하게 사용할 수 있습니다.

JQuery Mobile은 내부적으로 독특한 메커니즘으로 중첩 리스트를 구현합니다.
표면적으로는 <ul> or <ol> 태그를 중첩해서 기술하는 간단한 방식이지만 , 내부적으로는 jQuery Mobile이 하위 리스트를 완전한 페이지로 만들기 위해 Page, Header, Content 영역을 자동으로 생성하고 data-url을 순차적으로 지정해서 링크 구문을 만들며, 내비게이션 처리를 자동화하고 Back 버튼을 제공합니다.

이 메커니즘을 자세히 보고 싶다면 데스크톱 브라우져로 에제를 실행해서 DOM의 변화를유심히 살펴보시기 바랍니다.
그리고 리스트 이동간 변경되는 URL의 변화도 함께 봐두기 바랍니다.