PhoneGap PhoneGap - 네비게이션 바 만들기

2014.05.29 17:26

PhoneGap - 네비게이션 바 만들기

다른 페이지로 이동하기 쉽도록 하기 위해 어플리케이션 하단에 계속 보이는 메뉴 (persistent) 를 만들어 보겠다.

폰갭의 좋은 점은 HTML, Javascript, CSS 만으로 어플리케이션을 만들 수 있다는 점인데, javascript 라이브러리인 JQuery Mobile을 가지고 메뉴나 버튼을 native look and feel 처럼 보이도록 만들 수 있다.

네비게이션 시스템은 HTML의 link로 만들겠다. <div> 태그에 data-role 속성을 두면 JQuery Mobile 라이브리가 이를 footer 메뉴로 만들어준다.

경우에 따라 페이지가 로딩될 때 메뉴가 처음에는 윗부분에 보였다가 하단으로 내려가는 것을 볼 수도 있다.

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<link rel="stylesheet" href="css/jquery.mobile-1.0rc1.min.css" />
<script type="text/javascript" charset="utf-8" src="scripts/phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/common.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="index.html" class="ui-btn-active">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
</body>
</html>

실행하면 안드로이드 에뮬레이터에서 아래와 같이 보일 것이다.

png;base64eef725a7302a8f1e.png

위 소스에서의 핵심은 data-role과 data-position 속성이다. 이 값을 바꿔서 메뉴의 위치를 바꾸거나 고정돼 있지 않고 떠다니게 만들 수도 있다.

기능을 조금 확장해서 link에 아이콘을 달 수도 있다.

data-icon 속성을 추가하면 되는데 JQuery Mobile에서 제공하는 기본 아이콘들을 사용할 수도 있고 직접 정의할 수도 있다.

home-icon.png 파일은 PNG-8 타입의 18x18 크기로 저장되어야 한다.

그밖에 data-theme 속성을 사용하여 전체적인 테마를 변경할 수도 있는데, 이는 뒤에서 자세히 다룰 것이다. (역주: 생각보다 테마는 유용하지 않은 듯 하여 내가 안 다룰 수도 있다)

[출처] PhoneGap - 네비게이션 바 만들기|작성자 Ralph

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

번호	제목	글쓴이	날짜	조회 수
1	ART(Android Runtime)	졸리운_곰	2015.08.05	343

쓰기

댓글 0