jquery mobile 강좌 2 [ 페이지 이동 및 뒤로가기 ]

2016. 3. 10. 16:47language/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" 등의 속성을 사용하면 실제 외부페이지로 이동하게 됩니다.

 

 

여기까지 이해가 되지 않는다면 글을 천천히 읽어 보시기 바랍니다.

이 개념이 잡혀있어야 나중에 페이지를 자유롭게 이동하고 로딩시킬 수 있습니다.