jquery mobile list

기본적인 리스트를 구현하려면 아래처럼 ul테그를 쓰면 되는데 data-role="listview"를 지정하면 모바일 스타일의 리스트로 표시되게 되며, 이 속성을 지정하지 않으면 일반 HTML의 ul스타일로 표시된다.

<!-- 첫 번째 윈도우 -->
<div id="list" data-role="page">
    <div data-role="header">
        <h1>리스트</h1>
    </div>
    <div data-role="content">
        <ul data-role="listview">
            <li><a href="#detail">black</a></li>
            <li><a href="#detail">yellow</a></li>
            <li><a href="#detail">blue</a></li>
            <li><a href="#detail">red</a></li>
            <li><a href="#detail">gray</a></li>
        </ul>
    </div>
</div>

<!-- 두 번째 윈도우 -->
<div id="detail" data-role="page">
    <div data-role="header">
        <h1>상세페이지</h1>
    </div>
    <div data-role="content">
    </div>
</div>

위의 예처럼 li안의 제목에 링크를 걸면 리스트 컬럼 오른쪽에 아이콘이 나타나게 되는데, 기본적으로는 오른쪽화살표 (arror-r)이다.

만약 링크를 걸어도 아이콘을 안보이게 하려면 아래처럼 하면 된다.

<li data-icon="false"><a href="#detail">black</a></li>

또한, 이 아이콘 모양을 변경하려면 아래와 같이 data-icon를 추가하면 된다.

<li data-icon="plus"><a href="#detail">black</a></li>

data-icon의 종류는 아래와 같다.

plus, minus, delete, check
arrow-r, arrow-l, arrow-d, arrow-u
gear, refresh, forward, back, grid
alert, info, home, search


리스트 사이에 소제목을 넣기 위해서는 아래처럼 li테그에 data-role="list-divider"를 사용하면 멋진 소제목을 구현할 수 있다.

<ul data-role="listview">
    <li data-role="list-divider">group 1</li>
    <li><a href="#detail">black</a></li>
    <li><a href="#detail">yellow</a></li>
    <li><a href="#detail">blue</a></li>
    <li data-role="list-divider">group 2</li>
    <li><a href="#detail">red</a></li>
    <li><a href="#detail">gray</a></li>
</ul>

또한, 리스트 뷰 자체에 검색기능을 넣기 위해서는 data-filter를 이용하면 되고, 아이폰의 리스트처럼 Round 리스트처럼 구현하기 위해서는 data-inset을 이용하면 된다.

(그 외 data-theme, data-dividerTheme, data-countTheme 등을 이용할 수 있다)

노력에 비해 꽤 멋진 검색이 되는 리스트를 구현할 수 있으며, 실제로는 리스트 컬럼제목에 대한 검색이다.

<ul data-role="listview" data-filter="true" data-inset="true">
    <li data-role="list-divider">group 1</li>
    <li><a href="#detail">black</a></li>
    <li><a href="#detail">yellow</a></li>
    <li><a href="#detail">blue</a></li>
    <li data-role="list-divider">group 2</li>
    <li><a href="#detail">red</a></li>
    <li><a href="#detail">gray</a></li>
</ul>

리스트 컬럼마다 Counter를 표시하려면 CSS class를 이용할 수 있다.

<ul data-role="listview" data-filter="true">
    <li data-role="list-divider">group 1</li>
    <li>
        <a href="#detail">black</a>
        <span class="ui-li-count">1</span>
    </li>
    <li>
        <a href="#detail">yellow</a>
        <span class="ui-li-count">...</span>
    </li>
    <li>
        <a href="#detail">blue</a>
        <span class="ui-li-count">hit</span>
    </li>
</ul>

리스트 컬럼에 img테그로 썸네일이미지를 표시할 수 있는데, 아이콘 크기로 나타내려면 img테그에 class=ui-li-icon을 추가하면 된다. 썸네일이미지는 html이므로 간단하여 예제는 생략하기로 하겠다.