2016. 3. 10. 16:47ㆍlanguage/jquery mobile
앞 강좌에서 배운 data-role 속성으로 페이지의 역할을 지정해 보았습니다.
http://api.jquerymobile.com/data-attribute/
여기에 방문하면 더 많은 data 속성을 확인할 수 있습니다.
이번에는 페이지를 이동해 보겠습니다.
jquery mobile은 한 파일 안에 여러 페이지를 나누어 작성 가능하고 이들을 이동시킬 수 있기 때문에 앱과 비슷한 모양을 가추어 부드럽게 처리할 수 있습니다.
또한 네이게이션을 자동으로 관리하여 뒤로가기버튼이나 딥링크도 제공됩니다.
한 파일에 여러 페이지가 있어 한번 로딩으로 여러 페이지를 이동할 수 있으며 여러번 로딩하지 않아도 되는 장점이 있습니다.
반면에 한번에 여러페이지가 있는 파일을 내려받기 때문에 큰 파일일수록 처음 내려받는 시간이 길어집니다. 하지만 내려받기만 한다면 그 다음에는 네트워크 속도와 상관없이 빠르게 동작합니다.
페이지는 data-role="page" 로 구분합니다.
body의 자식이여야 하며 page는 충첩할 수 없습니다.
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>jquery mobile</title>
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>1 page</p>
<p><a href="#page2">go page2</a></p>
<p><a href="externalPage.html" data-prefetch="true">go external page</a></p> </div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
<section id="page2" data-role="page">
<header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>2 page</p>
<p><a href="#page3">go page3</a></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
<section id="page3" data-role="page">
<header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>3 page</p>
<p><a href="#page1">go page1</a></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
</body>
</html> |
cs |
위 처럼 여러 페이지를 작성할 수 있습니다.
소스중에 data-add-back-btn="true" 라는 속성은 뒤로가기 버튼을 자동으로 생성해 줍니다.
꼭 data-role="header" 에 있어야 합니다.
페이지들 간의 이동은 a 태그의 href="#이동할 페이지 ID" 속성으로 가능합니다.
작성이 완료되면 직접 페이지들을 이동하여 봅니다.
이번에는 외부 페이지를 불러와 봅시다.
index.html 파일은 최초 실행될 파일입니다.
사진처럼 externalPage.html 라는 파일을 하나 더 만듭니다.
소스는 다음과 같습니다.
|
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>jquery mobile</title>
<link rel="stylesheet" href="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">
<script src="./jquery/jquery-1.11.0.js"></script>
<script src="./jqueryMobile/jquery.mobile-1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<section id="page4" data-role="page">
<header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile External Page</h1></header>
<div class="content" data-role="content">
<p>external 1 page</p>
<p><a href="#page5">go external page5</a></p>
<p><a href="#page2">go page2</a></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
<section id="page5" data-role="page">
<header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile External Page</h1></header>
<div class="content" data-role="content">
<p>external 2 page</p>
<p><a href="#page6">go external page6</a></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
<section id="page6" data-role="page">
<header data-role="header" data-add-back-btn="true"><h1>jQuery Mobile External Page</h1></header>
<div class="content" data-role="content">
<p>external 3 page</p>
<p><a href="#page4">go external page4</a></p>
</div>
<footer data-role="footer"><h1>cofs</h1></footer>
</section>
</body>
</html> |
cs |
외부 페이지를 불러올 때는 외부 페이지의 첫번째 page 만 가져와서 현재 DOM에 삽입합니다.
위 소스로 예기하자면 id 가 page4 인 페이지만 가져와서 index.html 파일에 삽입시키고 나머지 page5, page6은 버려집니다.
직접 실행해 봅시다.
index.html 을 실행시키고 go external page 를 눌러 외부 페이지를 불러온 후 go external page5를 눌러봅니다.
아무리 눌러도 page5 로 가지 못합니다.
외부 페이지를 가져온 것이지 외부페이지로 이동한 것이 아니기 때문에 현재 페이지는 index.html 이며 눈에는 보이지 않지만 page1, page2, page3을 가지고 있습니다.
그럼 go page2를 눌러봅니다. 이동하나요 ?
page2로 잘 이동되는것을 확인할 수 있습니다.
여기서 주의할 점은 외부 페이지를 불러오더라도 index.html 에 보이지 않은 page2, page2, page3이 있다고 했습니다.
그렇기 때문에 외부 페이지와 현재 페이지의 페이지 아이디가 겹치지 않도록 주의해야 합니다.
위와 같이 외부 페이지를 비동기 방식으로 미리 불러와 놓는 방법입니다.
|
<a href="externalPage.html" data-prefetch="true">go external page</a> |
cs |
data-prefetch="true" 를 이용하여 작성하면 비동기 방식으로 미리 페이지를 로딩해 둡니다.
미리 비동기 방식으로 페이지를 가져오기 때문에 나중에 페이지를 이동할 때는 빠른 이동이 가능합니다.
직접 외부페이지로 이동할 수 도 있습니다.
|
<p><a href="externalPage.html" data-ajax="false">go external page</a></p> |
cs |
data-ajax="false" , target="_blank", rel="external" 등의 속성을 사용하면 실제 외부페이지로 이동하게 됩니다.
여기까지 이해가 되지 않는다면 글을 천천히 읽어 보시기 바랍니다.
이 개념이 잡혀있어야 나중에 페이지를 자유롭게 이동하고 로딩시킬 수 있습니다.
'language > jquery mobile' 카테고리의 다른 글
| jquery mobile 강좌 11 [ 목록 뷰 / listview / form 태그 적용 / 입력 폼 만들기 ] (5) (0) | 2016.03.16 |
|---|---|
| jquery mobile 강좌 10 [ 목록 뷰 / listview / 아코디언 / collapsibleset / accordion ] (4) (0) | 2016.03.16 |
| jquery mobile 강좌 9 [ 목록 뷰 / listview / 말풍선 count bubbles / 아이콘 icon / 썸네일 / thumbnails] (3) (0) | 2016.03.16 |
| jquery mobile 강좌 8 [ 목록 뷰 / listview / 버튼 나누기 / 검색 만들기 ] (2) (0) | 2016.03.15 |
| jquery mobile 강좌 7 [ 목록 뷰 / listview 목록 만들기 ] (1) (0) | 2016.03.15 |
| jquery mobile 강좌 6 [ 페이지 전환 애니메이션 / 화면 전환 / 애니메이션 /changePage / data-transition / data-direction ] (0) | 2016.03.15 |
| jquery mobile 강좌 5 [ 페이지 이동 / changePage ] (15) | 2016.03.11 |
| jquery mobile 강좌 4 [ 대화상자, 다이얼로그 팝업 ] (0) | 2016.03.11 |
| jquery mobile 강좌 3 [ 페이지 이벤트 / event ] (7) | 2016.03.11 |
| jquery mobile 강좌 1 [ jquery mobile 기본 설정 및 화면 만들기 ] (4) | 2016.03.10 |