Jquery Mobile 2 장 애플리케이션 구조와 내비게이션

Jquery Mobile 2 장

애플리케이션 구조와 내비게이션

페이지 – data role 속성 활용

• data role=“page/content/header/footer”

• CSS 클래스 , 마크업 , 이벤트 관리 추가

• 페이지 전환

- 여러 페이지를 한문서의 개별영역처럼 다룸

• 내비게이션 관리

- 뒤로가기 버튼을 자동으로 생성 , 딥링크 기능 제공

• 효율성

- 모든 자원이 파일 한 개에 들어 있으므로 네트워크에 계속 접근하지 않아도 됨

내부 페이지html 문서 한 개에 페이지 여러 개 만들기

<body> <section id="page1" data-role="page" data-add-back-

btn="true"> <header data-role="header“ ><h1>jQuery Mobile</

h1></header> <div data-role="content" class="content"> <p> First page! </p> <p><a href="#page2">Go to Second Page</a></

p> </div> <footer datarole="footer"><h1>O'Reilly</h1></footer> </section></body>

외부 페이지

• 별도의 페이지를 만들어서 링크할 때

• 외부페이지의 data-role=“page” 속성이 있는 첫 요소를 검색한 후 원래 문서에 삽입

-> 내부 페이지를 이동하는 것처럼

• 그 외 요소는 무시

외부 페이지 만들기<html><head></head><body> <p>This content will be ignored.</p>  <section id= "page4" data-role="page"> <header data-role="header"><h1>jQuery Mobile</h1></header> <div class="content" data-role="content"> <p>External Page!</p> <p><a href="#page1">Go to First Page</a>.</p> </div> <footer data-role="footer"><h1>O'Reilly</h1></footer> </section>  <h3>This content will be ignored as well.</h3></body></html>

external.html 로 저장

페이지 3 에 링크 걸기<section id="page3" data-role="page" data-add-back-

btn="true"> <header data-role="header“ ><h1>jQuery Mobile</h1></

header> <div data-role="content" class="content"> <p> Third page! </p> <p><a href="#page1">Go back to First Page </a></p> <p><a href=“external.html">Go to external Page </a></p> </div> <footer datarole="footer"><h1>O'Reilly</h1></footer> </section>

외부 페이지 미리 불러오기• 미리 불러오기

- 처음 페이지를 생성할 때 미리 비동기적으로 가져옴 . 이후에 페이지를 가져오는 과정을 생략하므로 빠른 페이지 이동이 가능

<a href=“external.html” data-prefetch=“true” >

go to external page</a><p>

외부 페이지 직접 불러오기• 외부 페이지를 현재 문서에 합치게 하지 않고 실제로

페이지를 불러오고 싶을 때

- <a href=“external.html” rel= “external” > go to external page</a><p>

- <a href=“external.html” data-ajax=“false” >

go to external page</a><p>

페이지 숨기기 , 보이기 이벤트• 동기적인 방법으로 불러올 때(document).ready() . . 등

• 비동기적인 방법으로 불러올 때.bind() , .live() . . 등

Page 1 Page 2

Page show

Page hide

PagebeforeshowPagebeforehide

<script>$(“ #page1 ”).bind(“pagehide”, function (event, ui)

{ var strAlert=“ 페이지 1 사라지고 스크립트 창 발생” ; Alert(strAlert);});</script>

<script>$(“ #page1 ”).bind(“pagebeforehide”, function (event,

ui) { var strAlert=“ 페이지 1 에서 페이지 2 로 전환되기 전에 스크립트 창 발생” ;

Alert(strAlert);});</script>

<script>$(“ #page1 ”).bind(“pageshow”, function (event, ui) {

var strAlert=“ 페이지 1 로 전환된 후 스크립트 창 발생” ; Alert(strAlert);});</script>

대화상자처럼 표시

<a href=“#page2” data-rel=“dialog” >

Go to Second page</a><p>

전환 애니메이션• Fade• Flip• Pop• Slide• Slide down• Slide up<p><a href=“#page2” data-

transition=“fade” > Go to Second page</a></p>

클래스 지정 애니메이션전환 규칙은 jquery mobile 스타일시트에 정의되어 있음 <section id="page1" data-role="page"> <header data-role="header"> <h1>CSS 3 Animations</h1> </header> <div data-role="content" class="content"> <p class= "show-menu“ >Show/Hide Menu</p> <div class="sliding-menu slide out“ > Menu</div> </div> <footer data-role="footer"> <h2>jQuery Mobile</h2> </footer> </section>  <script> $(document).ready(function () { $( ".show-menu" ).click(function () { $( ".sliding-menu" ).toggleClass("reverse out in"); }) }) </script>

slide, slideup, slide-downspin, fade, flip, pop

reverse, out , in

Documents

Jquery Mobile 2 장 애플리케이션 구조와 내비게이션