15. jQuery Mobile 리스트

Index

13. jQuery Mobile 공통 푸터바

14. jQuery Mobile 아이콘(data-icon, data-iconpos, 사용자 정의 아이콘)

15. jQuery Mobile 리스트

16. jQuery Mobile 그리드 레이아웃

17. jQuery Mobile Collapsible 블록

 

 

jQuery Mobile 은 HTML 목록 태그인 <ul>, <ol>을 사용해서 리스트를 만든다.

 

 

jQuery Mobile 에서 제공하는 리스트 형태 중에서 가장 기본적인 형태로서 <ul data-role="listview"> 로 정의한다. 리스트의 각 항목은 <li>태그로 표현한다.

 

<div data-role="content">

    <ul data-role="listview">

        <li>list 0</li>

        <li>list 1</li>

        <li>list 2</li>

        <li>list 3</li>

        <li>list 4</li>

        <li>list 5</li>

    </ul>

</div>

 

 

 

리스트에 표시되는 항목 앞에 순차번호를 붙이기 위해서는 <ol>태그를 사용한다.

 

<div data-role="content">

    <ol data-role="listview">

        <li>list 0</li>

        <li>list 1</li>

        <li>list 2</li>

        <li>list 3</li>

        <li>list 4</li>

        <li>list 5</li>

    </ol>

</div>

 

 

 

<li>태그에 <a>태그를 넣으면 해당항목을 탭할 수 있다. 이 경우에 우측에 화살표(arrow-r)아이콘이 표시된다. 디폴트로 표시되는 아이콘을 변경하고 싶으면 <a>태그에 data-icon 속성을 추가한다. 선택가능한 아이콘은 "jQuery Mobile 아이콘"를 참조

 

<div data-role="content">

    <ul data-role="listview">

        <li><a href="#">list 0</a></li>

        <li><a href="#">list 1</a></li>

        <li><a href="#">list 2</a></li>

        <li><a href="#">list 3</a></li>

        <li><a href="#">list 4</a></li>

        <li><a href="#">list 5</a></li>

    </ul>

</div>

 

 

 생성된 리스트의 상하좌우에 여백을 주고 싶을 때는 <ul>태그에 data-inset="true" 속성을 추가한다.

 

<div data-role="content">

    <ul data-role="listview" data-inset="true">

        <li><a href="#">list 0</a></li>

        <li><a href="#">list 1</a></li>

        <li><a href="#">list 2</a></li>

        <li><a href="#">list 3</a></li>

        <li><a href="#">list 4</a></li>

        <li><a href="#">list 5</a></li>

    </ul>

</div>

 

 

 

리스트의 항목을 그룹핑해서 구분하는 항목 구분자를 추가할 수 있다. 방법은 <li>태그에 data-role="list-divider" 속성을 추가하면 된다. 

 

<div data-role="content">

    <ul data-role="listview" data-inset="true">

        <li data-role="list-divider">항목1</li>

        <li><a href="#">list 0</a></li>

        <li><a href="#">list 1</a></li>

        <li data-role="list-divider">항목2</li>

        <li><a href="#">list 2</a></li>

        <li><a href="#">list 3</a></li>

    </ul>

</div>

 

 

 

jQuery Mobile 리스트는 리스트 항목을 검색할 수 있는 기능을 제공한다. 검색가능한 리스트로 만들기 위해서는 data-filter="true" 속성을 <ul>태그에 추가한다.

 

<div data-role="content">

    <ul data-role="listview" data-inset="true" data-filter="true">

        <li><a href="#">list 1</a></li>

        <li><a href="#">list 2</a></li>

        <li><a href="#">list 3</a></li>

        <li><a href="#">list 4</a></li>

    </ul>

</div>

 

필터링하기전 모습   필터링한 모습

 

 

지금까지의 리스트들은 리스트 항목 전체에 링크가 걸려서 아무곳이나 탭해도 이동을 했다. 이와는 다르게 항목을 두개 영역으로 나누어서 왼쪽에는 정보를 표시하고 오른쪽에는 버튼을 표시한다.

 

방법은 <li>태그에 두개의 <a>태그를 넣어주면 두번째 <a>태그가 Split 버튼으로 만들어진다. 두번째 <a>태그로 감싸는 텍스트는 Split 버튼 위에 마우스를 두었을때 나타나는 풍선도움말에 표시된다.

 

 

Split 버튼의 아이콘은 기본적으로 우측 화살표가 표시된다.

 

<div data-role="content">

    <ul data-role="listview" data-inset="true">

        <li><a href="#">list 1</a><a href="#">Split Button</a></li>

        <li><a href="#">list 2</a><a href="#">Split Button</a></li>

        <li><a href="#">list 3</a><a href="#">Split Button</a></li>

        <li><a href="#">list 4</a><a href="#">Split Button</a></li>

    </ul>

</div>

 

 

 

아이콘을 변경하기 위해서는 <ul>태그에 data-split-icon="아이콘명" 속성을 추가한다. 선택가능한 아이콘은 "jQuery Mobile 아이콘"를 참조

 

<div data-role="content">

    <ul data-role="listview" data-inset="true" data-split-icon="plus">

        <li><a href="#">list 1</a><a href="#">Split Button</a></li>

        <li><a href="#">list 2</a><a href="#">Split Button</a></li>

        <li><a href="#">list 3</a><a href="#">Split Button</a></li>

        <li><a href="#">list 4</a><a href="#">Split Button</a></li>

    </ul>

</div>

 

 

 

jQuery Mobile 리스트의 항목에 썸네일을 추가하기 위해서는 <a>태그 맨 앞에 <img>태그를 추가하면 된다. jQuery Mobile은 80x80 픽셀로 이미지 사이즈를 자동으로 조정한다. 큰 이미지를 지정해도 80x80 사이즈로 조정된다. 단, 80x80 보다 작은 이미지는 커지지 않고 남는 공간은 빈 공간이 생긴다.

 

<div data-role="content">

    <ul data-role="listview" data-inset="true">

        <li><a href="#"><img src="/car/thumbnail.png">list 1</a><a href="#">Split Button</a></li>

        <li><a href="#"><img src="/car/thumbnail.png">list 2</a><a href="#">Split Button</a></li>

        <li><a href="#"><img src="/car/thumbnail.png">list 3</a><a href="#">Split Button</a></li>

    </ul>

</div>

 

 

 

jQuery Mobile 리스트의 항목에 아이콘을 추가하기 위해서는 <a>태그 맨 앞에 <img class="ui-li-icon">태그를 추가하면 된다. jQuery Mobile은 아이콘의 사이즈로 12x12 를 사용한다.jQuery Mobile은 12x12 픽셀로 이미지 사이즈를 자동으로 조정한다. 큰 이미지를 지정해도 12x12 사이즈로 조정된다. 단, 12x12 보다 작은 이미지는 커지지 않는다.

 

<div data-role="content">

    <ul data-role="listview" data-inset="true">

        <li><a href="#"><img src="/car/thumbnail.png" class="ui-li-icon">list 1</a><a href="#">Split Button</a></li>

        <li><a href="#"><img src="/car/thumbnail.png" class="ui-li-icon">list 2</a><a href="#">Split Button</a></li>

        <li><a href="#"><img src="/car/thumbnail.png" class="ui-li-icon">list 3</a><a href="#">Split Button</a></li>

    </ul>

</div>

 

 

 

jQuery Mobile 리스트의 항목에는 카운트 버블을 표시할 수 있다. 카운트 버블은 해당 항목의 컨텐츠 갯수 또는 조회수 등을 표시하는데 사용할 수 있다. 카운트 버블에는 숫자 및 문자열도 가능하다.카운트 버블을 표시하기 위해서는 <li>태그에 <span class="ui-li-count">를 추가하면 된다.

 

<div data-role="content">

    <ul data-role="listview" data-inset="true">

        <li data-role="list-divider" >구분1<span class="ui-li-count">2</span></li>
        <li><a href="#">list 1<span class="ui-li-count">IT</span></a></li>
        <li><a href="#">list 2<span class="ui-li-count">자전거</span></a></li>
        <li data-role="list-divider" >구분2<span class="ui-li-count">1</span></li>
        <li><a href="#">list 3<span class="ui-li-count">자동차</span></a></li>

    </ul>

</div>

 

 

 

jQuery Mobile 은 리스트의 항목의 내용을 다양한 방법으로 표현할 수 있도록 해준다. 제목은 <h>태그로 표시, 내용은 <p>태그로 표시할 수 있다. 강조는 <strong>태그를 사용하면 된다. 항목표시영역의 우측 상단에는 특정 내용을 표시하기 위해서는 <p>태그에 class="ui-li-aside" 속성을 추가한다.

 

<div data-role="content">

    <ul data-role="listview" data-inset="true">

        <li data-role="list-divider" >구분1<span class="ui-li-count">2</span></li>
        <li><a href="#"><h3>텍스트서식</h3>
                 <p>다양하고 체계적으로 표현하기 위한 서식 규칙을 제공한다.</p>
                 <p class="ui-li-aside">02:30 AM</p>
             </a></li>
       <li><a href="#"><h3>텍스트서식</h3>
                <p>다양하고 체계적으로 표현하기 위한 서식 규칙을 제공한다.</p>
                <p class="ui-li-aside">02:30 AM</p>
            </a></li>
       <li data-role="list-divider" >구분2<span class="ui-li-count">1</span></li>
       <li><a href="#"><h3>텍스트서식</h3>
                <p>다양하고 체계적으로 표현하기 위한 서식 규칙을 제공한다.</p>
                <p class="ui-li-aside">02:30 AM</p>
            </a></li>

    </ul>

</div>

 

 

 

 

jQuery Mobile 리스트는 중첩 리스트 표현이 가능하다. 중첩 리스트는 리스트항목 하위에 새로운 리스트가 있는 구조로 계층 구조의 데이터를 표현할 때 사용할 수 있다. 중첩 리스트의 표현은 <li>태그 안에 <ul>태그를 넣음으로써 표현이 가능하다.

 

<ul>태그를 가지고 중첩 리스트를 표현하면 jQuery Mobile은 내부적으로 하위 리스트에 자동으로 page, header, footer 영역을 추가한다.

 

<div data-role="content">

    <ul data-role="listview" data-inset="true">

        <li>list 0

            <ul>

                <li>list 0-1</li>

                <li>list 0-2</li>

            </ul>

        </li>

        <li>list 1</li>

        <li>list 2

            <ul>

                <li>list 2-1</li>

                <li>list 2-2</li>

            </ul>

        </li>

    </ul>

</div>

 

리스트   list 0 항목을 선택해서 중첩 리스트를 연 상태

 

 

<ul data-role="listview">에 사용할 수 있는 data-* 속성

data-* 속성	설명	값
data-count-theme	카운트 버블 테마	swatch letter (a-z)
data-divider-theme	항목 구분자 테마	swatch letter (a-z)
data-filter	필터링하기 위한 검색 입력란 추가	true | false (default)
data-filter-placeholder	검색 입력란의 힌트 문자열	string
data-filter-theme	검색 입력란의 테마	swatch letter (a-z)
data-inset	여백 주기	true | false (default)
data-split-icon	Split 버튼 아이콘	home|delete|plus|arrow-u|arrow-d|check |gear|grid|star|custom|arrow-r|arrow-l |minus|refresh|forward|back|alert|info|search
data-theme	리스트 테마	swatch letter(a-z)

 

 

<li>에 사용할 수 있는 data-* 속성

data-* 속성	설명	값
data-icon	링크도 항목 오른쪽 끝 아이콘	home|delete|plus|arrow-u|arrow-d|check |gear|grid|star|custom|arrow-r|arrow-l |minus|refresh|forward|back|alert|info|search
data-role	항목 구분자 여부	list-divider
data-theme	항목 테마	swatch letter(a-z)