jQuery Mobile 7

jQuery Mobile 툴바

지금부터는 헤더와 푸터 부분에 대해서 살펴봅니다. 헤더와 푸터 부분을 합쳐서 툴바라고 합니다. 헤더와 푸터에는 data-position 속성을 입력할 수 있습니다. data-position 속성은 툴바의 위치 형태를 지정합니다. data-position 속성은 inline이나 fixed를 입력합니다.

data-position 속성

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

기본적으로 data-position 속성은 inline으로 지정되므로 따로 입력할 필요가 없습니다. data-position 속성을 fixed로 사용하면 툴바의 위치가 고정됩니다.

jQuery Mobile은 헤더에 기본적으로 두 개의 버튼을 놓을 수 있습니다. a 태그를 아래의 소스코드처럼 입력하면 자동으로 버튼이 만들어 집니다.

툴바 버튼 생성

							<div data-role="header" data-position="fixed">
								<a href="#" data-icon="home">Home</a>
								<h1>Mobile</h1>
								<a href="#" data-icon="gear">Settings</a>
							</div>
						

h1 태그의 왼쪽과 오른쪽에 있므으로 버튼의 위치가 지정된 것이 아니라, 버튼이 자동으로 순서대로 지정됩니다. 버튼의 위치를 명확하게 표시하고 싶을 때는 class 속성에 ui-btn-left나 ui-btn-right를 입력해야 합니다.

툴바 버튼의 클래스

							<div data-role="header" data-position="fixed">
								<a href="#" data-icon="home" class="ui-btn-left">Home</a>
								<h1>Mobile</h1>
								<a href="#" data-icon="gear" class="ui-btn-right">Settings</a>
							</div>
						

헤더와 다르게 푸터에는 버튼을 원하는 만큼 생성할 수 있습니다. 하지만, 화면의 너비를 벗어나면 예쁘지 않으므로 세 개나 네 개가 가장 적당합니다. 푸터에 버튼을 만드는 것도 간단히 a 태그를 입력하면 됩니다.

푸터 툴바 버튼

							<div data-role="footer" data-position="fixed">
								<a href="#" data-icon="plus">Add</a>
								<a href="#" data-icon="delete">Delete</a>
								<a href="#" data-icon="refresh">Refresh</a>
							</div>