에스알닷컴

참조 - 삶의 조각들

플립 토글(Flip Toggle)은 한쪽으로 밀어서 선택하도록 하는 UI이다. 주로 on/off 와 같이 둘 중 하나를 선택하는 경우에 사용될 수 있다. jQuery Mobile은 <select>태그에 data-role="slider" 속성을 추가해서 플립 토글 버튼을 만든다. 단, 이때 <option>은 두개만 지정해야 한다.

<div data-role="fieldcontain">

    <label for="onoff">On/Off :</label>

    <select id="onoff" name="onoff" data-role="slider">

        <option value="off">OFF</option>

        <option value="on" selected>ON</option>

    </select>

</div>

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

참조 - 삶의 조각들

체크박스와 라디오버튼은 사용자의 선택을 입력받는 양식이다. jQuery Mobile은 두 양식 모두 <fieldset data-role="controlgroup">태그로 감싸서 그룹화 시킨다.

<fieldset data-role="controlgroup" data-type="horizontal | vertical">

    <legend>그룹제목 :</legend>

    //체크박스 또는 라디오버튼 목록

</fieldset>

체크박스

체크박스(checkbox)는 다중 선택이 가능하다.

<div data-role="fieldcontain">

    <fieldset data-role="controlgroup" data-type="horizontal">

        <legend>스마트폰 :</legend>

        <input id="phone1" type="checkbox" name="phone1" />

        <label for="phone1">갤럭시폰</label>

        <input id="phone2" type="checkbox" name="phone1" />

        <label for="phone2">아이폰</label>

        <input id="phone3" type="checkbox" name="phone1" />

        <label for="phone3">넥서스폰</label>

    </fieldset>

</div>

<div data-role="fieldcontain">

    <fieldset data-role="controlgroup">

        <legend>스마트폰 :</legend>

        <input id="phone1" type="checkbox" name="phone2" />

        <label for="phone1">갤럭시폰</label>

        <input id="phone2" type="checkbox" name="phone2" />

        <label for="phone2">아이폰</label>

        <input id="phone3" type="checkbox" name="phone2" />

        <label for="phone3">넥서스폰</label>

    </fieldset>

</div>

라디오버튼

라디오버튼(radio button)은 단일 선택이 가능하다. 

<div data-role="fieldcontain">

    <fieldset data-role="controlgroup" data-type="horizontal">

        <legend>스마트폰 :</legend>

        <input id="phone1" type="checkbox" name="phone1" />

        <label for="phone1">갤럭시폰</label>

        <input id="phone2" type="checkbox" name="phone1" />

        <label for="phone2">아이폰</label>

        <input id="phone3" type="checkbox" name="phone1" />

        <label for="phone3">넥서스폰</label>

    </fieldset>

</div>

<div data-role="fieldcontain">

    <fieldset data-role="controlgroup">

        <legend>스마트폰 :</legend>

        <input id="phone1" type="checkbox" name="phone2" />

        <label for="phone1">갤럭시폰</label>

        <input id="phone2" type="checkbox" name="phone2" />

        <label for="phone2">아이폰</label>

        <input id="phone3" type="checkbox" name="phone2" />

        <label for="phone3">넥서스폰</label>

    </fieldset>

</div>

<input type="checkbox | radio"> 에 사용할 수 있는 data-* 속성

참조 - 삶의 조각들

select 양식은 여러개의 항목 중에서 하나를 선택할 수 있는 UI이다. <select>태그를 사용해서 표현한다.

단순히 <select>태그를 사용하면 각 모바일 기기에서 제공하는 입력 도구가 나오기 때문에 통일성이 없다. 모바일 기기에 상관없이 동일한 UI가 나오기를 원하면 data-native-menu="false" 속성을 추가한다.

<div data-role="fieldcontain">

    <label for="phoneKind">Select :</label>

        <select id="phoneKind" name="phoneKind" data-native-menu="false">

        <option value="iphone4">iPhone 4</option>

        <option value="iphone5">iPhone 5</option>

        <option value="iphone5s">iPhone 5S</option>

    </select>

</div>

<select> 태그에 사용할 수 있는 data-* 속성

참조 - 삶의 조각들

슬라이더는 볼륨 조절 장치처럼 좌우로 조절할 수 있는 UI이다. jQuery Mobile 은 range 양식을 슬라이더로 만들어 준다.

슬라이더의 min 속성은 최소값, max 속성은 최대값을 지정한다. 슬라이더 조절바의 색상은 date-theme="e" 속성 값을 조정해서, 트랙 색상은 data-track-theme="b" 속성을 조정해서 변경할 수 있다.

<div data-role="fieldcontain">

    <label for="amount">Range :</label>

    <input id="amount" type="range" name="amount" min="0" max="100" value="50" data-theme="e"data-track-theme="b" />

</div>

참조 - 삶의 조각들

HTML5에서는 number, email, url, tel 같은 새로운 입력 양식이 추가되었다. jQuery Mobile에서도 새로 추가된 양식을 사용할 수 있다.

number 양식

<div data-role="fieldcontain">

    <label for="age">Number :</label>

    <input id="age" type="number" name="age" min="1" max="100" value="30" />

</div>

number 양식은 숫자를 입력받는 경우 사용한다. min 속성은 입력받을 수 있는 최소값, max 속성은 입력받을 수 있는 최대값이다.

모바일 장치에서 number 양식이 선택되면 숫자를 입력할 수 있는 숫자 키보드가 나타난다.

email 양식

<div data-role="fieldcontain">

    <label for="email">Email :</label>

    <input id="email" type="email" name="email" value="" />

</div>

모바일 장치에서 email 양식이 선택되면 이메일 주소를 입력할 수 있는 영문 키보드가 나타난다.

url 양식

<div data-role="fieldcontain">

    <label for="url">Url :</label>

    <input id="url" type="url" name="url" value="" />

</div>

모바일 장치에서 url 양식이 선택되면 url을 입력할 수 있는 영문 키보드가 나타난다.

tel

<div data-role="fieldcontain">

    <label for="tel">Tel :</label>

    <input id="tel" type="tel" name="tel" value="" />

</div>

모바일 장치에서 tel 양식이 선택되면 전화번호를 입력할 수 있는 숫자 키보드가 나타난다.

참조 - 삶의 조각들

jQuery Mobile의 폼(form)양식은 표준 HTML 컨트롤에 기반을 둔다. jQuery Mobile은 표준 HTML폼 양식을 그대로 사용하면서 모바일 UI에 맞게 터치하기 편리한 형태로 최적화 한다.

필드 컨테이너

jQuery Mobile은 폼 양식을 정의할 때 각 양식의 간격을 유지하고 구분하기 위해서 라벨과 양식을 감싸는 <div data-role="fieldcontain"> 태그를 제공한다. 필드 컨테이너는 폭이 좁으면 라벨을 양식의 위에 놓고 양식과 양식을 수평선으로 구분한다.

폭이 좁은 경우

폭이 충분한 경우

<div data-role="fieldcontain">

    <label for="name">Name :</label>

    <input id="name" type="text" name="name" value="" />

</div>

필드 컨테이너 안에서 <label>태그의 속성 for의 값과 <input>태그의 속성 id의 값을 일치 시키면 두 태그는 서로 연결된다.

폼 양식 사용 예

<div data-role="content">

    <form id="form" method="post" action="#">

        <div data-role="fieldcontain">

            <label for="name">Name :</label>

            <input id="name" type="text" name="name" />

        </div>

        <div data-role="fieldcontain">

            <label for="memo">Memo :</label>

            <input id="memo" type="textarea" name="memo" />

        </div>

    </form>

</div>

<input type="text">, <textarea> 태그에서 사용가능한 data-* 속성

참조 - 삶의 조각들

jQuery Mobile 은 손가락 터치와 관련된 이벤트를 제공한다.

$(function){

    $("#eventDiv").bind("tap", function(event){

    }

    $("#eventDiv").bind("taphold", function(event){

    }

    $("#이벤eventDiv").bind("swipe", function(event){

        //페이지 이동 코드

    }

    $("#eventDiv").bind("swipeleft", function(event){

        //페이지 이동 코드

    }

    $("#eventDiv").bind("swiperight", function(event){

        //페이지 이동 코드

    }

}

....

<div id="eventDiv">

</div>

참조 - 삶의 조각들

jQuery Mobile Collapsible 블록은 해당 블록으로 감싼 컨텐츠 영역을 접었다 펼수 있다.

Collapsible 블록은 컨텐츠를 감싸는 <div data-role="collapsible"> 태그 안에 제목을 표시하는 <h> 태그와 나머지 부분이 내용이 된다. <h>태그가 여러개인 경우 가장 먼저 나오는 <h>태그가 제목이 되고 나머지는 내용에 포함된다. 제목이 되는 <h>태그는 <div> 내의 어디에든 올 수 있다. 즉, 나타나는 순서에 관계없이 첫번째 <h>태그가 제목이 되고 나머지 요소는 표시된 순서대로 내용영역에 표시된다. 내용 영역에는 문자열, jQuery Mobile 컴포넌트 등 표현 가능한 모든 것이 올 수 있다.

<div data-role="collapsible">

    <h3>Collapsible Title</h3>
    <p>    
        Collapsible Block's Contents
    </p>
</div>

블록이 접힌 상태   블록이 열린 상태

Collapsible 블록은 기본적으로 접힌 상태에서 표시된다. 펼처진 상태에서 표시되기를 원하면 <div>태그에 속성값 data-collapsed="false" 를 추가한다.

여러개의 Collapsible 블록을 하나의 그룹 안에서 상호작용하도록 하고 싶으면 동일한 그룹안에 포함시키고자 하는 Collapsible 블록들을 <div data-role="collapsible-set">태그로 감싸주면 된다. 동일한 그룹안의 Collapsible 블록들은 하나의 블록만 펼처질수 있다. 즉, 하나의 블록을 펼치면 다른 블록은 접힌상태로 표시된다.

<div data-role="collapsible-set">

    <div data-role="collapsible">

        <h3>Collapsible Title 1</h3>
        <p>    
            Collapsible Block 1's Contents
        </p>
    </div>

    <div data-role="collapsible">

        <h3>Collapsible Title 2</h3>
        <p>    
            Collapsible Block 2's Contents
        </p>
    </div>

</div>

두개의 Collapsible 블록이 하나의 그룹으로 묶인 화면

처음 표시될 때 특정 블록이 펼처진 상태로 표시되기를 원하면 해당 블록에 data-collapsed="false" 속성을 추가하면 된다.

다음 이미지는 동일한 그룹내의 Collapsible 블록 중 하나를 선택한 모습이다.

첫번째 Collapsible 블록 선택   두번째 Collapsible 블록 선택

<div data-role="collapsible">에 사용 가능한 속성

<div data-role="collapsible-set">에 사용 가능한 속성