JQuery Mobile 페이지 연결

JQuery Mobile 을 이용하여, 요소를  data-role="page" 로 지정하면 페이지 컨테이너로 사용하여 페이지 전환을 그 컨테이너 내부에서 이뤄지도록 할 수 있다.

head 에는 JQuery mobile 을 사용할 수 있도록 구성을 해준다.

JQuery Mobile 1.4.5 로 오면서 data-add-back-btn 속성에 대해서 지원하지 않게 된 건지 예제 코드에서 실행이 되지 않는다.

우선은 link 와 script 설정을 다음과 같이 해줬다.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

페이지 별로 data-role="page" 속성을 넣어주면, 첫번째 태그의 내용만 나타나게 된다.

<div data-role="page" id="page1">

<div data-role="header">

<h3>첫 번째 페이지 헤더</h3>  

</div>

<div data-role="content">

<p>첫 번째 페이지 내용</p>

<p><a href="#page2">두 번째 내부 페이지 링크</a></p>

<p><a href="jq_comp1_2.html">세 번째 외부 페이지 링크</a></p>  

</div>

<div data-role="footer">

<h4>첫 번째 페이지 풋터</h4>

</div>

</div>

#page2 로 링크된 내용은 같은 페이지에 있지만 첫 페이지에는 나타나지 않는다. 대신 링크를 이용해 이동했을 때 화면에 나타난다.

data-role가 "header" 나 "footer" 의 경우에는 배경이 다르게 설정되어 나타난다. 버전에 따라서 적용되는 CSS 가 다른 것 같다.

<div data-role="page" id="page2" data-add-back-btn="true">

  <div data-role="header">

<h3>두 번째 페이지 헤더</h3>  

  </div>

  <div data-role="content">

<p>두 번째 내부 페이지 내용</p>   

  </div>

  <div data-role="footer">

<h4>두 번째 페이지 풋터</h4>

  </div>

</div>

id 가 page2 인 태그에는 data-add-back-btn 속성이 true 로 설정되었으며, 이것이 실행되면, 이전 페이지로 돌아갈 수 있는 버튼이 등장하게 된다.

마찬가지로 jq_comp1_2.html 로 연결된 링크에 대해서도 이동해보면, jq_comp1_2.html 에 data-role="page" 로 지정되어 있는 태그만 연결되어서 나타난다. 그 이전의 내용이나 그 다음의 내용은 표시되지 않는다.