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” 속성이 있는 첫 요소를 검색한 후 원래 문서에 삽입 -> 내부 페이지를 이동하는 것처럼 그 외 요소는 무시
외부 페이지 만들기 external.html로 저장 <html> <head></head> <body> <p>This content will be ignored.</p> <!-- Begin Page 4 --> <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> <!-- End Page 4--> <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 </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” >
페이지 숨기기, 보이기 이벤트 동기적인 방법으로 불러올 때 (document).ready() . . 등 비동기적인 방법으로 불러올 때 .bind() , .live() . . 등
Page 1 Page 2 Page show Page hide Pagebeforehide Pagebeforeshow <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> <!-- end first page --> <script> $(document).ready(function () { $( ".show-menu" ).click(function () { $( ".sliding-menu" ).toggleClass("reverse out in"); }) </script> slide, slideup, slidedown spin, fade, flip, pop reverse, out , in