기본적인 내비게이션을 만들고 내비게이션을 사라지게 하거나 나타내는 연습을 합니다.

 

내비게이션 바는 페이지 사이의 이동 버튼으로 많이 사용됩니다.

보통 페이지의 헤더나 푸터에 위치하며 내용 안에도 위치할 수 있습니다.

 

기본적인 네비게이션 소스를 보겠습니다.

    <div data-role="navbar">
        <ul>
            <li><a class="ui-btn-active" href="#">One</a></li>
            <li><a href="#">Two</a></li>
        </ul>
    </div><!-- /navbar -->
cs

 

data-role="navbar" 속성의 div 로 ul 태그를 감싸고 있습니다.

이때 ul 태그의 li 태그들이 네비게이션 버튼으로 사용됩니다.

li 태그 내부의 a 태그의 class="ui-btn-active" 속성은 선택이 되어져 있는 상태를 의미합니다.

또한 버튼을 클릭했을때 상태는 jquery mobile 에서 자동으로 관리합니다.

 

 

버튼은 나란히 최대 5개까지 만들 수 있습니다. 모두 1/n 의 너비를 가지게 됩니다.

1개 일 경우 너비가 100%, 2개일 경우 각각 50%, 3개일 경우 33.3% .... 5개일 경우 20% 의 너비를 가집니다.

 



 

단, 버튼이 6개가 넘어가면 줄이바뀝니다.

    <div data-role="navbar">
        <ul>
            <li><a class="ui-btn-active" href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
            <li><a href="#">Five</a></li>
            <li><a href="#">Six</a></li>
        </ul>
    </div><!-- /navbar -->
cs

 

 

 

 

 

 

 

 

네비게이션을 해더 (header) 또는 푸터(footer)와 함께 사용할 수 도 있습니다.

 

    <div style="overflow: hidden;" data-role="header">
        <h1>This is header</h1>
        <a class="ui-btn-right" href="#" data-icon="gear">Options</a>
        <div data-role="navbar">
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->
cs

 

 

 

 

 

    <div style="overflow: hidden;" data-role="footer">
        <h4 style="text-align: center;">This is footer</h4>
        <div data-role="navbar">
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
cs

 

 

 

 

해더 숨기기, 나타나기, 접기 등 모바일 웹이나 하이브리드 앱을 돌아다니다 보면 내비게이션이나 해더 또는 푸터가 화면을 클릭하면 나오고 또는 접히거나 사라지거나 등 화면에 집중할 수 있도록 유동적으로 움직이는 것을 볼 수 있습니다.

이는 data 속성을 추가하여 쉽게 구현할 수 있습니다.

 

2개 속성으로 구현 가능한데 data-position 속성과 data-fullscreen 속성이 있습니다.

해더나 푸터 속성을 가진 영역에 data-position="fixed" 속성을 주게 되면 빈 화면을 클릭할 때 화면에서 나타났다가 접혔다가 하는 것을 볼 수 있습니다. 하지만 해더나 푸터는 자기의 영역을 가지고 있습니다.

여기에 data-fullscreen="true" 함께 주게되면 해더나 푸터는 자기의 영역을 잃고 공중에 뜨는 absolute 상태가 됩니다.

내용의 위에서 클릭하면 나타났다가 접혔다가 하게 됩니다. 물론 내용은 가리게 되지만 투명도를 가지고있어 뒤에 내용이 있다는 것은 알 수 있습니다.

 



 

다음 소스로 직접 실행해 보시기 바랍니다.

화면을 작게 만들어서 스크롤이 생기게 한 후 테스트 해보세요.

<section id="page1" data-role="page">
    <div style="overflow: hidden;" data-role="header" data-position="fixed" data-fullscreen="false">
        <h1>This is header</h1>
        <a class="ui-btn-right" href="#" data-icon="gear">Options</a>
        <div data-role="navbar">
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /header -->
    
    <div data-role="navbar">
        <ul>
            <li><a class="ui-btn-active" href="#">One</a></li>
            <li><a href="#">Two</a></li>
        </ul>
    </div><!-- /navbar -->
        
    <br/>
    <br/>
    <div data-role="navbar" data-grid="d">
        <ul>
            <li><a class="ui-btn-active" href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
            <li><a href="#">Five</a></li>
        </ul>
    </div><!-- /navbar -->
        
    <br/>
    <br/>
    <div data-role="navbar">
        <ul>
            <li><a class="ui-btn-active" href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
            <li><a href="#">Five</a></li>
            <li><a href="#">Six</a></li>
        </ul>
    </div><!-- /navbar -->
    
    <br/>
    <br/>
    
    <div style="overflow: hidden;" data-role="footer" data-position="fixed" data-fullscreen="false">
        <h4 style="text-align: center;">This is footer</h4>
        <div data-role="navbar">
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </div><!-- /navbar -->
    </div><!-- /footer -->
</section>
cs

 

data-position="fixed"    data-fullscreen="false" 

 

 

data-position="fixed"    data-fullscreen="true" 

 

 

by 개발자 CofS 2016.03.16 16:46