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

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

번호	제목	글쓴이	날짜	조회 수
12	App Inventor - MySQL interface 앱 인벤터 mysql 연결	졸리운_곰	2018.04.07	7999
11	Connect App Inventor to MySQL Database 앱 인벤터와 mysql 데이터베이스 연결	졸리운_곰	2018.04.07	7273
10	Create an API (PHP) 앱 인벤터와 php 통합	졸리운_곰	2018.04.07	630
9	Using the WebViewer Control in App Inventor 앱인터에서 웹뷰 컨트롤 사용	졸리운_곰	2018.03.24	512
8	WebView Javascript Processor for App Inventor 앱 인벤터 웹뷰 자바스크립트 인터페이스	졸리운_곰	2018.03.24	505
7	Creating a digital wallet application in App Inventor 2	졸리운_곰	2017.05.01	287
6	Creating a Custom TinyWebDB Service	졸리운_곰	2016.05.18	201
5	TinyDB is a lightweight document oriented database	졸리운_곰	2016.05.16	270
4	구글 앱엔진에 의한 소형웹데이터베이스의 접속방법 tinywebdb	졸리운_곰	2016.05.15	547
3	App inventor 멀티스크린, 스크린 이동, 다중화면,	졸리운_곰	2016.02.17	779
2	Communicating with Web APIs	졸리운_곰	2016.02.17	1080
1	JSON data on the Android mobile with App Inventor 2	졸리운_곰	2016.02.17	364

쓰기

댓글 0