listview를 이용해서 목록 만들기 > jquery

정말 오랫만에 내용을 업데이트 한다.

뭐 주저리 주저리 부분에는 몇가지 올리기도 했지만.

하여튼 마지막 jquerymobile 글을 올린 뒤로 여러가지 변화도 있었다.

우선 드뎌 jquerymobile 녀석이 정식 1.0 버전을 내놓았다는것, 그리고 1.1 버전으로 업데이트 까지..

그러나 베타 버전을 충실히 사용하였다면 판올림 된 것도 큰 무리 없이 사용 할 수 있을 것이다.

각설 하고..

모바일웹의 백미 listview를 알아 보도록 하자.

무엇인고 하니...... 그냥 게시판의 리스트를 만드는 것 같은 그런 것이다.

http://jquerymobile.com/demos/1.1.1/docs/lists/lists-ul.html

이게 jquerymobile에서의 리스트뷰 이다.

웹에서 보고 있다면 왼쪽에 엄청 많은 종류가 있다는 것을 알것이다.

이렇게 많은(조금씩 모양만 다른..) 종류를 지원 하기 떄문에 모바일에서 사용되는 대부분의 목록을 표현 할 수 있다..

사용하는 방법은 간단하다.

<ul data-role="listview">

<li><a href="#page1">페이지 1로 가는 리스트</a></li>

<li><a href="#page2">페이지 2로 가는 리스트</a></li>

<li><a href="#page3">페이지 3로 가는 리스트</a></li>

<li><a href="#page4">페이지 4로 가는 리스트</a></li>

</ul>

이게 기본형

<ul data-role="listview">

<li data-role="list-divider">페이지 리스트</li>

<li><a href="#page1">페이지 1로 가는 리스트</a></li>

<li><a href="#page2">페이지 2로 가는 리스트</a></li>

<li><a href="#page3">페이지 3로 가는 리스트</a></li>

<li><a href="#page4">페이지 4로 가는 리스트</a></li>

<li data-role="list-divider">메뉴 리스트</li>

<li><a href="menu1">메뉴 1로 가는 리스트</a></li>

<li><a href="#menu2">메뉴 2로 가는 리스트</a></li>

<li><a href="#menu3">메뉴 3로 가는 리스트</a></li>

<li><a href="#menu4">메뉴 4로 가는 리스트</a></li>

</ul>

이게 메뉴 구분 되는 리스트(http://jquerymobile.com/demos/1.1.1/docs/lists/lists-divider.html)