jquery mobile 강좌 14 [ 내비게이션 바를 이용하여 페이지 이동하기 ] (3)

내비게이션바를 이용하여 페이지를 이동해 보겠습니다.

 

내비게이션으로 페이지 이동을 한다고 해서 특별한 스킬이 필요한 것은 아닙니다.

단순히 앞에서 배운 페이지를 이동하는 방법과 페이지를 이동 후 버튼의 눌림상태를 표현해 주면 끝입니다.

 

페이지 이동은 앞에서 배운 a 링크를 이용하여 이동해 보겠습니다. (참고강좌 : http://cofs.tistory.com/152)

버튼의 눌림 상태는 class 속성으로 표현해 보겠습니다.

 

 

<section id="page1" data-role="page">
    <div style="overflow: hidden;" data-role="header">
        <h1>This is header</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#" class="ui-btn-active ui-state-persist">One</a></li>
                <li><a href="#page2">Two</a></li>
                <li><a href="#page3">Three</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->
    <div class="content" data-role="content">
        1 페이지 입니다.
    </div>
    
    <div style="overflow: hidden;" data-role="footer">
        <h4 style="text-align: center;">This is footer</h4>
    </div><!-- /footer -->
</section>
 
<section id="page2" data-role="page">
    <div style="overflow: hidden;" data-role="header">
        <h1>This is header</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#page1">One</a></li>
                <li><a href="#" class="ui-btn-active ui-state-persist">Two</a></li>
                <li><a href="#page3">Three</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->
    <div class="content" data-role="content">
        2 페이지 입니다.
    </div>
    
    <div style="overflow: hidden;" data-role="footer">
        <h4 style="text-align: center;">This is footer</h4>
    </div><!-- /footer -->
</section>
 
<section id="page3" data-role="page">
    <div style="overflow: hidden;" data-role="header">
        <h1>This is header</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#page1">One</a></li>
                <li><a href="#page2">Two</a></li>
                <li><a href="#" class="ui-btn-active ui-state-persist">Three</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->
    <div class="content" data-role="content">
        3 페이지 입니다.
    </div>
    
    <div style="overflow: hidden;" data-role="footer">
        <h4 style="text-align: center;">This is footer</h4>
    </div><!-- /footer -->
</section>

 

 

소스를 보시면 총 3개의 페이지가 있고 페이지 내부에는 각각 내비게이션바 (data-role="navbar" 속성을 가진 태그)가 있습니다.

내비게이션 바 내부에 보면 class="ui-btn-active ui-state-persist" 클래스가 있습니다. 이는 버튼이 클릭되었다는 것을 표시하는 css 클래스 입니다.

 

 

 

 

페이지를 이동할 때 앞에서 배운 data-transition, data-direction 속성을 이용하여 애니메이션을 준다면 조금 더 고급스러운 페이지 이동을 구현할 수 있습니다.

(참고강좌 : http://cofs.tistory.com/156)