Hi Hi

'jQuery Moblie 웹앱 파일구성'에 해당되는 글 1건

  1. jQuery Mobile 단일 페이지 . 외부 페이지 이동

jQuery Mobile 단일 페이지 . 외부 페이지 이동

 

jQuery Mobile 웹앱은 홈페이지를 정의한 시작 HTML 파일과 다른 페이지를 정의하는 HTML 파일들로 구성된다.

이들 페이지는 <a> 태그로 상호 이동하는데, 전통적인 새로 고침으로 이동하는 것이 아니라 부드러운 애니메이션(Transition)으로 처리되어 네이트브 앱과 유사하게 이동한다.

 

01. 단일 페이지 이동

<!DOCTYPE html>
<html>
<head>
<meta charset="euc-kr" />
<mata name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
<title> jQuery Mobile</title>

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

<link href="./framework/jquery.mobile-1.0.css" rel="stylesheet" type="text/css" />
<script src="./framework/jquery-1.6.4.js"></script>
<script src="./framework/jquery.mobile-1.0.js"></script></head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>홈 화면</h1>
</div>

<div data-role="content">
<a href="#second" data-role="button">두번째페이지</a>
</div>
</div>

<div id="second" data-role="page">
<div data-role="header">
<h1>두번째페이지</h1>
<a href="#" data-rel="back" data-icon="arrow-l"> 이전 </a>
</div>

<div data-role="content">
<a href="#third" data-role="button">세번째페이지</a>
</div>
</div>
<div id="third" data-role="page">
<div data-role="header">
<h1>세번째페이지</h1>
<a href="#" data-rel="back" data-icon="arrow-l"> 이전 </a>
</div>
<div data-role="content">
<p> 세번째페이지</p>
</div>

</div>


</body>
</html>

Next 이동과 Back 이동의 차이점은 페이지 id를 참조해서 이동하느냐 Back 버튼으로 이동하느냐이다. 페이지 트랜지션(페이지 이동의 애니메이션) 도 다른데, Next 이동은 오른쪽에서 페이지가 나오는 slide 이지만 Back 이동은 왼쪽에서 페이지가 나오는 slid이다.

단일HTML 문서에 페이지를 정의하면 두가지 단점이 있다.

1. HTML 문서에 내용이 많다보니 로딩 속도가 느리므로 첫 화면이 나오는데 다소 시간이 걸린다.

2. 협업해서 작업하기가 곤란하다.

 

02 . 외부 페이지 이동

jQuery Mobile 은 단일 HTML 모델이 이다. 그렇다면 물리적으로 분리되있는 외부 페이지간 이동도 단일 HTML 모델로 동작할까 ? 단일 HTML 모델은 메모리에서 페이지들이 하나의 DOM 객체에 통합되는 것을 말하기 때문에 물리적인 파일과는 상관없다.

jQuery Mobile 은 외부 파일 링크를 AJAX 통신으로 처리 한다. 외부 파일에 정의되어 있는 페이지를 AJAX 응답으로 받고 이걸을 홈페이지의 DOM에 통합시켜 단일 HTML 모델로만 만든다.

홈페이지 이외의 다른 페이지를 외부 파일로 작성할 때에는 뷰포트 설정, 홈 화면 바로가기 아이콘 지정, jQuery Mobile 라이브러리 로딩등을 작성할 필요가 없다. 이들 요소는 단일 HTML 모델과 통합할 때 버려진다. 네트워크 전송량을 줄이고 로딩 속도를 조금 향상시키려면 생략하는 것이 좋다.

가장 바람직한것은 <div data-role="page"> ... </page> 만 작성하는 것이다.

HTML 파일로 만들 경우 문자셋 지정이 빠지면 한글이 깨지므로 <meta> 태그는 작성해 두어야 한다.

<!DOCTYPE html>
<html>
<head>
 <title>jQuery Mobile</title>
 <meta charset="euc-kr" />
 <mate 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="ios_icon.png">
 <link rel="apple-touch-icon" href="/ios_icon.png">
   
 <link href="./framework/jquery.mobile-1.0.css" rel="stylesheet" type="text/css" />
 <script src="./framework/jquery-1.6.4.js"></script>
 <script src="./framework/jquery.mobile-1.0.js"></script>

</head>

 <body>
  <div id="home" data-role="page">
   <div data-role="header">
    <h1> 홈페이지</h1>
   </div>
   
   <div data-role="content">
    <a href="second.html" data-role="button"> 두번째 페이지</a>
   </div>
  </div>
 </body>

</html>

second.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="euc-kr" />  
 </head>
 <body>
  <div id="second" data-role="page">
   <div data-role="header">
    <h1>두번째 페이지</h1>
    <a href="#" data-rel="back" data-icon="arrow-l">이전</a>
   </div>
  
   <div data-role="content">
    <a href="third.html" data-role="button">세번째 페이지</a>
   </div> 
  </div>
 </body>
</html>

third.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="euc-kr" />  
 </head>

 <body>
  <div id="third" data-role="page">
   <div data-role="header">
    <h1>세번째 페이지</h1>
    <a href="#" data-rel="back" data-icon="arrow-l">이전</a>
   </div>
  
   <div data-role="content">
    <p>세번째 페이지</p>
   </div> 
  </div>

 </body>
</html> 

jQuery Mobile 웹앱은 단일 HTML 문서로 동작하기 때문에 시작 HTML 파일에 홈페이지와 함께 다른 페이지들도 정의가 가능하다.  각 페이지들은 <div data-role="page"> 로 구분되고, 제일 먼저 정의된 페이지가 홈페이지가 된다. 주의할 점은 페이지 이동시 내부 링크(<a href="#id">)를 사용하므로 페이지를 정의하는 각 <div>는 id 속성이 있어야 한다.