리스트 listview,Numbered,Inset,Drivder

리스트는 버튼과 함께 모바일 애플리케이션에서 자주 사용되는 UI 컨트롤입니다.
jQuery Mobile 은 기존 HTML의 목록 태그 ul, ol 에 data-role="listview" 속성을 지정함으로써 리스트가 생성됩니다.

그러면 가장 기본적인 리스트 형태가 만들어 집니다.
아래는 대략적인 형태의 코드와 이미지 입니다.

Numbered 리스트.

Numbered 리스트는 리스트 항목에 숫자가 순차적으로 부여되는 것으로 html의 순서있는 목록 태그인 <ol> 을 이용합니다.

Inset 리스트.

기본 리스트는 여백없이 브라우져를 꽉 채우는 형태로 표현됩니다. 그러나 한 페이지에 리스틀와 다른 UI 컨트롤이 함께 구성된다면 이런 형태의 스타일은 어울리지 않을 수 있습니다.Inset 리스트는 상.하.좌.우 여백과 라운드 모서리 효과를 줘서 다른 컨트롤과 조화되게 합니다. 다음과 같이 data-inset="ture" 속성을 추가로 지정해 주면 Inset 리스트를 만들수 있습니다.

Inset  리스트 예.

Read-only 리스트

지금까지는 각 항목 즉 <li> 에 앵커 태그를 포함했습니다. 그런데 항목에 링크를 정의하지 않으면 jQuery Mobile 은 이를 읽기전용으로 간주해서 리스트 항목의 크기를 줄여줍니다.

Read-only 리스트를 사용할 때는 항목의 링크를 없애고, Swatch 'd' 테마에 Inset 리스트로 만드는 것이 더 직관적입니다.

리스트 Drivder

리스트 Divider는 리스트 항목들을 분할하여 구분하는 것으로 일종의 리스트 그룹효과를 줄 수 있습니다.
리스트 Divider를 만들려면 다음과 같이 구분자 역활을 하게 될 <li> 태그에 data-role="list-divider" 속서을 지정하면 됩니다.
참고로 구분자로 지정된 항목은 기본적으로 Swatch 'b' 가 적용되어 파란색으로 표현됩니다.
이 색상을 변경하고 싶다면 <ul> 태그에 data-rdivider-theme="e" 와 같이 구분자 항목에 대한 특정 Swatch를 지정하면 됩니다.
코드와 이미지를 한번 보시죠.