<!-- 페이지 구성 -->
        <div data-role="page" id="main" data-theme="b" >
            <div data-role="header" data-theme="d">
                <h1>헤더</h1>
            </div>
            <div data-role="content">
                <h2>컨텐트</h2>
                <p><a href="#sub" data-transition="slide">서브페이지 이동</a></p>
            </div>
            <div data-role="footer">
                <h2>푸터</h2>
            </div>
        </div>
        <div data-role="page" id="sub" data-theme="b" >
            <div data-role="header" data-theme="d">
                <h1>서브 헤더</h1>
            </div>
            <div data-role="content">
                <h2>서브 컨텐트</h2>
                <p><a href="#main" data-transition="slide" data-direction="reverse">메인페이지 이동</a>
            </div>
            <div data-role="footer">
                <h2>서브 푸터</h2>
            </div>
        </div>

여러 화면을 구성할 때는

화면 구성마다 data-role="page" id="페이지 id"를 구성하면 됩니다.

화면의 전환이 이루어질 때는 링크태그(a)에 화면전환 속성 data-transition="slide" 와

이전화면으로 돌아올 때 화면 전환은 data-transition="slide" data-direction="reverse"