JQuery Mobile 헤더와 푸터바 + 예제

툴바

- 다른 페이지로 이동이나 페이지 관련 처리 기능을 모은 사용자 인터페이스

- 링크,버튼,텍스트로 구성된 바의 형태

- 화면 위쪽이나 아럐쪽에 위치하여 화면 구성에 중요한 역할을 한다.

이 때, 제이쿼리 모바일에서는 두 종류의 기본 툴바를 제공한다.

- 헤더 영역과 푸터 영역의 푸터바 ( 콘텐츠 영역과는 다른 색상으로 구별되어 표현된다 )

<div data-role="header"></div> 헤더바

<div data-role="footer"></div> 푸터바

헤더바

헤더 문자열

- 헤더 영역 : 왼쪽, 제목 문자열, 오른쪽 영역

- 제목 영역의 공간은 제한되어 있기 때문에 문자열이 길어지면 자동으로 생략 기호로 대체된다.

- 헤더바의 문자열은 주로 페이지 제목을 표시하며, <h1>~<h6> 제목 태그 중 선택이 가능하다.

- 헤더바가 없는 페이지 생성도 가능하다.

헤더 버튼

- 보통 중앙에 표시되는 페이지 제목의 좌우에 버튼이 하나, 또는 최대 두 개까지 표시된다.

- data-role 속성의 header 설정한, 헤더 컨테이너 영역에서 <a> 태그를 쓰면 자동으로 버튼으로 변환된다.

- 첫 번째 링크는 왼쪽 버튼, 두 번째 링크는 오른쪽 버튼이 된다.

- 버튼의 너비는 문자열 길이에 따라서 증가한다.

이제, 헤더바를 만드는 연습을 해보자.

헤더바에서 버튼 만들기 예제

<div data-role="header" data-add-back-btn="true" data-back-btn-text="문자열">
즉, 헤더바인 컨테이너에 data-add-back-btn="true"를 붙이면 뒤로가기 버튼이 생긴다(아이콘까지 같이 생김)
이 때, data-back-btn-text="문자열"을 통해서 버튼 안의 문자열을 넣어줄 수 있다.

헤더바에 링크 두 개를 걸면 순서대로 왼쪽,오른쪽이 된다고 했는데 각각 class="ui-btn-left"와 "ui-btn-right"을 넣어서 반대로 넣을 수도 있다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 페이지1 -->
 <div data-role="page" id="page1">
 	<div data-role="header">
 		<a href="#page2">페이지2</a>
 		<h1>첫번째 페이지</h1>
 		
 	</div>
 	<div data-role="content">
 		<p>컨텐츠영역(content)</p>
 		
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
 
 <!-- 페이지2 -->
 <div data-role="page" id="page2">
 	<div data-role="header">
 		<a href="#page1" data-direction="reverse">페이지1</a>
 		<a href="#page3">페이지3</a>
 		<h1>두번째 페이지</h1>
 	</div>
 	<div data-role="content">
 		<p>콘텐츠영역</p>
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
 
 <!-- 페이지3 -->
 <div data-role="page" id="page3">
 	<div data-role="header" data-add-back-btn="true" data-back-btn-text="뒤로">
 		<!-- header컨테이너에 data-add-back-btn="true" 뒤로가기 버튼,
 		data-back-btn-text="버튼의 문자열" -->
 		<h1>세번째 페이지</h1>
 	</div>
 	<div data-role="content">
 		<p><a href="#page4" data-role="button">페이지4</a></p>
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
 
 <!-- 페이지4 -->
 <!-- 버튼 순서 바꾸고 싶다면 class="ui-btn-right/left"이용 -->
 <div data-role="page" id="page4">
 	<div data-role="header">
 		<a href="#page3" class="ui-btn-right">페이지3</a>
 		<h1>첫번째 페이지</h1>
 		<a href="#page1" class="ui-btn-left">페이지1</a>
 	</div>
 	<div data-role="content">
 		<p>컨텐츠영역(content)</p>
 		
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
 
</body>
</html>

푸터바

- 꼬리말이나 탐색 정보 제공하는 툴바, 탭바

- 모바일 페이지의 마지막 엘리먼트, 콘텐츠 영역의 밑인 페이지 가장 아래쪽

- 헤더바에 비해 사용 형식이 자유롭고 구조는 거의 같다

- data-position="fixed"를 통해 고정시킬 수 있다. (헤더바도 마찬가지)

푸터바 문자열 추가

- 푸터바에도 문자열 표시를 위해 제목 표시를 사용하나 중요도가 낮아 <h4>~<h6>주로 사용

푸터바 버튼 추가

- 헤더바와 동일하게 푸터 컨테이너 안의 <a>태그는 자동으로 버튼화

- 왼쪽에서 하나씩 인라인 방식으로 추가되기 때문에, 여러 개의 버튼이 표시될 수 있다.

푸터바를 만들러 떠나보자.

푸터바 예제

- class="ui-btn" 푸터영역의 버튼을 가운데로 모아준다.
- class="ui-bar" 는 약간의 여유공간을 두고 버튼을 연속으로 배치
- 이 상태에서, 만일 여유공간 없이 모아주고 싶다면
- 따로 <div>를 만들어서 data-role="controlgroup" , data-type="horizontal"(수평방향으로) 적용
- 가운데 정렬을 위해서는 푸터컨테이너에서 style="text-align:center"를 해야한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

 <div data-role="page" id="page1">
	<div data-role="header">
		<a href="#page2" class="ui-btn-right">페이지2</a>
 		<h1>머리말영역</h1>
 	</div>
 	<div data-role="content">
 		<p>컨텐츠영역</p>
 	</div>
 	<!-- ui-btn은 버튼들을 가운데로 모아주는 역할 -->
 	<div data-role="footer" class="ui-btn" data-position="fixed">
 		<a href="#page2">페이지2</a>
 		<a href="#page3">페이지3</a>
 	</div>
</div>

 <div data-role="page" id="page2">
	<div data-role="header" data-add-back-btn="true">
 		<h1>헤더영역</h1>
 		<!-- <a href="#page3" class="ui-btn-right">페이지3</a> -->
 	</div>
 	<div data-role="content">
 		<p>컨텐츠영역</p>
 	</div>
 	<!-- footer컨테이너의 ui-bar는 약간의 여유공간을 두고 버튼을 연속으로 배치
 	 가운데 정렬을 위해서 style="text-align:center"
 	 버튼 사이에 여백을 주고 싶지 않다면 
 	 data-role="controlgroup"이라는 속성을 추가
 	 버튼을 그룹으로 모아서 표시하므로 버튼 사이의 여백 제거
 	 data-type="horizontal" 기본 방향 아니라 수평 방향으로 나열-->
 	<div data-role="footer" class="ui-bar" style="text-align:center"  data-position="fixed">
 		<div data-role="controlgroup" data-type="horizontal" >
 			<a href="#page1">페이지1</a>
 			<a href="#page2">현재페이지</a>
 		</div>
 	</div>
</div>
</body>
</html>

네비게이션바

- 순서 없는 리스트항목들을 하나의 '수평 버튼 바'로 만들어주는 버튼 그룹이다.

- 메뉴바, 탭바

- 모바일 페이지에서 페이지 이동을 쉽게 해주기에 많이 사용

- 헤더바 , 푸터바 모두 네비게이션바 추가가 가능하다.

- 헤더바의 경우, 3개 이상의 버튼이 필요하면 네비게이션바를 사용한다.

- 메뉴바를 위한 목적으로 푸터바에 많이 배치된다.

네비게이션바 추가

- 헤더나 푸터컨테이너 안에 data-role="navbar"속성을 갖는 <div>를 추가한다.

- 위와 같은 태그 안에 <ul>, <li> 태그를 사용하여 비순서 리스트를 정의하면 자동으로 선택 버튼 표현

- <li>태그의 개수만큼 네비게이션 공간이 같은 크기로 분할된다.

- 항목이 많을수록 버튼의 너비는 줄어든다.

- 보통 한 줄에 1~5개 버튼이 생성된다.

- class = "ui-btn-active" 선택된 것처럼 보임
- class = "ui-state-persist" active상태 지속

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert title here</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

 <div data-role="page" id="page1">
 	<div data-role="header">
 		<h1>머리말영역(header)</h1>
 		<div data-role="navbar">
 			<ul>
 				<li><a href="#page2">페이지2</a></li>
 				<li><a href="#page3">페이지3</a></li>
 			</ul>
 		</div>
 	</div>
 	<div data-role="content">
 		<p>컨텐츠영역(content)</p>
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<div data-role="navbar">
 			<ul>
 				<li><a href="#" data-icon="bars">메뉴</a></li>
 				<li><a href="#" data-icon="home">홈</a></li>
 				<li><a href="mailto:ho@naver.com" data-icon="mail">연결</a></li>
 			</ul>
 		</div>
 	</div>
 </div>
 
  <div data-role="page" id="page2">
 	<div data-role="header">
 		<h1>머리말영역(header)</h1>
 		<div data-role="navbar">
 			<ul>
 				<li><a href="#page1" data-direction="reverse">페이지1</a></li>			
 				<li><a href="#page2" class="ui-btn-active">페이지2</a></li>
 				<li><a href="#page3">페이지3</a></li>
 			</ul>
 		</div>
 	</div>
 	<div data-role="content">
 		<p>컨텐츠영역(content)</p>
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<div data-role="navbar">
 			<ul>
 				<li><a href="#" data-icon="bars">메뉴</a></li>
 				<li><a href="#" data-icon="home">홈</a></li>
 				<li><a href="mailto:ho@naver.com" data-icon="mail" class="ui-btn-active">연결</a></li>
 			</ul>
 		</div>
 	</div>
 </div>
 
   <div data-role="page" id="page3">
 	<div data-role="header">
 		<h1>머리말영역(header)</h1>
 		<div data-role="navbar">
 			<ul>
 				<li><a href="#page1" data-direction="reverse">페이지1</a></li>			
 				<li><a href="#page2" data-direction="reverse">페이지2</a></li>
 				<li><a href="#page3" class="ui-btn-active">페이지3</a></li>
 			</ul>
 		</div>
 	</div>
 	<div data-role="content">
 		<p>컨텐츠영역(content)</p>
 	</div>
 	<div data-role="footer" data-position="fixed">
 		<div data-role="navbar">
 			<ul>
 				<li><a href="#" data-icon="bars">메뉴</a></li>
 				<li><a href="#" data-icon="home">홈</a></li>
 				<li><a href="mailto:ho@naver.com" data-icon="mail" class="ui-state-persist">연결</a></li>
 				<!-- class="ui-state-persist"는 active(선택상태)가 변경되지 않고 유지됨 -->
 			</ul>
 		</div>
 	</div>
 </div>
</body>
</html>

툴바 표시

기본 모드 : 콘텐츠 영역 바로 위, 바로 밑에 위치

고정 모드 : data-position="fixed"

숨김 모드 : 전체화면 모드 -터치에 따라 나타나며, 숨겨짐

data-position="fixed", data-fullscreen="true"

숨김 모드 적용 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fullscreen</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- 본문 영역을 fullscreen으로 확대할 때는 header와 footer영역 모두 
data-fullscreen="true", data-position="fixed" 처리한다. //픽스가 양쪽 다 되어야함. -->
 <div data-role="page" id="page1">
 	<div data-role="header" data-fullscreen="true" data-position="fixed">
 		<h1>머리말영역(header)</h1>
 	</div>
 	<div data-role="content">
 		<p>컨텐츠영역(content)</p>
 	</div>
 	<div data-role="footer" data-position="fixed" data-fullscreen="true">
 		<h4>꼬리말영역(footer)</h4>
 	</div>
 </div>
</body>
</html>

지속형 푸터바 설정

- 여러 페이지의 푸터바가 동일하다면, 페이지 이동시에도 화면 하단에 고정하여 표시가능

- 각 페이지의 푸터 컨테이너의 data-id 속성값으로 같은 푸터 아이디 설정

- 같은 data-id 속성값이 지정된 푸터는 페이지 전환되어도 이전 푸터바가 변경되지 않고 유지

- 선택된 버튼의 활성 상태 유지는 ui-btn-active 속성 이외에 ui-state-persist 클래스 속성 추가

'WEB' 카테고리의 다른 글

JQEURY MOBILE 모바일 버튼과 리스트뷰 (0)	2022.07.08
JQUERY MOBILE WEB 기초 (0)	2022.07.06
제이쿼리 예제(2) (0)	2022.07.06
Ajax(Asynchronous JavaScript And XML, 비동기적 자바스크립트와 XML)와 JSON (0)	2022.07.05
jQuery와 예제 (0)	2022.07.04

ADUNG_DEVELOP

JQuery Mobile 헤더와 푸터바 + 예제

툴바

헤더바

푸터바

네비게이션바

툴바 표시

'WEB' 카테고리의 다른 글

티스토리툴바

JQuery Mobile 헤더와 푸터바 + 예제

툴바

헤더바

푸터바

네비게이션바

툴바 표시

'WEB' 카테고리의 다른 글

관련글

티스토리툴바