jQuery Mobile 2

jQuery Mobile 페이지

여기서는 jQuery Mobile의 기본 사용 방법에 중점을 맞춰 살펴봅니다. jQuery Mobile의 가장 기본적인 구성 요소는 페이지입니다. 페이지를 만들려면 div 태그를 만들고 div의 data-role 속성에 page를 입력합니다.

							<body>	
								<div data-role="page">
									
								</div>
							<body>							
						

페이지 안은 헤더와 콘텐트, 푸터로 레이아웃을 구성합니다. 페이지와 같은 방법으로 div 태그의 data-role 속성에 각기 header, content, footer를 입력합니다. 간략하게 jQuery Mobile이 어떠한 형식으로 화면을 구성하는지, 아래의 코드처럼 내용을 입력하고 실행해 봅시다. listview와 관련된 내용은 다음에 다룹니다.

							<body>
								<div data-role="page">
									<div data-role="header">
										<h1>Mobile</h1>
									</div>
									<div data-role="content">
										<ul data-role="Listview">
											<li><a href="#">List Item 1</a></li>
											<li><a href="#">List Item 2</a></li>
											<li><a href="#">List Item 3</a></li>
											<li><a href="#">List Item 4</a></li>
										</ul>
									</div>
									<div data-role="footer">
										<h1>footer</h1>
									</div>
								</div>
							</body>							
						

지금까지 플러그인과 다르게 별도의 메서드를 사용하지 않아도 모두 자동으로 구성됩니다.

jQuery Mobile에서 페이지를 이동하려면 아래 소스코드처럼 여러 개의 페이지를 생성하고 a 태그의 href 속성에 id를 입력합니다.

							<body>
								<div data-role="page">
									<div data-role="header">
										<h1>Mobile</h1>
									</div>
									<div data-role="content" id="first_page">
										<ul data-role="Listview">
											<li><a href="#">List Item 1</a></li>
											<li><a href="#">List Item 2</a></li>
											<li><a href="#">List Item 3</a></li>
											<li><a href="#">List Item 4</a></li>
										</ul>
									</div>
									<div data-role="footer">
										<h1>footer</h1>
									</div>
								</div>
								<div data-role="page" id="second_page">
									<div data-role="header">
										<h1>Mobile</h1>
									</div>
									<div data-role="content">
										<p>Lorem ipsum dolor sit amet</p>
									</div>
									<div data-role="footer">
										<h1>footer</h1>
									</div>
								</div>
							</body>						
						

이제, 첫 번째 페이지에서 두 번째 페이지로 넘어갈 수 있습니다. 아이폰처럼 뒤로 가기 버튼을 만들고 싶으면 아래의 코드처럼 페이지의 data-add-back-btn 속성을 true로 입력합니다.

							<body>
								<div data-role="page">
									
								</div>
								<div data-role="page" id="second_page" data-add-back-btn="true" >
								</div>
							</body>						
						

웹 페이지를 실행하면 리스트의 요소를 누르면 다음 페이지로 이동합니다. 페이지가 이동할 때 페이지가 왼쪽으로 슬라이드하는 효과를 함께 볼 수 있스습니다. 또한 뒤로 가기 버튼이 자동으로 생성됩니다.

이전 예제에서 페이지가 이동할 때 아이폰과 같이 페이지가 왼쪽으로 슬라이드하며 전환됩니다. JQuery Mobile은 여러 가지 페이지 이동 방식을 제공하니다.

  1. ◈ slide
  2. ◈ slideup
  3. ◈ slidedown
  4. ◈ slidepop
  5. ◈ fade
  6. ◈ flip

data-transition 속성에 아래 코드처럼 모든 속성을 입력합니다. 움직이는 영상은 직접 실행해 확인해 보세요.

							<ul data-role="Listview">
								<li><a href="#second_page" data-transition="slide">List Item 1</a></li>
								<li><a href="#second_page" data-transition="slideup">List Item 2</a></li>
								<li><a href="#second_page" data-transition="slidedown">List Item 3</a></li>
								<li><a href="#second_page" data-transition="pop">List Item 4</a></li>
								<li><a href="#second_page" data-transition="fade">List Item 5</a></li>
								<li><a href="#second_page" data-transition="flip">List Item 6</a></li>
							</ul>				
						

또한, data-rel 속성을 dialog로 입력하면 다이얼로그 형태로 페이지가 전환됩니다. 이 때도 data-transition 속성을 사용할 수 있습니다.

							<ul data-role="Listview">
								<li><a href="#second_page" data-transition="slide">List Item 1</a></li>
								<li><a href="#second_page" data-transition="slideup">List Item 2</a></li>
								<li><a href="#second_page" data-transition="slidedown">List Item 3</a></li>
								<li><a href="#second_page" data-transition="pop">List Item 4</a></li>
								<li><a href="#second_page" data-transition="fade">List Item 5</a></li>
								<li><a href="#second_page" data-transition="flip">List Item 6</a></li>

								<li><a href="#second_page" data-rel="dialog">List Item 7</a></li>
								<li><a href="#second_page" data-rel="dialog" data-transition="pop">List Item 8</li>
								<li><a href="#second_page" data-rel="dialog" data-transition="slidedown">List Item 9</li>
								<li><a href="#second_page"  data-rel="dialog" data-transition="flip">List Item 10</li>
							</ul>	
						

data-rel 속성을 dialog로 입력하면 대화창의 형태로 페이지가 전환됩니다.

같은 웹 페이지가 아닌 다른 파일의 페이지로 전환하는 방법은 이후에 알아 봅시다.