에스알닷컴

참조 - 삶의 조각들

jQuery Mobile 에서 페이지는 <div id="페이지구분자" data-role="page"></div> 로 정의 된다.

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

    //페이지를 구성하는 요소가 배치된다.

</div>

하나의 HTML 페이지는 하나 이상의 페이지를 포함할 수 있다. 두개 이상의 페이지가 하나의 HTML 파일 안에 포함되는 경우 첫번째 정의된 페이지가 첫번째 페이지가 된다.

사이트의 첫페이지에서 호출되는 외부페이지들은 하나의 HTML 파일 안에 하나의 페이지만 선어되어 있어야 한다. 두개 이상을 정의해 놔도 jQuery Mobile 엔진이 ajax로 해당 HTML 파일을 불러들일때 첫번째 페이지만 DOM 에 포함 시킨다.

페이지 간의 이동은 기본적으로 <a> 태그를 사용한다. 페이지 간의 이동은 동일한 HTML 파일 안에 있는 페이지로의 이동 또는 다른 HTML 파일 안에 있는 페이지로의 이동이 있을 수 있다. 전자(내부링크)는 페이지의 #id를 사용한다. 후자(외부링크)의 경우는 파일경로를 사용한다.

내부링크

<a href="#home">HOME</a>

외부링크

<a href="home.html">HOME</a>

다음 페이지를 열때 다이얼로그 형태로 열고 싶다면 페이지를 호출하는 <a> 태그에 data-rel="dialog" 속성을 추가한다.

<a href="#home" data-rel="dialog">HOME</a>

<a href="home.php" data-rel="dialog">HOME</a>

페이지간 이동시 진행하는 기본 애니메이션은 slide 이다. 다이얼로그가 열릴때의 애니메이션은 pop 이다.

다이얼로그 창으로 열리는 페이지는 기본적으로 헤더바의 좌측에 닫기버튼(X)이 표시된다. 헤더바가 없으면 닫기버튼이 표시되지 않기 때문에 다이얼로그 창을 닫을 수 없다. 따라서 다이얼로그 페이지는 반드시 헤더바를 포함해야 한다.

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

    <div data-role="header">

    </div>

</div>

일반페이지는 다이얼로그 페이지처럼 이전 페이지로 돌아갈 수 있는 방법을 기본적으로 제공해 주지 않는다. 이전 페이지로 돌아가기 위해서는 코드를 추가해 주어야 한다. 돌아가는 방법은 다음과 같이 두가지 방법이 있다.

<a href="#index" data-role="button" data-icon="arrow-l">돌아가기</a>

동일한 페이지 내애서 id 값이 #index 인 페이지를 호출한다. 위 코드는 #index --> #home --> #index 의 형태가 된다.

<a href="#" data-rel="back" data-icon="arrow-l">돌아가기</a>

브라우저의 history 에서 직전 페이지로 돌아간다. 위 코드는 #index <--> #home

페이지 정의시에 사용할수 있는 data-* 속성은 다음과 같다.

참조 - 삶의 조각들

페이지 트랜지션은 페이지에서 페이지로 이동할 때 애니메이션 효과를 말한다. jQuery Mobile 은 총 6개의 CSS기반 트랜지션 효과를 제공한다.

slide

페이지가 오른쪽에서 왼쪽으로 미끄러지듯이 이동한다. (기본값)

<a href="home.html" data-transition="slide" data-role="button">slide</a>

$.mobile.changePage("home.html", { transition : "slide" });

slideup

페이지가 아래에서 위쪽으로 미끄러지듯이 이동한다.

<a href="home.html" data-transition="slideup" data-role="button">slideup</a>

$.mobile.changePage("home.html", { transition : "slideup" });

slidedown

페이지가 위에서 아래쪽으로 미끄러지듯이 이동한다.

<a href="home.html" data-transition="slidedown" data-role="button">slidedown</a>

$.mobile.changePage("home.html", { transition : "slidedown" });

pop

기존페이지가 사리지고 새 페이지가 팝업 형태로 올라온다. (다이얼로그의 기본값)

<a href="home.html" data-transition="pop" data-role="button">pop</a>

$.mobile.changePage("home.html", { transition : "pop" });

fade

기존 페이지가 희미해지면서 사라지고 새 페이지 서서히 나타난다.

<a href="home.html" data-transition="fade" data-role="button">fade</a>

$.mobile.changePage("home.html", { transition : "fade" });

flip

기존 페이지 뒷면에 새 페이지가 있는 것처럼 회전하면서 새 페이지가 나타난다.

<a href="home.html" data-transition="flip" data-role="button">flip</a>

$.mobile.changePage("home.html", { transition : "flip" });

* 페이지 트랜지션은 모바일 디바이스에 따라서 약간은 다르게 동작할 수 있다.

참조 - 삶의 조각들

jQuery Mobile 에서 페이지간 이동은 <a> 태그 말고 jQuery Mobile에서 제공하는 메소드인 $.mobile.changePage() 메소드를 이용할 수 있다. $.mobile.changePage() 메소드는 <script> 태그 안에서 사용된다.

$.mobile.changePage( to [, options])

jQuery.mobile.changePage( to [, options])

to

페이지 ID 또는 페이지명이 온다.

options

json 객체({})로 작성한다.

속성값은 다음과 같다. 

allowSamePageTransition (default: false) 

By default, changePage() ignores requests to change to the current active page. Setting this option to true, allows the request to execute. Developers should note that some of the page transitions assume that the fromPage and toPage of a changePage request are different, so they may not animate as expected. Developers are responsible for either providing a proper transition, or turning it off for this specific case.

changeHash (default: true)

hash 데이터 업데이트 여부를 결정한다.

Decides if the hash in the location bar should be updated. This has the effect of creating a new browser history entry. It also means that, if set to false, the incoming page will replace the current page in the browser history, so the page from which the user is navigating away will not be reachable via the browser's "Back" button.

data (default: undefined)

URL페이지를 Ajax 요청하는 경우, 해당 페이지에 전달할 데이타

dataUrl (default: undefined)

The URL to use when updating the browser location upon changePage completion. If not specified, the value of the data-url attribute of the page element is used.

pageContainer (default: $.mobile.pageContainer)

Specifies the element that should contain the page.

reloadPage (default: false)

Forces a reload of a page, even if it is already in the DOM of the page container. 
Used only when the 'to' argument of changePage() is a URL.

reverse (default: false)

Decides what direction the transition will run when showing the page.

role (default:undefined)

The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.

showLoadMsg (default: true)

외부 페이지를 읽어들일때 로딩메시지를 표시할지 여부를 결정

transition (default: $.mobile.defaultPageTransition)

요청한 페이지를 표시할때 이동효과(애니메이션)를 선택한다.

type (default: "get")

changePage() 의 첫번째 인자가 URL인 경우 해당 페이지 요청방법("get", "post")을 결정한다.

예1) id가 "second" 인 페이지를 표시한다.

<div id="second" data-role="page> </div>

$.mobile.changePage("#second");

예2) 페이지명이 "second.php" 인 외부 파일을 읽어들여 표시한다.

$.mobile.changePage("second.php");

예3) 페이지가 변경될때 위로 올라가는 효과가 발생한다.

$.mobile.changePage("second.php", { transition: "slideup", changeHash: false });

예4) 페이지를 호출할때 id값이 "search"인 폼태그 객체의 값을 post 방식으로 전달한다.

<form id="search">

    <input type="text" name="choice" id="choice" value="jQuery Mobile" />

</form>

$.mobile.changePage("second.php", { type: "post", data: $("form#search").serialize(), changeHash: false });

예5) 페이지를 get 방식으로 호출할때 data 속성에 할당된 변수/값을 전달한다.

$.mobile.changePage("second.php", { data : { fname : "홍", lname : "길동" } });

참조 - 삶의 조각들

jQuery Mobile 은 시작 HTML 페이지에서 다른 HTML 페이지를 호출하면 호출된 페이지의 내용이 시작 HTML 에 자동으로 통합된다. 따라서, 뷰포트 설정, 바로가기 아이콘 설정, jQuery Mobile 라이브러리 로딩 설정은 시작 HTML 페이지에서만 작성하면 된다. 단, 이것이 가능하기 위해서는 다른 페이지를 호출할 때 <a> 태그를 이용해서 호출해야 한다.

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,

                    user-scalable=no" />
        <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">
    <div data-role="header">
        <h1>Index</h1>
    </div>
    <div data-role="content">
        <a href="home.html" data-role="button">Home</a>
    </div>
</div>
</body>
</html>

home.html

<!DOCTYPE html>
<html>
<head>
 <title></title>
 <meta charset="utf-8" />
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">
        Home
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>Footer</h1>
    </div>
</div>
</body>
</html>

javascript 코드 상에서 페이지 이동을 할 경우에는 $.mobile.changePge() 메소드를 이용한다.

참조 - 삶의 조각들

jQuery Mobile 의 HTML 페이지는 페이지 영역, 헤더 영역, 컨텐트 영역, 푸터 영역 의 4개 영역으로 구성된다. 이 들 영역은 <div> 태그를 이용해서 정의하며 각 영역을 구분 하는 방법은 <div> 의 속성 data-role을 이용한다.

<div data-role="page">

    <div data-role="header"> ... </div>

    <div data-role="content"> ... </div>

    <div data-role="footer"> ... </div>

</div>

• data-role="page" : 페이지 영역. 헤더, 컨텐트, 푸터 영역을 포함하는 영역으로 HTML 안에는 하나 이상의 페이지 영역이 존재한다.
• data-role="header" : 헤더 영역. 툴바가 위치한다. 필요에 따라 제거 될 수도 있다.
• data-role="content" : 컨텐트 영역. 페이지의 내용이 위치한다. 컨텐트 영역은 반드시 존재해야 한다.
• data-role="footer" : 푸터 영역. 툴바가 위치한다. 필요에 따라 제거 될 수도 있다.

다음은 jQuery Mobile에서 페이지를 표시하는 기본적인 형태이다.

<html>

<head> ... </head>

<body>

<div data-role="page">
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">   </div>
    <div data-role="footer" data-position="fixed">

        <h1>Footer</h1>

    </div>

</div>

</body>

</html>

위 소스에서 보면 푸터 영역이 하단에 고정되어 있지 않고 위로 올라가 있다. 이 부분을 해결 하기 위해서는 data-position 속성을 이용한다. 푸터 영역에 속성 data-position 을 추가하고 값을 fixed 로 설정하면 페이지 하단에 고정된다.

<html>

<head> ... </head>

<body>

<div data-role="page">
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">   </div>
    <div data-role="footer" data-position="fixed" data-position="fixed">

        <h1>Footer</h1>

    </div>

</div>

</body>

</html>

* data-role : 4개 영역을 설정한다.

="page" : 하나의 페이지

="header" : 페이지 상단의 헤더 영역

="content" : 페이지의 컨텐츠가 표시되는 영역

="footer" : 페이지 하단의 푸터 영역

* data-position : 영역의 위치를 지정한다.

="fixed" : 영역을 고정시킨다. 푸터 영역의 위치를 화면 하단에 고정시킬 때 사용

참조 - 삶의 조각들

jQuery Mobile 의 HTML 페이지는 페이지 영역, 헤더 영역, 컨텐트 영역, 푸터 영역 의 4개 영역으로 구성된다. 이 들 영역은 <div> 태그를 이용해서 정의하며 각 영역을 구분 하는 방법은 <div> 의 속성 data-role을 이용한다.

<div data-role="page">

    <div data-role="header"> ... </div>

    <div data-role="content"> ... </div>

    <div data-role="footer"> ... </div>

</div>

• data-role="page" : 페이지 영역. 헤더, 컨텐트, 푸터 영역을 포함하는 영역으로 HTML 안에는 하나 이상의 페이지 영역이 존재한다.
• data-role="header" : 헤더 영역. 툴바가 위치한다. 필요에 따라 제거 될 수도 있다.
• data-role="content" : 컨텐트 영역. 페이지의 내용이 위치한다. 컨텐트 영역은 반드시 존재해야 한다.
• data-role="footer" : 푸터 영역. 툴바가 위치한다. 필요에 따라 제거 될 수도 있다.

다음은 jQuery Mobile에서 페이지를 표시하는 기본적인 형태이다.

<html>

<head> ... </head>

<body>

<div data-role="page">
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">   </div>
    <div data-role="footer" data-position="fixed">

        <h1>Footer</h1>

    </div>

</div>

</body>

</html>

위 소스에서 보면 푸터 영역이 하단에 고정되어 있지 않고 위로 올라가 있다. 이 부분을 해결 하기 위해서는 data-position 속성을 이용한다. 푸터 영역에 속성 data-position 을 추가하고 값을 fixed 로 설정하면 페이지 하단에 고정된다.

<html>

<head> ... </head>

<body>

<div data-role="page">
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">   </div>
    <div data-role="footer" data-position="fixed" data-position="fixed">

        <h1>Footer</h1>

    </div>

</div>

</body>

</html>

* data-role : 4개 영역을 설정한다.

="page" : 하나의 페이지

="header" : 페이지 상단의 헤더 영역

="content" : 페이지의 컨텐츠가 표시되는 영역

="footer" : 페이지 하단의 푸터 영역

* data-position : 영역의 위치를 지정한다.

="fixed" : 영역을 고정시킨다. 푸터 영역의 위치를 화면 하단에 고정시킬 때 사용

참조 - 삶의 조각들

jQuery Mobile 에서 시작 HTML페이지의 기본 구성 형태는 다음과 같다. 시작 HTML 페이지는 뷰포트, 아이콘, jQuery 라이브러리 경로, jQuery Mobile CSS 경로, jQuery Mobile 라이브러리 경로를 지정하는 코드를 포함한다.

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,

               user-scalable=no" />

        <link rel="shortcut icon" href="../image/icon.png">

        <link rel="apple-touch-icon" href="../image/icon.png">

        <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>

        <!-- 페이지의 내용을 구성하는 영역 -->

    </body>

</html>

<meta charset="utf-8" />

• HTML 페이지에서 문자를 표시할 때 사용할 문자셋을 지정한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,

         minimum-scale=1.0, user-scalable=no" />

• 모바일 화면에서 화면에 보여질 줌 사이즈 및 초기 설정을 하는 태그이다.
• width=device-width : 초기 폭을 모바일장치가 지원하는 폭만큼으로 설정한다.

아이폰의 경우 화면이 폭보다 크면 스크롤이 생기고 화면이 폭보다 작으면 폭에 맞추어진다.

• height=device-height : 초기 높이를 모바일장치가 지원하는 높이만큼으로 설정한다.
• initial-scale=1.0 :초기값으로 설정할 줌 배율을 1.0으로 한다.
• maximum-scale=1.0 : 최대값으로 설정할 줌 배율을 1.0으로 한다.
• minimum-scale=1.0 : 최소값으로 설정할 줌 배율을 1.0으로 한다.

initial-scale, maximum-scale, minimum-scale 의 값을 모두 1.0으로 지정하면 확대, 축소가 안된다.

• user-scalable=no : 사용자가 축소/확대할 수 없도록 한다. yes, no 를 선택한다.

<link rel="shortcut icon" href="../image/icon.png">

• 안드로이드 폰의 바로가기 아이콘 지정

<link rel="apple-touch-icon" href="../image/icon.png">

• 아이폰의 바로가기 아이콘 지정. 아이콘에 반사광 효과가 표시된다.
• 반사광 효과를 없애기 위해서는 apple-touch-icon 대신에 apple-touch-icon-precomposed 를 사용한다.

<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>

• jQuery Mobile 프로그래밍을 하기 위해서 반드시 필요한 CSS 및 라이브러리를 CDN을 이용해서 참조한다.
• 라이브러리파일을 사이트 내에서 참조하고자 하면 위 파일을 사이트 내에 다운로드 한 후에 경로를 지정해 준다.(파란색 글씨 부분을 라이브러리가 위치한 경로로 변경해 준다.)

<body></body>

• <body>태그 안에는 페이지 영역, 상단 툴바 영역, 컨텐트 영역, 하단 툴바 영역의 네가지 영역으로 표현된다.

<div data-role="page">

    <div data-role="header"> ... </div>

    <div data-role="content"> ... </div>

    <div data-role="footer"> ... </div>

</div>

참조 - 삶의 조각들

jQuery Mobile은 jQuery 진영에서 개발한 모바일 웹앱프레임워크다. jQuery Mobile은 HTML5와 CSS3 기반의 사용자 인터페이스와 터치 이벤트 처리, 페이지 이동 애니메이션, Ajax통신 등의 모바일용 기능을 제공한다.

http://jquerymobile.com

다음 URL http://www.jqmgallery.com 로 접근하면 jQuery Mobile로 개발된 웹앱들을 볼 수 있다. 단, 크롬으로 접근해야 정확한 결과를 볼 수 있다. 

jQuery Mobile의 주요 특징

• jQuery 기반
• 기존에 익숙한 HTML 태그를 이용해서 개발
• HTML5, CSS3 기반
• 다양한 기기 지원(iOS, android, BlackBerry, bada, Windows Phone, palm webOS, symbian, MeeGo)
• 경량의 라이브러리
• 다양한 테마(Swatch개념을 이용해서 웹앱 전체와 부분 테마를 분리해서 적용, Theme Roller를 이용해서 새로운 테마를 빠르게 개발)

Theme Roller 사이트 가기

jQuery Mobile 설치

jQuery Mobile을 이용한 웹페이지를 제작하기 위해서는 jQuery 라이브러리와 jQuery Mobile 라이브러리가 필요하다. 페이지에 해당 라이브러리를 포함시키는 방법은 CDN을 이용하는 방법, 라이브러리 파일 직접 포함하는 방법이 있다

• Contents Delivery Network 를 이용하는 방법

라이브러리 파일을를 웹페이지가 있는 사이트 내에 위치시키는 것이 아니고 브라우저에 의해서 페이지가 로딩될때 code.jquery.com 사이트에서 참조한다.

아래 보라색 코드를 <head> 태그 사이에 포함 시킨다.

<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>

• 라이브러리 파일 다운로드

jQuery 라이브러리는 http://www.jquery.com/download 에서 다운로드 받는다.

jQuery Mobile 라이브러리는 http://jquerymobile.com/download/ 에서 zip 파일 다운로드해서 로컬에 압축해제한다. 

압축해제된 jquery.mobile-x.x.x.min.css, jquery-x.x.x.min.js, jquery.mobile-x.x.x.min.js 파일을 사이트 내의 적당한 폴더에 넣는다.(여기서는 루트 밑에 js 폴더 밑에 넣는 것으로 한다)

HTML 페이지의 <head></head> 태그 사이에 다음 소스를 입력한다. 버전 번호는 내려 받은 라이브러리 버전에 따라 달라질 수 있다. 

<head>

<link rel="stylesheet" href="/js/jquery.mobile-1.3.2.min.css" />
<script src="/js/jquery-1.9.1.min.js"></script>
<script src="/js/jquery.mobile-1.3.2.min.js"></script>

</head>

사용자 정의 속성 data-*

HTML5는 User가 정의한 data-* 속성을 태그에 추가할 수 있도록 허용한다. jQuery Mobile은 javascript 가 실행되면서 사용할 목적으로 data-role 이라는 사용자 정의 속성을 추가했다.

사용자 정의 속성은 data-접두어로 해서 키와 값을 기술한다.

<div data-role="page" data-theme="c">              </div>