에스알닷컴

참조 - 삶의 조각들

jQuery Mobile의 그리드 레이아웃은 CSS 기반의 컬럼을 제공해서 그리드 레이아웃을 구성할 수 있도록 한다. 그리드 레이아웃은 한 행에 최대 5개의 컬럼을 제공한다. 그리드 레이아웃은 작은 사이즈의 컴포넌트를 페이지 상에 배치할 때 사용될 수 있다.

그리드 레이아웃을 그리는 방법은 그리드 외각을 결정하는 <div>태그의 class 속성에 컬럼의 갯수에 따라 ui-grid-a, ui-grid-b, ui-grid-c, ui-grid-d 중 하나를 지정한다. 그리드 안의 각 컬럼에 해당하는 <div>태그의 class 속성에 배치되는 순서에 따라 ui-block-a, ui-block-b, ui-block-c, ui-block-d, ui-block-e 를 차례대로 지정한다.

그리드의 레이아웃 및 컬럼 속성

컬럼수가 2개인 그리드 예제

<div class="ui-grid-a">

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

     ...

</div>

컬럼수가 3개인 그리드 예제

<div class="ui-grid-b">

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

     ...

</div>

컬럼수가 4개인 그리드 예제

<div class="ui-grid-c">

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-d"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-d"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-d"></div>

     ...

</div>

컬럼수가 5개인 그리드 예제

<div class="ui-grid-d">

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-d"></div>

    <div class="ui-block-e"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-d"></div>

    <div class="ui-block-e"></div>

    <div class="ui-block-a"></div>

    <div class="ui-block-b"></div>

    <div class="ui-block-c"></div>

    <div class="ui-block-d"></div>

    <div class="ui-block-e"></div>

     ...

</div>

참조 - 삶의 조각들

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-* 속성

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

참조 - 삶의 조각들

jQuery Mobile에서는 기본적으로 18가지 아이콘을 제공한다.

<a href="#" data-role="button" data-icon="arrow-l">arrow-l</a>

<a href="#" data-role="button" data-icon="arrow-r">arrow-r</a>

<a href="#" data-role="button" data-icon="arrow-u">arrow-u</a>

<a href="#" data-role="button" data-icon="delete">delete</a>

<a href="#" data-role="button" data-icon="plus">plus</a>

<a href="#" data-role="button" data-icon="arrow-d">arrow-d</a>

<a href="#" data-role="button" data-icon="minus">minus</a>

<a href="#" data-role="button" data-icon="check">check</a>

<a href="#" data-role="button" data-icon="gear">gear</a>

<a href="#" data-role="button" data-icon="forward">forward</a>

<a href="#" data-role="button" data-icon="back">back</a>

<a href="#" data-role="button" data-icon="refresh">refresh</a>

<a href="#" data-role="button" data-icon="grid">grid</a>

<a href="#" data-role="button" data-icon="star">star</a>

<a href="#" data-role="button" data-icon="search">search</a>

<a href="#" data-role="button" data-icon="alert">alert</a>

<a href="#" data-role="button" data-icon="info">info</a>

<a href="#" data-role="button" data-icon="home">home</a>

버튼 상에서 아이콘 위치는 data-iconpos="notext|left|right|top|bottom" 속성값을 이용한다.

• notext : 버튼 텍스트는 감추고 아이콘만 보인다
• left : 버튼 텍스트 좌측에 아이콘을 보인다(기본값)
• right : 버튼 텍스트 우측에 아이콘을 보인다
• top : 버튼 텍스트 상단에 아이콘을 보인다
• bottom : 버튼 텍스트 하단에 아이콘을 보인다

기본아이콘 대신 사용자 정의 아이콘을 사용할 수 있다.

.ui-icon-roadrunner {

    background-image : url(roadrunner.png) !important;

    background-repeat : no-repeat !important;

}

<a href="#" data-role="button" data-icon="roadrunner" data-inline="true">roadrunner</a>

참조 - 삶의 조각들

각 페이지의 푸터영역에 동일한 내비게이션바가 포함되는 경우에 각 페이지의 내비게이션바 선택 상태가 보관될 필요가 있다. 즉, A페이지에서 B페이지를 선택해서 넘어갔다가 Back 버튼으로 A페이지로 돌아오는 경우 A페이지에서 선택되었던 내비게이션바의 버튼이 선택된 상태가 유지되기를 원한다면 각 페이지에서 선택되어 있어야 하는 버튼에 class="ui-btn-active ui-state-persist" 속성을 추가해 주면 된다.

A페이지

<div data-role="navbar">
    <ul>
        <li><a href="index.html" class="ui-btn-active ui-state-persist" data-icon="grid">Grid</a></li>
        <li><a href="home.html" data-icon="home">Home</a></li>
    </ul>
</div>

B페이지

<div data-role="navbar">
    <ul>
        <li><a href="index.html" data-icon="grid">Grid</a></li>
        <li><a href="home.html" class="ui-btn-active ui-state-persist" data-icon="home">Home</a></li>
    </ul>
</div>

참조 - 삶의 조각들

jQuery Mobile에서 툴바(Toolbar)는 컨텐트 영역과는 별개의 영역으로 페이지의 상단,하단에 위치하는 영역이다. 툴바에서 헤더바, 푸터바, 내비게이션바가 있다. 툴바는 제목, 버튼 등을 포함한다.

내비게이션바

내비게이션바는 두개 이상의 버튼을 수평으로 나열해서 하나의 탭바를 형성하는 UI 이다. 주로 헤더바나 푸터바 안에 위치하며 최대 5개까지의 버튼을 가질 수 있다. 버튼이 5개를 넘어가면 한줄에 2개씩 멀티 라인을 형성하기 때문에 헤더바나 푸터바에는 위치할 수 없다.

내비게이션바는 <div data-role="navbar"></div> 로 정의한다.

<div data-role="navbar">

    <ul>

        <li><a href="#" data-icon="grid" class="ui-btn-active">Grid</a></li>

        <li><a href="#" data-icon="star">Fav</a></li>

        <li><a href="#" data-icon="gear">Option</a></li>

        <li><a href="#" data-icon="check">Check</a></li>

        <li><a href="#" data-icon="home">Home</a></li>

    </ul>

</div>

페이지가 로딩될때 내비게이션바의 특정 버튼이 선택된 상태로 표시되게 하기 위해서는 버튼을 정의하는 <a> 태그에 class="ui-btn-active" 속성을 추가한다.

내비게이션바의 버튼은 사용자 정의 아이콘을 사용할 수 있다.

<style>

    .nav-glyphish-example .ui-btn .ui-btn-inner {

        padding-top : 40px;

    }

    .nav-glyphish-example .ui-btn .ui-icon {

        width : 30px;

        height : 30px;

        margin-left : -15px;

        box-shadow : none;

        -moz-box-shadow : none;

        -webkit-box-shadow : none;

        -webkit-border-radius : 0;

        border-radius : 0;

    }

    #chat .ui-icon {

        background : url(../image/glyphish/chat.png) 50% 50% no-repeat;

        background-size : 24px 22px;

    }

</style>

<div data-role="navbar" class="nav-glyphish-example">

    <ul>

        <li><a href="#" id="chat" data-icon="custom">Chat</a></li>

        <li><a href="#" data-icon="gear">Option</a></li>

        <li><a href="#" data-icon="check">Check</a></li>

    </ul>

</div>

참조 - 삶의 조각들

jQuery Mobile에서 툴바(Toolbar)는 컨텐트 영역과는 별개의 영역으로 페이지의 상단,하단에 위치하는 영역이다. 툴바에서 헤더바, 푸터바, 내비게이션바가 있다. 툴바는 제목, 버튼 등을 포함한다.

푸터바

푸터바는 페이지 하단에 위치하는 툴바다. 푸터바는 여러개의 버튼을 포함할 수 있다.(헤더바는 좌우 두개의 버튼만 가질 수 있다)

<div data-role="footer" data-position="fixed">

    //푸터 컨텐트가 위치

</div>

data-position="fixed" 속성을 추가하면 푸터바는 페이지 하단에 고정된다. 이 속성을 제거하면 푸터바는 컨텐트의 하단에 붙어서 따라 다닌다.

data-position="fixed" 속성이 없는 경우             data-position="fixed" 속성이 있는 경우

푸터바도 헤더바처럼 한 페이지에 여러개를 추가할수는 있지만 마지막 푸터바만 페이지 하단에 고정되고 나머지는 컨텐트 하단에 붙어 따라 다닌다. 이런 이유 때문에 두개 이상을 추가할 필요가 없다.

푸터바 정의할 때 사용할 수 있는 data-* 속성

* 헤더바와 푸터바가 data-position="fixed" 속성에 의해서 고정된 상태에서 페이지 영역을 전체 화면 보기로 설정하면 스크롤의 상태와 상관없이 사용자의 탭에 의해서 숨기고 나타나게 할 수 있다.

<div data-role="page" data-fullscreen="true">

    <div data-role="header" data-position="fixed"> ... </div>

    <div data-role="content"> ... </div>

    <div data-role="footer" data-position="fixed"> ... </div>

</div>

참조 - 삶의 조각들

jQuery Mobile에서 툴바(Toolbar)는 컨텐트 영역과는 별개의 영역으로 페이지의 상단,하단에 위치하는 영역이다. 툴바에서 헤더바, 푸터바, 내비게이션바가 있다. 툴바는 제목, 버튼 등을 포함한다.

헤더바

헤더바는 페이지 상단에 위치하는 툴바다. 주로 페이지의 제목이나 페이지 내비게이션용 버튼들이 위치한다. 버튼은 좌우 두개의 버튼만 가능하다.

<div data-role="header" data-position="fixed">

    <h1>제목</h1>

    <a href="#">Prev</a>

    <a href="#">Next</a>

</div>

data-position="fixed" 속성을 추가하면 헤더바는 항상 페이지 상단에 위치하게 된다.

한개 이상의 헤더바가 페이지에 존재할 수 있으며 정의된 순서대로 위에서 아래로 위치하게 된다.

<div id="index" data-role="page">
    <div data-role="header">
        <h1>Index</h1>
    </div>
    <div data-role="header">
        <h1></h1>
        <a href="home.html" class="ui-btn-right" data-icon="arrow-r">Home</a>
    </div>
    <div data-role="content">
    </div>

</div>

헤더바에 버튼이 하나인 경우 버튼이 좌측에 위치하게 된다. 우측에 배치하고자 하면 class="ui-btn-right" 속성을 추가한다. 버튼이 두개인 경우에는 자동으로 좌측에 하나 우측에 하나가 배치된다.

헤더바에 타이틀이 없으면 컨텐트 영역과 겹쳐져서 보여진다. 제목이 없더라도 <h1></h1> 을 넣어주면 겹쳐지지 않는다.

헤더바에 백버튼을 넣는 방법은 두가지 방법이 있다.

첫번째 방법은 페이지 정의용 <div> 태그에 data-add-back-btn="true" 속성을 추가하는 방법이다. 이때, 기본 표시 명칭은 "Back" 이다. 이 글자를 변경하기 위해서는 data-back-btn-text="버튼명" 속성을 추가해서 명칭을 변경한다.

두번재 방법은 헤더바에 data-rel="back" 속성을 갖는 <a> 태그를 추가한다. 이때 <a> 태그의 속성 href 는 무시된다. 

헤더바 정의할 때 사용할 수 있는 data-* 속성

* 헤더바와 푸터바가 data-position="fixed" 속성에 의해서 고정된 상태에서 페이지 영역을 전체 화면 보기로 설정하면 스크롤의 상태와 상관없이 사용자의 탭에 의해서 숨기고 나타나게 할 수 있다.

<div data-role="page" data-fullscreen="true">

    <div data-role="header" data-position="fixed"> ... </div>

    <div data-role="content"> ... </div>

    <div data-role="footer" data-position="fixed"> ... </div>

</div>

참조 - 삶의 조각들

jQuery Mobile 에서 컨텐트는 <div data-role="content"></div> 로 정의 된다. 컨텐트에는 데이터 및 jQuery Mobile 의 UI요소들이 배치된다.

<div id="index" data-role="page">

    <div data-role="header"></div>

    <div data-role="content">

        //jQuery Mobile 의 UI 요소들이 배치된다.

    </div>

    <div data-role="footer"></div>

</div>

컨텐트 정의시에 사용할수 있는 data-* 속성은 다음과 같다.