Hi Hi

'jQuery Moblie UI'에 해당되는 글 1건

  1. jQuery Mobile UI - 페이지

jQuery Mobile UI - 페이지

 

jQuery Mobile은 < div data-role="page"> 단위로 페이지를 구분한다. 하나의 HTML에 두개이상의 페이지가 존재할 경우 제일 먼저 정의된 페이지가 첫 화면이 된다.

<div data-role="page">

...

</div>

페이지간의 기본 이동은 <a> 태그를 사용한다. 하나의 HTML 파일에 정의된 페이지간 이동 내부 링크(#id)를 사용하고, 다른 파일에 정의된 페이지 이동은 외부 링크를 사용한다.

<a href="#id"> 이동 </a>

<a href="filename.html"> 이동 </a>

페이지 기본 이동은 silde 애니메이션과 함께 진행된다. 만약 팝업 다이얼로그 처럼 다음 페이지를 열고 싶다면 현재 페이지 <a> 태그 data-rel="dialog" 속성을 추가하면 된다.

<a href="#id" data-rel="dialog"> 열기 </a>

<a href="filename" data-rel="dialog"> 열기 </a>

팝업 다이얼로그로 열면 기본적인 닫기 버큰이 헤더바 왼쪽에 자동으로 생성된다. 이 버튼을 탭하면 다이얼로그는 닫히고 이전 페이지로 돌아간다. 그렇기 때문에 팝업 다이얼로그로 열리는 페이지는 헤더바를 정의하는 <div data-role="header"> 가 잇어야 한다.

이전 페이지로 이동하고 싶다면 data-rel="back" 속성을 가진 <a> 태그를 추가하면 된다. 이 속성은 주어진 <a> 태그의 href 속성은 무시되므로 어떤 값을 넣어도 의미가 없으며, 뒤로가기에만 충실히 실행된다.

<!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 data-role="page">
   <div data-role="header">
    <h1>Home</h1>
   </div> 
   <div data-role="content"> 
    <p>Slide 이동</p>
    <a href="second.html">Second Page</a>
 
    <p>팝업 다이얼로그</p>
    <a href="second.html" data-rel="dialog">Second Page</a>
   </div>
  </div>
 </body>
</html>

 

 

페이지를 정의할 때 추가적으로 사용할 수 있는  data-* 속성

data-* 속성 

 설명

 값

 data-close-btn-text

 다이얼로그 페이지의 닫기 버틍에 마우스를 올리면 나오는 툴립 글자

- 모바일 기기는 터치 작업을 하므로 사용하지 않음

 string

 data-fullscreen

 화면 전체를 컨텐트 영역을 사용

- 고정된 툴바와 같이 사용됨

 true / false(기본)

 data-overlay-theme

 다이얼로그 페이지 주위 테마

 swatch letter(a-z)

 data-theme  페이지 테마  swatch letter(a-z)

 data-title

 페이지 타이틀(<title>역할)

-페이지 이동시에만 적용됨

-폰 프라우저에는 타이틀이 표시되지 않으므로 사용하지 않음

 string

 

컨텐트

페이지의 컨텐트 <div data-role="content"> 로 정의 된다.

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

컨텐트를 정의할 때 추가적으로 사용할 수 있는 data-*  속성은 data-theme 밖에 없다.