Move from one window to another

먼저 아래처럼 윈도우를 두 개 만들고 웹브라우저로 보면 첫번째 윈도우만 나타난다.

<!-- 첫 번째 윈도우 -->
<div id="list" data-role="page">
    <div data-role="header">
        <h1>리스트</h1>
    </div>
    <div data-role="content">
        <a href="#detail">move</a>
    </div>
</div>

<!-- 두 번째 윈도우 -->
<div id="detail" data-role="page">
    <div data-role="header">
        <h1>상세페이지</h1>
    </div>
    <div data-role="content">
    </div>
</div>

첫 번째 윈도우에서 두 번째 윈도우로 이동하려면 같은 소스 내이므로 internal link (html의 책갈피)를 이용하여 이동할 수 있다. 링크를 누르게 되면 아이폰의 slide 기능처럼 애니매이션 처리가 되면서 두 번째 윈도우로 이동하게 된다.

만약 윈도우 이동에 대한 slide효과를 바꾸려면 위의 링크에 data-transition 속성을 추가하면 된다.

<a href="#detail" data-transition="flip">

slide 효과의 종류는 아래와 같다.

data-transition	Signification
slide	Moving from one window to another by a horizontal movement from right to left. This is the default.
slideup	The second window appears at the bottom, gradually covering the first.
slidedown	The second window appears at the top, gradually covering the first.
pop	The second window is the center of the first, widening to cover it.
fade	The first window disappears by reducing its opacity (from 1 to 0), while the second appears through an increase in opacity (from 0 to 1).
flip	The second window appears with a rotation effect on a vertical axis, and by removing the first window.