08. jQuery Mobile 페이지(data-role="page")

Index

06. 페이지간 이동에 <a>태그 대신 jQuery Mobile에서 제공하는 $.mobile.changePage() 메소드 사용

07. jQuery Mobile 에서 페이지 트랜지션

08. jQuery Mobile 페이지(data-role="page")

09. jQuery Mobile 컨텐트

10. jQuery Mobile 툴바(헤더바)

 

 

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-* 속성은 다음과 같다.

data-* 속성	설명	값
data-close-btn-text	PC에서 다이얼로그 페이지의 닫기 버튼에 마우스를 올렸을때 나타나는 툴팁글자를 입력한다.	string
data-fullscreen	화면 전체를 컨텐트 영역으로 사용한다. 고정된 툴바와 같이 사용된다.	true | false (default)
data-overlay-theme	다이얼로그 페이지 주위 테마	swatch letter(a-z)
data-theme	페이지 테마	swatch letter(a-z)
data-title	<title> 태그처럼 페이지 제목을 표시한다. 페이지 이동시에만 적용된다. PC 브라우저에서만 효과가 있다.	string