jQuery Mobile - 외부, 내부 page

외부 페이지 링크.

jQM은 Ajax 프로세스를 따르며, 기본적으로 페이지 내에 있는 외부 페이지의 링크를 클릭하게 되면 링크 경로에 대한 Ajax 요청을 하며, 로딩시에는 로딩 아이콘이 보여집니다.

Ajax 요청이 성공할 경우 새로운 페이지의 content는 DOM에 추가가 되며, 모든 모바일 위젯들이 자동 초기화 되면서 새로운 페이지로 페이지 전환이 애니메이션으로 보여집니다

만약, Ajax 요청이 실패할 경우, 프레임웍은 페이지 흐름이 끊어지지 않도록 작은 오류 메시지를 띄어줄 것입니다.

<a href="JQM page2-1.html" > External Link page </a>

링크를 클릭하면 아래 화면으로 갑니다. 페이지 이동시 전환 애니메이션을 볼 수 있습니다.

내부 페이지 링크

 

하나의 HTML 문서내에 page 속성을 가진 태그가 여러 개가 존재 할 수 있습니다.
이런 경우 각 페이지 속성의 태그들은 고유한 ID를 필요로 합니다. 이런 페이지ID를 통해 내부 페이지들 간의 이동이 가능해집니다.

내부 페이지들 간의 이동할 수 있는 링크을 사용할 때 rel=”external” 혹은 data-ajax=”false” 속성이 필요할 경우도 있습니다. 이 속성들은 URL내에 Ajax 해쉬를 없애고, 전체 페이지를 다시 로딩하도록 프레임웍에 요청합니다. Ajax 페이지에서 내부 페이지들의 hash 지시자를 사용하게 되면, Ajax 히스토리 트랙에 있는 다른 링크과 충돌이 발생할 수 있어 유의해야 합니다.

<a href="multipage.html" rel="external">Multi-page link</a>

해당 링크를 사용하여 페이지 이동시 back 버튼이 나타나지 않습니다.

예제)
하나의 html 문서에 4개의 page 컨테이너를 정의 했습니다.
각 페이지는 내부 페이지로서 최초 화면 요청시 가장 처음에 정의된 페이지만이 보여집니다.
다른 내부 페이지로 이동하려면 앵커 태그를 사용하여 # + 페이지 ID를 링크해주면 됩니다.

 <!-- page 1 : 내부의 다른 페이지 bar로 가기 링크입니다. -->
   <p>내부 bar 페이지로 가기 <a href="#bar">bar</a></p> 

 <!-- page 2 : external 속성을 적용한 내부, 외부 페이지 링크입니다. -->
   <p>현재는 bar 페이지 입니다.</p>  
   <p>external 속성 적용, 내부 페이지 woo로 가기<a href="#woo" rel="external">woo</a></p> 
   <p>external 속성 적용, 외부 페이지로 가기<a href="JQM page2.html" rel="external">woo</a></p> 
 
 <!-- page 3 : reverse 속성 적용하여 페이지 이동 애니메이션이 왼쪽으로 효과가 나타납니다. -->
   <p>현재는 woo 페이지 입니다.</p>  
   <p>reverse 속성 적용, coo로 가기<a href="#coo" data-direction="reverse">coo</a></p> 
 
 <!-- page 4 : 해더의 back 버튼과 동일한 효과 입니다. -->
   <p>현재는 coo 페이지 입니다.</p>  
   <p>back 속성 적용, foo로 가기<a href="#foo" data-rel="back">foo</a></p> 


 

페이지가 이동 하면서 어떤 변화가 있는지 직접 해보시길 바랍니다.^^