* Mobile page 구조
- http://jquerymobile.com/download/ 에서 다운로드 및
"Copy-and-Paste Snippet" 부분을 COPY 하여 사용할 수 있다.
- <body> 태그 안에는 보틍 data-role="" 속성을 가진 element 가 정의 된다.
* External page linking (외부 링크) / Local, internal linked "pages" (내부 링크)
1. External page linking (외부 링크)
외부 파일을 링크 할 경우, ajax 를 호출하고 ajax 스피너를 나타낸다.
호출이
+ 성공하면 새로운 페이지의 내용은 DOM에 추가 되고, 모든 모바일 위젯은 자동 초기화되며, 새로운 페이지는 화면에 보여진다.
+ 실패하면 에러 페이지를 잠깐 띄우고 사라진다.
2. Local, internal linked "pages" (내부 링크)
하나의 HTML 파일에 "data-role="page" 인 div를 여러 개 있을 수 있다.
각 <div>블럭은 unique ID가 필요하다 [ 링크를 클릭 했을 때 내부 div의 ID로 구분하여 이동한다. href="#FIRST" ]
!! Ajax 페이지에서
내부 페이지들의 hash(#)지시자를 사용하면, Ajax 히스토리 트랙에 있는 다른 링크와 충돌할 수 있음
URL 내에 Ajax 해쉬를 없애고, 전체 페이지를 다시 로딩하는 속성
rel="external" / data-ajax="false"
=> 페이지 이동 시 Back 버튼이 나타나지 않음 ,일반 페이지 이동 시 처럼 페이지 이동
A.html 에서
<a href="B.html">B 페이지로 이동</a> 페이지로 이동한 경우
B 페이지에서 내부 링크
<a href="#B_Second">Internal link To Second</a>로 내부에서 이동하려 하면 Error ;;
해결 : A.html 에서
<a href="B.html" rel="external"> 또는
<a href="B.html" data-ajax="false">를 사용하여 B 페이지로 이동한다.
<a href="B.html">B 페이지로 이동</a> 페이지로 이동한 경우
B 페이지에서 내부 링크
<a href="#B_Second">Internal link To Second</a>로 내부에서 이동하려 하면 Error ;;
해결 : A.html 에서
<a href="B.html" rel="external"> 또는
<a href="B.html" data-ajax="false">를 사용하여 B 페이지로 이동한다.
* Back linking
<a> 태그에 data-rel="back" 속성 사용 시, default href의 경로는 무시되고, 이전 페이지로 이동한다.
이전 페이지로 돌아가는 페이지 전환 효과 : data-direction="reverse"
'Front-End > jQuery' 카테고리의 다른 글
| 모바일웹&jQuery&CSS (0) | 2012.04.12 |
|---|---|
| Data- attribute(옵션) reference (0) | 2012.04.10 |
| Effect - Reference(API) (0) | 2012.04.06 |
| Events - Reference(API) (0) | 2012.04.06 |
| Selectors(접근) - Reference(API) (1) | 2012.04.06 |