모바일 페이지 이동
페이지 이동은 크게 두가지로 정리하고자 한다.
1. id를 부여해 버튼으로 페이지 이동
2. 외부파일을 불러와서 페이지 이동
이 두가지 방법을 예제를 통해 정리해보고자 한다.
id를 부여해 페이지 이동
페이지가 여러개 존재한다면 반드시 id값으로 구분한다.
그리고 버튼의 링크에 이동할 페이지의 id값을 넣으면
버튼을 클릭하면 입력한 페이지로 이동된다.
첫번째 페이지
<div data-role="page" id="first_page"><!-- 페이지를 구분하기 위해 id부여 -->
<div data-role="header">
<h1>My Title</h1>
</div>
<div data-role="content">
<a href="#second_page" data-role="button">두번째로 이동</a>
</div>
<div data-role="footer">
<h1>화면 하단</h1>
</div>
</div>
----------------------------------------------------------
두번째 페이지
<div data-role="page" id="second_page">
<div data-role="header">
<h1>두번째 페이지</h1>
</div>
<div data-role="content">
<a href="#first_page" data-role="button">첫번째로 이동</a>
</div>
<div data-role="footer">
<h1>화면 하단</h1>
</div>
</div>
첫번째 페이지의 버튼을 클릭하면 등록된 링크에 따라 두번째 페이지로 이동되고
거기서 다시 버튼을 누르면 첫번째 페이지로 돌아온다.
외부파일을 불러와서 페이지 이동
외부의 파일을 불러오는 경우는 id가 필요없다.
대신 파일 경로를 입력해야한다.
data-ajax="true" 값 지정 =>(밑에서 자세히 정리할 계획이다)
첫번째 페이지 (위치: 02.html)
<div data-role="page">
<div data-role="header">
<h1>첫번째 페이지</h1>
</div>
<!-- data-ajax="true"(디폴트)=>메모리 공유(스타일 공유해서 사용) -->
<div data-role="content">
<a href="02-2.html" data-role="button"
data-ajax="true" >두번째화면으로 이동</a>
</div>
<div data-role="footer">
<h1>화면 하단</h1>
</div>
</div>
-------------------------------------------------
두번째 페이지 (위치: 02-2.html)
<div data-role="page">
<div data-role="header">
<h1>두번째 페이지</h1>
<!--
이전으로 되돌아가는 기능을 부여하는 속성=>data-rel="back"
history.back(),history.go(-1)와 같은 기능
-->
<a data-icon="arrow-l" data-rel="back">이전</a><!-- header라서 버튼생략해도 버튼이 만들어짐 -->
</div>
<div data-role="content">
<p>jQuery Mobile page구성
</div>
<div data-role="footer">
<h1>화면 하단</h1>
</div>
</div>
이렇식으로 버튼에 경로를 업력하여 커튼을 클릭했을때 페이지가 이동되게 할수있다.
data-ajax="true"
위에 예시에 data-ajax="true"가 있는데 이게 무엇인지 정리하면
data-ajax="true"는 메모리를 공유해준다.
따라서 첫번째 페이지에 data-ajax="true"가 있으면 두번째 페이지에 메모리(스타일)를 전달해준다.
예시를 들자면 두번째 페이지에 라이브러리들이 없다고 가정하에 출력하면 모바일 태그들과 스타일들이 적용이 안된다.
하지만 첫번째 페이지에 data-ajax="true"를 부여하고 페이지 이동을 하면 라이브러리가 없어도 첫번째의 메모리들을 가져와 똑같이 적용해준다.
true가 디폴트인데 만약 data-ajax="false"를 준다면 메모리 공유안되기 때문에 이동하여 url 변경시 전체 페이지를 다시 로드해야 한다.
이는 페이지마다 라이브러리 달아줘야되서 메모리 효율성이 떨어진다
transition(화면전환)
페이지 이동할때 여러가지 효과를 주면서 이동한다
형식 및 종류는 다음과 같다.
data-transition="slide" (오른쪽->왼쪽으로 페이지이동) ->back버튼(X)
"slideup" (아래->위쪽으로 페이지이동)
"slidedown" (위->아래쪽으로 페이지이동)
"pop" (팝업창 효과)
"flip" (회전효과)
"fade"=> "fade"효과
이 6종류의 효과를 하나씩 적용해보고자 한다.
-----------------------------------------------------------
data-transition="slide"
=>페이지가 이동할때 오른쪽에서 왼쪽으로 페이지를 이동하는 효과를 부여한다.
slide는 back버튼이 적용이 안되는 버그가 있어서 유의해야한다.
<ul data-role=listview><!-- 전화번호부 목록 -->
<li><a href="#second_page" data-transition="slide">ListItem1</a></li>
</ul>
-----------------------------------------------------------
data-transition="slideup"
=>페이지가 이동할때 아래에서 위쪽으로 페이지를 이동하는 효과를 부여한다.
<ul data-role=listview><!-- 전화번호부 목록 -->
<li><a href="#second_page" data-transition="slideup">ListItem2</a></li>
</ul>
-----------------------------------------------------------
data-transition="slidedown"
=>페이지가 이동할때 위에서 아래쪽으로 페이지를 이동하는 효과를 부여한다.
<ul data-role=listview><!-- 전화번호부 목록 -->
<li><a href="#second_page" data-transition="slidedown">ListItem3</a></li>
</ul>
-----------------------------------------------------------
data-transition="pop"
=>페이지가 이동할때 팝업창 효과로 나타나며 이동하는 효과를 부여한다.
<ul data-role=listview><!-- 전화번호부 목록 -->
<li><a href="#second_page" data-transition="pop">ListItem4</a></li>
</ul>
-----------------------------------------------------------
data-transition="flip"
=>페이지가 이동할때 회전하며 페이지를 이동하는 효과를 부여한다.
<ul data-role=listview><!-- 전화번호부 목록 -->
<li><a href="#second_page" data-transition="flip">ListItem5</a></li>
</ul>
-----------------------------------------------------------
data-transition="fade"
=>페이지가 이동할때 fade효과를 주면서 페이지를 이동하는 효과를 부여한다.
<ul data-role=listview><!-- 전화번호부 목록 -->
<li><a href="#second_page" data-transition="fade">ListItem6</a></li>
</ul>
-----------------------------------------------------------
dialog
data-rel="dialog"
이동될 페이지가 다이알로그 형태로 바꿔서 이동된다.
이동시키는 문장에 data-rel="dialog"을 적용해서 이동된 페이지에
dialog효과 부여
<div data-role="content">
<ul data-role=listview><!-- data-rel="dialog" -->
<li><a href="#second_page" data-rel="dialog" data-transition="slide">ListItem1</a></li>
<li><a href="#second_page" data-rel="dialog" data-transition="slideup">ListItem2</a></li>
<li><a href="#second_page" data-rel="dialog" data-transition="slidedown">ListItem3</a></li>
<li><a href="#second_page" data-rel="dialog" data-transition="pop">ListItem4</a></li>
<li><a href="#second_page" data-rel="dialog" data-transition="flip">ListItem5</a></li>
<li><a href="#second_page" data-rel="dialog" data-transition="fade">ListItem6</a></li>
</ul>
</div>
2022-08-12
