본문 바로가기
프로그래밍/언어 - Java,Kotlin

PhoneGap + jQueryMobile 사용하기...

by 사악신 2011. 10. 27.

1. 설치
http://jquerymobile.com/download/

관련 파일을 다운로드한다.


이전 PhoneGap(2011/10/27 - [프로그래밍/안드로이드] - 안드로이드에서 PhoneGap 사용하기...)이 위치하고 있는 디렉토리에 관련 파일을 푼다.



이때 jQuery(http://docs.jquery.com/Downloading_jQuery) 도 다운로드 받아 상위 이미지처럼 복사하여 넣는다. 여기서 파일명에 min 이라는 글자가 들어있는 스크립트들은 압축되어있으므로 용량을 최소화시켜준다. 소스를 보며 작업할 경우라면 min 없는 스크립트를 사용하여도 상관없다.


2. 샘플 코드 작성하기
/assets/www/index.html 을 아래와 같이 작성한다.

<!DOCTYPE HTML>

<html>

<head>

<title>PhoneGap</title>

<link href="jquery.mobile-1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" type="text/css" />

<script src="jquery-1.6.4.min.js"></script>

<script src="jquery.mobile-1.0rc2/jquery.mobile-1.0rc2.min.js"></script>

<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>

</head>

<body>

<div data-role="page" id="home">

  <div data-role="header">

    <h1>jQueryMobile</h1>

  </div>

  <div data-role="">

    <p>Hello World!!</p>

  </div>

  <div data-role="footer">

    <p>Hello World for jQueryMobile</p>

  </div>

</div>

</body>

</html>


스크립트 경로를 아래와 같은 URL 경로로 지정할 수 있으나 이 경우 WiFi 혹은 3G/4G 가 불가능한 환경에서는 사용할 수 없게 된다.

<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

 
3. 실행
기존 빌드된 클래스를 재빌드하기 위하여, Project > Clean... 을 실행한다.

 
 그런 후 Run > Run As > Android Application 을 실행한다.


 
반응형

댓글3