jQuery Mobile 8

jQuery Mobile 내비게이션 바

안드로이드나 아이폰과 같은 스마트폰은 탭 바나 내비게이션 바라고 부르는 것이 있습니다. 아래 코드부터 실행하고 결과를 살펴보며 이야기합시다. 헤더나 푸터에 div 태그를 생성하고 data-role 속성을 navbar로 입력합니다. 이어서 해당 div 태그 안에 ul 태그로 리스트를 만들면, 내비게이션바가 생성됩니다.

내비게이션바

							<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 data-role="navbar">
									<ul>
										<li><a href="#">One</a></li>
										<li><a href="#">Two</a></li>
										<li><a href="#">Three</a></li>
										<li><a href="#">Four</a></li>
										<li><a href="#">Five</a></li>
									</ul>
								</div>
							</div>	
						

내비게이션 바는 헤더나 푸터에 함께 삽입됩니다. 다섯 개까지는 가로로 배치되지만, 여섯 개 이후부터는 행을 추가해 생성하니 유의해 주세요. 실행 결과를 보면 알겠지만 여섯 개 이상을 사용하는 것은 무리입니다. 다섯 개까지만 사용하는 것을 추천합니다.

내비게이션 바 안에 들어 있는 하나하나의 요소에 data-icon 속성을 입력하면 툴바의 버튼과 마찬가지로 아이콘을 넣을 수 있습니다.

내비게이션 바의 아이콘 설정

							<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 data-role="navbar">
									<ul>
										<li><a href="#" data-icon="grid">One</a></li>
										<li><a href="#" data-icon="star">Two</a></li>
										<li><a href="#" data-icon="alert">Three</a></li>
										<li><a href="#" data-icon="info">Four</a></li>
										<li><a href="#" data-icon="gear">Five</a></li>
									</ul>
								</div>
							</div>
						

내비게이션 버튼을 활성화 상태로 보이게 하고 싶으면 아래 코드 처럼 class 속성을 ui-btn-active로 입력합니다.

내비게이션 바의 버튼 상태 클래스

							<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 data-role="navbar">
									<ul>
										<li><a href="#" data-icon="grid" class="ui-btn-active" >One</a></li>
										<li><a href="#" data-icon="star">Two</a></li>
										<li><a href="#" data-icon="alert">Three</a></li>
										<li><a href="#" data-icon="info">Four</a></li>
										<li><a href="#" data-icon="gear">Five</a></li>
									</ul>
								</div>
							</div>