본문 바로가기

jQuery/jQueryMobile

[jQueryMobile] jQuery Mobile 탭 바

반응형




■ jQuery Mobile 탭 바



01. 헤더나 푸터에  div 태그를 생성하고 data-role 속성을 navbar로 입력합니다.

    이어서 해당 div 태그 안에 ul 태그로 리스트를 만들면, 탭 바가 생성된다.

 navigation_bar.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <a href="javascript:" data-icon="home" class="ut-btn-left">홈</a>
        <h1>Mobile</h1>
        <a href="javascript:" data-icon="gear" class="ut-btn-right">설정</a>
        <div data-role="navbar">
            <ul>
                <li><a href="javascript:">One</a></li>
                <li><a href="javascript:">Two</a></li>
                <li><a href="javascript:">Three</a></li>
                <li><a href="javascript:">Four</a></li>
                <li><a href="javascript:">Five</a></li>
                <!-- <li><a href="javascript:">Six</a></li> --><!-- 6개가 넘어가면 행이 추가됨 -->
            </ul>
        </div>
    </div>
    <div data-role="center">
        <ul data-role="listview">
            <li data-role="list-divider">TWICE</li>
            <li><a href="javascript:">나연</a></li>
            <li><a href="javascript:">정연</a></li>
            <li><a href="javascript:">모모</a></li>
            <li><a href="javascript:">사나</a></li>
            <li><a href="javascript:">지효</a></li>
            <li><a href="javascript:">미나</a></li>
            <li><a href="javascript:">다현</a></li>
            <li><a href="javascript:">채영</a></li>
            <li><a href="javascript:">쯔위</a></li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="javascript:">1</a></li>
                <li><a href="javascript:">2</a></li>
                <li><a href="javascript:">3</a></li>
                <li><a href="javascript:">4</a></li>
                <li><a href="javascript:">5</a></li>
                <!-- <li><a href="javascript:">6</a></li> --><!-- 6개가 넘어가면 행이 추가됨 -->
            </ul>
        </div>
    </div>
</div>
</body>
</html>




02. 위코드를 실행한 결과를 보면 헤더와 푸터 영역에 탭바가 추가된 모습을 확인 할 수 있다.





03. 위 코드에서 6(SIX)번의 주석을 해제하며 아래와 같이 자동으로 행이 추가되 어 나오니 이점 유의해야 한다.










■ 탭 바에 icon 사용하고 활성화 표시



01. 탭 바 안에 들어 있는 버튼 하나하나에 data-icon 속성을 입력하면 툴바의 버튼과 마찬가지로 아이콘을 넣을 수 있다.

    추가적으로 탭 버튼을 활성화 시키려면 class 속성을 ui-btn-active로 입력하면 된다.

 navigation_icon.php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>jQuery Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="./css/jquery.mobile-1.4.5.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header" data-position="fixed">
        <a href="javascript:" data-icon="home" class="ut-btn-left">홈</a>
        <h1>Mobile</h1>
        <a href="javascript:" data-icon="gear" class="ut-btn-right">설정</a>
        <div data-role="navbar">
            <ul>
                <li><a href="javascript:" data-icon="grid">One</a></li>
                <li><a href="javascript:" data-icon="star" class="ui-btn-active">Two</a></li>
                <li><a href="javascript:" data-icon="alert">Three</a></li>
                <li><a href="javascript:" data-icon="info">Four</a></li>
                <li><a href="javascript:" data-icon="grid">Five</a></li>
            </ul>
        </div>
    </div>
    <div data-role="center">
        <ul data-role="listview">
            <li data-role="list-divider">TWICE</li>
            <li><a href="javascript:">나연</a></li>
            <li><a href="javascript:">정연</a></li>
            <li><a href="javascript:">모모</a></li>
            <li><a href="javascript:">사나</a></li>
            <li><a href="javascript:">지효</a></li>
            <li><a href="javascript:">미나</a></li>
            <li><a href="javascript:">다현</a></li>
            <li><a href="javascript:">채영</a></li>
            <li><a href="javascript:">쯔위</a></li>
        </ul>
    </div>
    <div data-role="footer" data-position="fixed">
        <h1>FOOTER</h1>
    </div>
</div>
</body>
</html>




02. 아래 탭을 확인해 보면 위에서 classui-btn-active로 지정한 Two버튼만 활성화 되어 있는것을 알 수 있다.






반응형