jquery mobile 강좌 13 [ 내비게이션 바에 아이콘 달기 / navbar / data-icon ] (2)

jquery mobile 내비게이션에 아이콘(icon)을 달아보겠습니다.

 

아이콘을 생성하는 방법은 아주 심플합니다.

 

아이콘을 생성할 때에는 data-icon 속성을 부여합니다.

 

아이콘의 종류는 대략 다음과 같습니다.

 

모두 jquery mobile 에서 제공되는 아이콘 입니다.

 

 

 

 

소스를 보면서 아이콘을 적용하는 방법을 살펴보겠습니다.

    <div data-role="navbar">
        <ul>
            <li><a href="#" data-icon="grid">Summary</a></li>
            <li><a class="ui-btn-active" href="#" data-icon="star">Favs</a></li>
            <li><a href="#" data-icon="gear">Setup</a></li>
        </ul>
    </div><!-- /navbar -->

아주 간단합니다.

data-icon="아이콘명" 속성을 이용하여 a태그에 부여하면 자동으로 아이콘이 생성됩니다.

 

 

 

아이콘의 위치를 변경할 수도 있습니다.

data-iconpos 속성을 사용하여 top, right, left, bottom 의 위치로 이동 가능합니다.

아이콘을 아래로 이동시켜 보겠습니다.

    <div data-role="navbar" data-iconpos="bottom">
        <ul>
            <li><a href="#" data-icon="grid">Summary</a></li>
            <li><a class="ui-btn-active" href="#" data-icon="star">Favs</a></li>
            <li><a href="#" data-icon="gear">Setup</a></li>
        </ul>
    </div><!-- /navbar -->

 

 

 

속성 하나로 아이콘들의 위치를 이동할 수 있었습니다.

 

 

마지막으로 사용자가 원하는 아이콘으로도 변경이 가능합니다.

단, 이 방법은 css 를 수정해야 합니다.

    <style>
        .nav-glyphish-example .ui-btn { padding-top: 40px !important; }
        .nav-glyphish-example .ui-btn:after { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; 
                                                -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: 0 !important; 
                                                border-radius: 0 !important; }
        #chat:after { background:  url("http://api.jquerymobile.com/resources/navbar/glyphish-icons/09-chat2.png") 50% 50% no-repeat; background-size: 24px 22px; }
        #email:after { background:  url("http://api.jquerymobile.com/resources/navbar/glyphish-icons/18-envelope.png") 50% 50% no-repeat; background-size: 24px 16px;  }
        #login:after { background:  url("http://api.jquerymobile.com/resources/navbar/glyphish-icons/30-key.png") 50% 50% no-repeat;  background-size: 12px 26px; }
        #beer:after { background:  url("http://api.jquerymobile.com/resources/navbar/glyphish-icons/88-beermug.png") 50% 50% no-repeat;  background-size: 22px 27px; }
        #coffee:after { background:  url("http://api.jquerymobile.com/resources/navbar/glyphish-icons/100-coffee.png") 50% 50% no-repeat;  background-size: 20px 24px; }
        #skull:after { background:  url("http://api.jquerymobile.com/resources/navbar/glyphish-icons/21-skull.png") 50% 50% no-repeat;  background-size: 22px 24px; }
    </style>

 

위와 같이 css를 작성하고 내비게이션 소스를 작성해 보겠습니다.

    <div class="nav-glyphish-example" data-role="footer" data-theme="b">
        <div class="nav-glyphish-example" data-role="navbar" data-grid="d">
        <ul>
            <li><a id="chat" href="#" data-icon="custom">Chat</a></li>
            <li><a id="email" href="#" data-icon="custom">Email</a></li>
            <li><a id="skull" href="#" data-icon="custom">Danger</a></li>
            <li><a id="beer" href="#" data-icon="custom">Beer</a></li>
            <li><a id="coffee" href="#" data-icon="custom">Coffee</a></li>
        </ul>
        </div>
    </div>

 

그럼 다음과 같은 결과를 얻을 수 있습니다.