jQuery Mobile - Link formats

JQM은 모든 HTML link 를 지원합니다. 가능한 세련되게 경험을 만들기 위해, 같은 도메인의 페이지 링크들은 자동적으로 Ajax 요청으로 바뀌어 지며 프레임웍에 의해 페이지 전환 애니메이션이 보여집니다.

다른 도메인으로의 링크이거나 rel=”external”, data-ajax=”false” 혹은 target 속성은 Ajax로 로딩되지 않을 것입니다. 전체 화면이 새로고침 되어집니다. 만약, 하나의 HTML 문서안에 여러 페이지가 포함되어 있다면, 앵커와 같은 page ID를 참조로 링크됩니다.

mailto: 와 tel: 과 같은 다른 형태의 모든 링크들은 프레임웍에 영향을 받지 않습니다.

먼저 JQM에서 지원하는 Ajax로 로딩되는 페이지 링크부터 보겠습니다.

<a href="JQM page7-1.html">동일 도메인의 다른페이지</a>
<a href="JQM page7-1.html" data-rel="dialog">동일 도메인 다른페이지 다이얼로그</a>

이 두가지 링크는 기본 링크이면서 다이얼로그 속성을 추가한 링크 입니다. Ajax로 페이지 요청되어, 현재 DOM에 요청된 페이지가 추가되어 집니다. 브라우저 URL 창을 보시면 요청전 페이지의 URL에 해쉬(#)가 붙어 확장된 URL을 가지게 됩니다.
아래는 첫번째와 두번째 링크를 클릭했을때 보여지는 페이지 입니다.

다음은 Ajax로 로드되지 않은 페이지 링크들입니다.

<a href="http://www.jquery.com">다른 도메인 페이지</a>

<a href="JQM page7-1.html" rel="external">rel="external 페이지</a>

<a href="JQM page7-1.html" data-ajax="false">data-ajax="false" 페이지</a>

<a href="JQM page7-1.html" target="foo">target="foo" 페이지</a>

다른 도메인의 링크이거나 rel="external" 속성을 가지거나 data-ajax="false" 속성을 가지는 링크들은 DOM에 추가되어지지 않고, 새로운 페이지를 요청한것 처럼 페이지가 보여지게 됩니다. 단순하게 보면, 화면상 왼쪽위 부분의 back 버튼이 생기지 않습니다.

마지막 링크와 같이 target="foo" 속성을 추가하면 새탭에서 열기와 같이 링크가 열리게 됩니다.

그외 이메일 링크와 핸드폰 링크가 있습니다.

<a href="mailto:jdoe@foo.com">이메일 보내기(받는사람)</a>

<a href="mailto:jdoe@foo.com?cc=bill@bar.com&bcc=mark@abc.com&subject=Happy%20Birthday&body=Best%20wishes!">이메일 보내기(받는사람,참조, 제목 포함)</a>

<a href="tel:15555555555">Phone: tel:15555555555</a>

이들의 링크는 프레임웍과 무관하게 기존 웹들 처럼 동작하게 됩니다. 이메일 링크를 클릭하면 아웃룩이 뜨고, 핸드폰 링크를 클릭하면 모바일상에서 전화걸기 기능이 동작하게 됩니다. 웹에서는 전화걸기 기능이 없으므로 동작하지 않습니다.