안녕하세요!!
이번에 포스팅할 jQuery Mobile 는 네비게이션 바(Navigation Bars) 입니다.
일반적으로 한 페이지의 구성은 상단, 내용, 하단 이렇게 3개의 단위로 나뉘어 지는데 네비게이션 바의 역할은 그 중간에 버튼등을 삽입하여 다른 페이지로 이동을 하는 기능을 합니다.
jQuery Mobile 은 최대한 부하를 줄이고 빠른 페이지 로딩을 추구하기 때문에 네비게이션 바 소스역시 매우 단순합니다. 일단 백번의 설명보다는 한번 소스를 보는게 낫겠지요.
기본적인 소스 구성은 아래와 같습니다.
<div data-role="header">
<div data-role="navbar">
<ul>
<li><a href="#link">홈</a></li>
<li><a href="#link">1 페이지</a></li>
<li><a href="#link">2 페이지</a></li>
</ul>
</div>
</div>
// data-role에서 navbar을 정의 하고 <ul>...</ul> 으로 메뉴를 설정합니다. 정말 깔끔하고 단순합니다.
그럼 이제부터 위의 내용이 적용된 소스를 만들어보겠습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>나의 모바일 홈페이지</h1>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">홈</a></li>
<li><a href="#" data-icon="arrow-r">1 페이지</a></li>
<li><a href="#" data-icon="arrow-l">2 페이지</a></li>
</ul>
</div>
</div>
<div data-role="content">
<p>이곳에 내용을 입력하세요...</p>
</div>
<div data-role="footer">
<h1>Copyright by makand123. All Rights Reserved</h1>
</div>
</div>
</body>
</html>
// 위 소스의 내용을 보면 <div data-role="navbar"> 을 입력하고 그 안에 3개의 버튼을 넣은것을 확인 할 수 있습니다. 위 소스를 실행하면 아래와 같은 화면이 나오게 됩니다. 그리고 네비게이션 메뉴의 갯수에 따라서 버튼의 크기는 자동조절 됩니다. 예를들어서 2개의 버튼이 있을경우 50% 씩 자동으로 공간을 만들며, 위와같이 3개의 버튼이 있을경우 33.3%의 넓이를 가지며, 4개 일경우 어떻게 구성될지 이미 짐작하시겠지만 25%씩 공간을 차지하게 됩니다.
그리고 네비게이션 바를 만들면서 한가지 팁이 있는데 버튼을 클릭했을때 해당 버튼의 활성화를 위해 사용하는 기능이 있습니다. 버튼 활성화란 그 버튼을 클릭하면 색상을 다르게 표현하여 현재 그 위치에 페이지가 있다는것을 알려주는 기능입니다.
<li><a href="#anylink" class="ui-btn-active ui-state-persist">Home</a></li>
위 소스와 같이 class 값에 ui-btn-active ui-state-persist 라는 값을 주게 되면 해당 버튼을 클릭했을때 색상이 자동으로 바뀌게 됩니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>나의 모바일 홈페이지</h1>
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active ui-state-persist" data-icon="home">홈</a></li>
<li><a href="#pagetwo" data-icon="arrow-r">2 페이지</a></li>
</ul>
</div>
</div>
<div data-role="content">
<p>네비게이션 색상을 살펴보세요!!</p>
</div>
<div data-role="footer">
<h1>Copyright by makand123. All Rights Reserved</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>나의 모바일 홈페이지</h1>
<div data-role="navbar">
<ul>
<li><a href="#pageone" data-icon="home">홈</a></li>
<li><a href="#" class="ui-btn-active ui-state-persist" data-icon="arrow-r">2 페이지</a></li>
</ul>
</div>
</div>
<div data-role="content">
<p>jQuery Mobile 재미 있나요?</p>
</div>
<div data-role="footer">
<h1>Copyright by makand123. All Rights Reserved</h1>
</div>
</div>
</body>
</html>
// 붉은색 소스를 보면 class 값에 ui-btn-active ui-state-persist 이렇게 값이 들어가 있는것을 확인 할 수 있습니다. 그리고 아래 이미지는 위의 소스를 실행시킨 모습입니다.
이미지를 살펴보면 홈을 클릭하면 홈 버튼이 파란색으로 활성화 된것을 확인할 수 있으며, 마찬가지로 1페이지를 클릭하면 1페이지 버튼이 활성화 되어 있는 것을 확인 할 수 있습니다.
점점 jQuery Mobile 페이지가 완성되어 가는듯한 느낌이 드네요. 여러분들도 직접 소스를 만들어서 테스트를 해보시기 바랍니다. 그럼 실력이 쭉쭉 늘테니까요 ^^
오늘 jQuery Mobile 포스팅은 여기까지 입니다.
그럼 남은 하루 즐겁게 보내시기 바라고 즐거운 프로그래밍 되시기 바랍니다.
'jQuery Mobile > JM Tutorial' 카테고리의 다른 글
| jQuery Mobile Collapsible(접고 펴는 기능) (0) | 2013.11.20 |
|---|---|
| jQuery Mobile 툴바(Toolbars) (0) | 2013.11.13 |
| jQuery Mobile 툴바(toolbars) (0) | 2013.11.11 |
| jQuery Mobile 버튼 (0) | 2013.10.31 |
| jQuery Mobile 페이지2 (2) | 2013.10.28 |
