jQuery Mobile 시작하기 2

 

jQuery Mobile 시작하기 2

 

page를 다이얼 로그 박스로 사용하기2
이동할 페이지 자체를 다이얼로그 박스로 만든 방법이 있습니다.

<div data-role="page" id="pageone">
			<div data-role="header</div>
			<div data-role="content">
    			<a href="#pagetwo">두번째 페이지로 이동</a>
  			</div>
		</div>
		<div data-role="page" id="pagetwo" data-dialog="true">
			<div data-role="header"></div>
  		<div data-role="content">
    		<a href="#pageone">첫번째 페이지로 이동</a>
  		</div>

 

다이얼로그로 만들고 싶은 페이지 div에 data-dialog속성을 "true"로 주면 됩니다.

 

 

 

뒤로가기 버튼 넣기

페이지 이동을 하였으면 다시 원래 페이지로 돌아가야 겠죠?

<div data-role="page" id="pageone"> <div data-role="header"></div> <div data-role="content"> <a href="#pagetwo">두번째 페이지로 이동</a> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="header" data-add-back-btn="true" data-back-btn-text="Go back"><h1>두번째 페이지</h1></div> <div data-role="content"> <a href="#pageone">첫번째 페이지로 이동</a> </div> </div>

두번째 페이지 header 태그에 data-add-back-btn 속성을 "true" 주면 됩니다.
버튼의 텍스트를 변경하려면 data-back-btn-text 속성을 추가해 주면 됩니다.

 

 

 

jQuery Mobile 페이지 이동효과 넣기

페이지 이동 시에 효과를 넣어 줄 수 도 있습니다.

slide, slideup, slidedown, pop, fade, flip 등이 있으며

a태그의  data-transition 속성에 효과를 넣어줍니다.

<div data-role="page" id="pageone"> <div data-role="content"> <a href="#pagetwo" data-transition="flip">두번째 페이지로 이동</a> <a href="#pagetwo" data-transition="slidedown">두번째 페이지로 이동</a> </div> </div> <div data-role="page" id="pagetwo"> <div data-role="content"> <a href="#pageone">첫번째 페이지로 이동</a> </div> </div>

 

 

jQuery Mobile의 리스트
기존의 <ul> 태그나 <ol>태그에 data-role 속성을 listview로 입력하면
모바일 장치에서 사용하는 리스트와 같은 모습으로 바꿔줍니다.

<ul data-role="listview"> <li><a href="#">리스트 아이템1</a></li> <li><a href="#">리스트 아이템2</a></li> <li><a href="#">리스트 아이템3</a></li> </ul>

 

리스트 안에는 리스트의 요소를 구분할 수 있는 Divider를 삽입 할 수 있습니다.

<ul data-role="listview"> <li><a href="#">리스트 아이템1</a></li> <li data-role="list-divider">Divider</li> <li><a href="#">리스트 아이템2</a></li> <li data-role="list-divider">Divider</li> <li><a href="#">리스트 아이템3</a></li> </ul>

 

jQuery Mobile의 INPUT 태그
jQuery Mobile은 모바일 장치에 맞는 Input 태그를 설정할 수 있습니다.
기존의 HTML의 input 태그를 사용하여도 모바일에 맞게 변환 해 주지만
div에 data-role 속성을 fieldcontain으로 주어서 감싸면 형태를 자동으로 잡아줍니다.

<div data-role="fieldcontain"> <label for="textinput">Text input</label> <input type="text" id="textinput"/> </div> <div data-role="fieldcontain"> <label for="pwdinput">password input</label> <input type="password" id="pwdinput"/> </div>

 

jQuery Mobile의 라디오버튼, 체크박스, 선택박스
jQuery Mobile은 모바일 장치에 맞는 라디오버튼과 체크박스, 선택박스를 만들 수 있습니다.

 

체크박스

<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>checkbox</legend> <input type="checkbox" id="checkbox1"/> <label for="checkbox1">checkbox</label> <input type="checkbox" id="checkbox2"/> <label for="checkbox2">checkbox</label> </fieldset> </div>

input 태그와 마찬가지로 제일 바깥 div태그의 data-role 속성을 'fieldcontain'으로 주어서 감싼뒤,
그 안에 'fieldset' 태그의 data-role 속성을 controlgroup으로 설정합니다.
체크박스에 타이틀이 필요하다면 legend 태그를 이용하여 넣어 줄 수 있습니다.
체크박스는 input 태그의 type을 'checkbox'로 설정한뒤 label 태그로 체크 박스의 이름을 달아주면 됩니다.

fieldset 태그는 자식노드를 그룹으로 묶어주는 역할을 하는 태그이므로 체크박스가 하나만 필요하다면
fieldset 태그로 감싸지 않아도 무방합니다.

 

 

라디오버튼

<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>RADIO BOX</legend> <input type="radio" name="radio" id="radio1"/> <label for="radio1">raido box</label> <input type="radio" name="radio" id="radio2"/> <label for="radio2">radio box</label> </fieldset> </div>

라디오 박스는 체크박스와 사용법이 동일하고 type만 'radio'로 바꾸어 주면 됩니다.
다만 주의하실 점이 input 태그안에 name 속성을 꼭 넣어 주셔야만 제대로 작동합니다.

 

 

선택박스

<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <label for="select">Select Input</label> <select id="select"> <option>선택지1</option> <option>선택지2</option> <option>선택지3</option> <option>선택지4</option> </select> </fieldset> </div>

 

 

선택박스 역시 사용법은 동일하지만 input 태그 대신 select 태그가 들어갑니다.

select 태그 안쪽에 원하는 선택지를 option태그를 이용하여 넣어 주시면 됩니다