JQuery Mobile Tutorial : Components 02

Page titles

Titles in Ajax navigation

jQuery Mobile로 만든 페이지가 처음 로드될 때 그리고 나서 link를 클릭하거나 form 을 submit 할 때 Ajax는 대상이 되는 page의 내용을 pull 하게 됩니다.

DOM내에 두개의 페이지 모두를 가지는 것이 animated 된 화면 전환을 위해 꼭 필요합니다. 그런데 이러한 이면에는 page title이 항상 첫번째 화면의 title이 남아있게 된다는 문제가 있습니다. 이것을 해결하기 위해 jQuery Mobile은 Ajax를 통해 page title을 pull 해서 자동적으로 parse 합니다. 그리고 나서 title 속성을 바꾸는 겁니다.

Titles in multi-page templates

multi-page 문서에서도 이와 비슷한 방법으로 진행 됩니다. 단지 모든 페이지들은 common title을 share 하고 있는게 다른것이죠. 그래서 각각의 페이지마다

data-title 속성을 넣어서  각각의 페이지마다 title을 다르게 할 수 있도록 합니다. 그래서 HTML 문서의 title은 자동적으로 화면에 display 되는 page의 data-title 값으로 바뀌게 됩니다.

<div data-role="page" id="foo" data-title="Page Foo">

</div><!-- /page -->

Linking Pages

jQuery Mobile은 simple page linking convention을 위해 디자인 됐습니다. 그냥 일반적으로 하듯이 링크를 거시면 됩니다. 그러면 jQuery Mobile이 필요하면 Ajax를 이용해서 single-page 모델내의 페이지 request를 자동적으로 처리할 겁니다. 만약 Ajax가 가능하지 않으면 (same-domain url 이 아니거나 링크에서 특정 속성을 사용한다거나 해서) Ajax 대신에 일반 http request 가 사용됩니다.
이 모델의 goal은 특정 configuration 없이 그냥 일반적인 방법으로 개발자가 쉽게 웹 사이트를 만들도록 하는데 있습니다. 보기 좋은 화면과 native 와 유사한 방법으로 말이죠.

Default link behavior: Ajax

동적인 화면전환을 하려면 Ajax를 통해서 해당 페이지들이 모두 로디 되어야 합니다. 이것을 구현하려면 프레임워크는 그 링크의 href를 파스해서 Ajax request(Hijax)를 formulate 하고 loading spinner를 display  해야 합니다. 이러한 과정은 jQuery Mobile 에 의해 자동적으로 수행 됩니다.
Ajax request 가 성공적이면 새 페이지의 내용은 DOM에 추가 됩니다. 모든 모바일 위젯들은 자동 initialize 됩니다. 그리고 나서 새 페이지는 화면전환효과를 주면서 스크린에 표시 됩니다. 만약 Ajax request 가 실패하면 프레임워크는 작은 에러 메세지 overlay를 잠시 display 하고 없앱니다. 그래서 Ajax request 가 실패했다고 해서 navigation 흐름이 멈추지는 않습니다. 이 에러메세지 관련해서는 example of the error message 를 보세요.

Note :  Ajax navigation active로 multipage document로 링크를 걸지는 못합니다. 왜냐하면 프레임워크는 첫번째로 찾은 페이지만 로드하기 때문입니다. 그 페이지의 full set 을 로드 하지는 않습니다. 이럴 경우에는 Ajax를 사용하지 않고 link 를 해야 합니다. (다음 섹션을 보세요) 그래야 full page refresh가 되서 hash collision 을 방지할 수 있습니다. 이 Ajax를 사용해서 multi page document의 모든 페이지를 로드 할 수 있도록 하는 플러그인인 subpage plugin 이 있습니다. 관심 있으면 살펴 보세요.

Linking without Ajax

다른 도메인으로 링크하거나 rel="external", data-ajax="false" 를 하거나 target 속성을 사용하면 Ajax가 로드하지를 못합니다. 이렇게 하면 full page refresh 가 일어나며 동적인 화면전환이 일어나지 않습니다. rel="external" 과 data-ajax="false" 두 속성 모두 똑 같은 효과가 나타납니다. 다른점은 rel="external"은 다른 site나 다른 도메인으로 링크를 걸 때 사용되어지는 것이고  data-ajax="false"는 같은 도메인 내에서 간단하게 Ajax 로딩을 하지 않을 때 사용할 수 있습니다. 보안 문제 때문에 프레임워크는 항상 외부 도메인으로의 링크에서는 Ajax behavior 를 적용하지 않도록 돼 있습니다.
1.1 버전에서 data-ajax="false"를 parent container에 추가하면 그 하단의 수많은 링크들이 Ajax 네비게이션 시스템을 사용하지 않도록 하는 기능을 추가했습니다. 이 기능을 사용하면 각 링크마다 일일이 코딩해야 하는 번거로움을 줄일 수 있습니다.
Note: jQuery Mobile 어플리케이션을 빌드 시 Ajax Navigation system이 globally 사용할 수 없도록 하거나 각각의 링크에서 빈번하게 사용할 수 없도록 하여야 할 때 $.mobile.pushStateEnabled global configuration option을 사용하실 것을 권장합니다. 그러면 일부 브라우저에서 발생하는 inconsistent navigation behavior를 방지 하실 수 있습니다.

Linking within a multi-page document

한개의 HTML 문서에는 여러개의 page 콘테이너가 들어갈 수 있습니다. div를 여러개 쓰고 각 div마다 data-role을 page로 주면 됩니다. 이렇게 하면 HTML 한 문서에 작은 웹싸이트나 어플리케이션 하나를 다 담을 수도 있겠죠.jQuery Mobile은 처음 이 파일이 불려졌을 때 첫번째 page를 먼저 보여 줍니다.
이 멀티페이지 문서 안에 링크가 anchor(#foo)로 걸려 있다면 프레임워크는 page wrapper 안에 있는 ID(id-"foo")를 찾을 겁니다. 그 HTML문서 안에서 그것을 찾으면 그 새로운 페이지를 보여 줄 겁니다. jQuery Mobile은 멀티페이지 내의 화면 전환뿐만 아니라 외부 링크를 통해 자유롭게 내부,외부로 이동 할 수 있도록 합니다.

사용자가 보기엔 그것이 내부 페이지인지 외부 페이지인지 구분 되지 않고 똑 같이 보여 집니다. (외부 페이지 로딩시 Ajax spinner 가 표시 될때는 약간 다르겠지만요.)

어떤 경우에든 JQuery Mobile은 페이지의 URL hash를 업데이트 해 Back button이나 deep-linking, bookmarking 등이 지원 되도록 합니다.
만약 여러분이 multiple internal 페이지를 포함한 페이지로 Ajax를 통해서 링크를 클릭해서 그 화면을 로딩한다면 여러분은 rel="external"이나 data-ajax="false"를 link 에 넣어야 됩니다.이렇게 해야 프레임워크가 그 URL 내의 Ajax hash 를 없애고 full page를 reload 할 수 있습니다.이 부분은 아주 중요합니다. 왜냐하면 Ajax page들은 Ajax history를 track하기 위해 hash(#)를 사용합니다. 그리고 multiple internal 페이지들도 그 내부 페이지를 가리킬 때 그 hash를 사용하구요. 그래서 위 방법대로 하지 않으면 이 두 부분이 서로 충돌하게 됩니다.

예를 들어 multiple internal page를 향한 링크는 아래와 같이 되어야 합니다.

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

"Back" button links

만약 여러분이 anchor에 data-rel="back" 속성을 넣으시면 유저가 그 anchor를 클릭했을 때 back button을 누른 것 처럼 동작 할 겁니다. 바로 전단계 화면으로 가게 됩니다. 이경우 anchor의 디폴트 href는 무시 됩니다.이 기능은 자바스크립트로 간단하게 back button을 생성해야 될 때 유용합니다.(예를 들어 dialog 박스를 닫는다던지...) 이 기능을 사용할 때 브라우저는 href 속성에 지정된 주소는 사용하지 않을 겁니다. 한가지 알아야 할 것은요. C-Grade 브라우저에서는 이 data-rel="back" 기능이 안 먹히기 때문에 그런 경우는 이 href 에 있는 링크로 가게 될 겁니다. 만약 여러분이 history 내의 going back이 아니라 단지 전환을 역순으로 (지금 화면을 부른 화면으로 돌아가기) 하실 때에는 data-direction="reverse" 속성을 사용하시면 됩니다.
Note: data-direction="reverse"는 현재 페이지로 오게 한 바로 그 페이지로 화면전환을 한다는 의미입니다. data-rel="back"은 바로 전 화면으로 이것은 브라우저의 back 버튼을 누른것과 동일한 효과가 나옵니다. 이 두개를 같이 사용하면 reverse는 일어나지 않고 그냥 일반적인 transition이 일어 납니다.

Redirects and linking to directories

디렉토리 인덱스로 링크를 걸 때 (href="typesofcats/index.html 가 아니라 href="typesofcats/" 로 링크를 걸 때) 반드시 trailing slash를 넣어주셔야 합니다. 왜냐하면 jQuery Mobile은 url의 마지막 / 다음에는 파일 이름이 올거라고 예상을 하고 있기 때문입니다. 그리고 나서는 실제 페이지가 참조 됐을 때 이 section을 없앱니다.

어쨌든 여러분은 data-url 속성이 이미 정해져 있는 page div를 return 하는 경우가 있을 겁니다. 이경우 jQuery Mobile은 URL 을 업데이트 하는데 이 속성의값을 사용할 겁니다. 그리고 예를 들어 form을 /login.html 로 포스팅하려고 하는데 이 일이 성공적으로 진행됏을 때 결과 페이지를 /account 에 있는 페이지를 사용하려고 하는 경우가 있을 수 있습니다. 이 경우 여러분은 jQuery Mobile history stack을 사용해서 컨트롤 할 수 있습니다. 아래에 예제가 있습니다.

다음에 나오는 링크는 docs-links-urltest/index.html 로 걸린 겁니다. Test Link . return page는 docs/pages/docs-links-urltest/ 가 될 겁니다. 이 작업은 페이지 소스의 data-url 속성을 통해서 수행 될 겁니다. 값은 전체 hash 로 replace 된다는 것을 항상 염두에 두세요.

jQuery Mobile의 navigation model 과 Ajax, hashes and history 에 좀 더 기술적인 부분은 별도로 살펴 보시기 바랍니다.

Link examples

HTML의 모든 표준 링크 타입은 위에서 살펴 본 대로 jQuery Mobile이 모두 지원합니다. 아래는 자주 사용되는 링크들에 대한 sampler 들 입니다.

<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">
    <li data-role="list-divider">Links that will be Ajax-loaded with page transitions</li>
    <li><a href="../../index.html">Link in the same domain</a></li>
    <li><a href="../pages/dialog.html" data-rel="dialog">Dialog link: data-rel="dialog" (not tracked in history)</a></li>
    <li data-role="list-divider">Links that will refresh the page</li>
    <li><a href="http://www.jquery.com">External domain</a></li>
    <li><a href="../../index.html" rel="external">Link with rel="external"</a></li>
    <li><a href="index.html" data-ajax="false">link with [data-ajax="false"]</a></li>
    <li><a href="../../index.html" target="foo">Link with target="foo"</a></li>
    <li data-role="list-divider">Email links</li>
    <li><a href="mailto:jdoe@foo.com">Basic email: mailto:jdoe@foo.com</a></li>
    <li><a href="mailto:jdoe@foo.com?cc=bill@bar.com&bcc=mark@abc.com&subject=Happy%20Birthday&body=Best%20wishes!">Mailto with a cc:, bcc:, subject and body pre-filled</a></li>

    <li data-role="list-divider">Phone links</li>
    <li><a href="tel:15555555555">Phone: tel:15555555555</a></li>
    <li data-role="list-divider">Other</li>
    <li><a href="#">A href="#" will return false</a></li>
</ul>

jQuery Mobile Doc 페이지에 가면 위 화면처럼 나오고 모바일 디바이스에서 각 링크를 클릭하면 실제 작동되는것도 보실 수 있습니다.

보시려면 여기 를 누르셔서 시험해 보세요.