1. 제이쿼리 모바일 개요
- 표준 웹 기술을 이용한 웹앱 개발을 위한 모바일 UI 프레임워크이다.
- 모바일 UI 프레임 워크는 UX를 반영한 사용자 인터페이스를 라이브러리로 제공하여 모바일용
웹앱 UI를 빠르고 쉽게 만들도록 지원한다.
1) 프레임워크 연결방법
- CDN(Contents Delivry Network) 방식은 파일을 직접 다운로드 하지 않고 제이쿼리 모바일
서버의 URL주소만을 마크업에 명세함으로써 프레임워크가 적용될때 참조한다.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
- 다운로드 방식은 제이쿼리 모바일 공식사이트(http://jquerymobile.com/download)에서
zip파일 jquery.mobile-1.X.zip을 다운받아 압축해제후 html의 script및 link 태그의 속성으로 파일 경로를 추가하여 참조한다.
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"/>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
2) 모바일 웹페이지의 구성
- 제이쿼리 모바일 웹앱 화면은 모바일 페이지를 기본 단위로하여 구성된다.
- 모바일 페이지는 모바일 장치에 보여지는 하나의 화면으로 모바일 앱의
기본 구성요소이다.
- 제이쿼리 모바일 환경에서는 HTML5문서 안에 여러개의 모바일 페이지를 구성할 수 있다.
- 제이쿼리 모바일 페이지는 헤더, 콘텐츠, 푸터 세개의 영역으로 이루어진다.
- 화면 구성 영역과 관련 기능은 data-role 속성으로 정의된다.
>>>single-page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>머리말(header)영역</h1>
</div>
<div data-role="content">
<p>내용(content)영역</p>
</div>
<div data-role="footer">
<h4>꼬리말(footer)영역</h4>
</div>
</div>
</body>
</html>
2. 화면 구성 및 페이지 연결
1) 웹 앱화면 구성
- 단일 페이지 템플릿: HTML5 문서안에 오로지 하나의 페이지를 정의한다
- 다중 페이지 템플릿: HTML5 문서안에 둘 이상의 페이지를 정의한다. 브라우저는 첫 번째 페이지를
첫 화면으로 보여주며 나머지는 숨겨있다가 페이지 링크를 통해 화면이 전환된다.
- header content footer 이게 하나로 인식되어서 여러개 있으면 맨 앞엑것이 보여지고 다음부터는 전환을 해야지만 보여진다.(아래에 예제가 있음)
>>> multi-page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>머리말(header)영역</h1>
</div>
<div data-role="content">
<a href="#page2">페이지2</a>
</div>
<div data-role="footer">
<h4>꼬리말(footer)영역</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>머리말(header)영역</h1>
</div>
<div data-role="content">
<a href="#page1">페이지1</a>
</div>
<div data-role="footer">
<h4>꼬리말(footer)영역</h4>
</div>
</div>
</body>
</html>
2) 페이지 연결 방식
- 내부 페이지 연결 : 하나의 HTML5 파일 안에 여러 페이지를 명세하여 서로 연결하는 방법.
각 내부 페이지들은 Ajax를 통해 내부 링크 방식으로 연결한다.
- 같은 HTML5 파일 안에 함계 정의된 페이지들은 항상 내부 페이지 연결 방식을 취한다.
- 외부 페이지 연결 : 여러 HTML5 파일 안에 페이지들을 나누어 명세하고 서로 연결하는 방법
- 서로 다른 HTML5 파일안의 외부 페이지들은 내부 링크(ajex) 또는 외부 링크(아예 새로운 페이지) 방식으로 연결된다.
3) 페이지 도메인 링크 방식
- 내부페이지 연결방식은 항상 내부링크 방식이며, 외부페이지 연결방식은 내부 또는 외부 링크 방식 모두가 가능하다.
- 위 multi-page.html의 링크가 내부 링크이다.
- 외부 페이지의 내부 링크 방식 : 하나의 DOM 트리 구성하며, Ajax 에 의해 자연스러운 화면
전환 애니메이션을 적용한다.
- 내부페이지 연결방식 처럼 링크를 걸면 된다. 단지 다른 문서의 페이지에서 에서 다른 문서의 다른 페이지로 연결될뿐이다.
- 외부 페이지의 외부 링크 방식 : Ajax를 사용하지 않으며 기존 DOM 트리는 지워지고 새로운 페이지로 DOM 트리가 구성된다.
- 외부페이지의 외부링크 코드
<a href="b.html#page2" data-ajax="false">
<a href="http://www.xxx.net/b.html#page1" >
<a href="http://www.xxx.net/b.html#page1" rel="external" >
>>>> page1-ex.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role = "page" id="page1">
<div data-role="header">
<h1>첫번째 페이지</h1>
</div>
<div data-role="content">
<a href ="page2-ex.html#page2" data-ajax="false">페이지2</a> <!-- data-ajax="false":외부링크,새로운 DOM생성 -->
<a href="page3-ex.html"> 페이지 3</a> <!-- 외부페이지(이 파일에 page3이 없으므로), 내부링크 -->
</div>
<div data-role="footer">
<h4>꼬리말 영역</h4>
</div>
</div>
</body>
</html>
>>>> page2-ex.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page2" data-title="페이지2">
<div data-role="header">
<h1>두번째 페이지</h1>
</div>
<div data-role="content">
<a href="page3-ex.html" rel="external">페이지3</a> <!-- rel="external": 외부링크 -->
</div>
<div data-role="footer">
<h4>꼬리말 영역</h4>
</div>
</div>
</body>
</html>
>>>> page3-ex.html
<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<div data-role="page" id="page3">
<div data-role="header">
<h1>3번째 페이지</h1>
</div>
<div data-role="content">
<a href="page1-ex.html">페이지 1</a> <!-- 내부링크(DOM 유지) -->
<a href="http://m.naver.com/index.html" target="_blank">네이버페이지1</a> <!-- http: 있으므로 외부링크 -->
</div>
<div data-role="footer">
<h4>꼬리말 영역</h4>
</div>
</div>
</html>
3. 페이지 전환
- 제이쿼리 모바일은 CSS3를 사용하여 페이지 이동 과정에서 화면 전환 효과를 제공한다.
- 다양한 모바일 응응프로그램과의 링크도 지원한다.
1) 페이지 전환 효과
- 화면 전환 효과는 CSS3의 transition 스타일 속서에 기반하고 있다.
- 화면 전환시 적용할 수 있는 기본 애니메이션 효과는 9가지 이다.
- <a> 안에 data-transition 속성값을 설정한다.
※ 페이지 전환 유형
data-transition 속성값 페이지 전환 효과
----------------------------------------------------------------------------------------
slide 왼쪽으로 수평이동(기본 효과)
slideup 위쪽으로 수직이동
slidedown 아래쪽을으로 수직 이동
slidefade 수평이동 서서히 나타남
flip 페이지 회전(중앙 Y축 기준)
fade 서서이 나타남
pop 페이지 확장(페이지 중앙에서 확대됨)
turn 페이지 뒤집기
flow 페이지 축소 후 좌우 이동
none 또는 공백 미작용(전환효과 적용하지 않음)
>>>> page-transition.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>jQuery Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page1" data-title=”첫번째페이지”>
<div data-role="header">
<h1>첫번째 페이지</h1>
</div>
<div data-role="content">
<a href="#page2">페이지2</a>
</div>
<div data-role="footer">
<h4>내부링크방식</h4>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>두번째 페이지</h1>
</div>
<div data-role="content">
<p>페이지 전환 애니메이션 효과</p><br/>
<a href="#page1" data-direction="reverse">페이지1</a><br/>
<a href="#page3">페이지3 기본 전환효과 적용 </a><br/>
<a href="#page3" data-transition="slide">페이지3 slide 적용 </a><br/>
<a href="#page3" data-transition="slideup">페이지3 slideup 적용 </a><br/>
<a href="#page3" data-transition="slidedown">페이지3 slidedown 적용 </a><br/>
<a href="#page3" data-transition="flip">페이지3 flip 적용 </a><br/>
<a href="#page3" data-transition="fade">페이지3 fade 적용 </a><br/>
<a href="#page3" data-transition="pop">페이지3 pop 적용 </a><br/>
<a href="#page3" data-transition="none">페이지3 none 적용</a><br/>
</div>
<div data-role="footer">
<h4>내부링크방식</h4>
</div>
</div>
<div data-role="page" id="page3" data-title=”세번째페이지”>
<div data-role="header">
<h1></h1>
</div>
<div data-role="content">
<a href="#page1">페이지1</a>
<a href="#somepage" data-rel="back">페이지2</a> <!-- 이전페이지로 효과 유지하며 이동 -->
</div>
<div data-role="footer">
<h4>내부링크방식</h4>
</div>
</div>
</body>
</html>
2) 외부 프로그램 링크(이메일, 전화번호, SMS, 맵(위성좌표,주소)
- 휴대폰의 브로우저로 확인한다. (서버와 같은 와이파이 선택)
>>>> app-link.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>스마트 페이지 링크 처리법</h1>
</div>
<div data-role="content">
<h2>외부 프로그램 링크</h2>
<ul data-role="listview" data-inset="true">
<li><a href="mailto:gdhong@hot.co.kr">이메일 링크</a></li>
<li><a href="tel:0311234567" target="_blank">전화번호 링크</a></li>
<li><a href="sms:0101234567" target="_blank">SMS 문자 링크</a></li>
<li><a href="http://maps.google.com/maps?q=37.511611,127.098293&hl=ko" target="_blank">위성좌표 링크</a></li>
<li><a href="http://maps.google.com/maps?q=대한민국+서울특별시+강남구+삼성1동+159-1&hl=ko" target="_blank">주소 링크</a></li>
</ul>
</div>
<div data-role="footer" class="ui-bar" data-position="fixed">
<a href="index.html" data-icon="grid" rel="external">Index</a>
</div>
</div>
</body>
</html>
