jQuery Mobile‎ > ‎툴바‎ > ‎

탐색 바


주로, 헤더 또는 푸터의 안에 정의 되며 <ul>로 구성되는 위젯이다. 한 줄에 최대 5개 까지 버튼을 추가할 수 있으며 각각 아이콘을 지정할 수도 있다. 만일 버튼이 5개 이상으로 추가 된다면 여러 줄로 나뉘어 표시된다. 활성화된 상태의 버튼을 지정하려면 링크의 class 속성에 ui-btn-active를 추가한다.

<footer data-role="footer">
<nav data-role="navbar">
<ul>
<li><a href="a.html" class="ui-btn-active">
하나</a></li>
<li><a href="b.html">
</a></li>
</ul>
</nav><!-- /navbar >
</footer>

버튼의 아이콘을 지정하려면 링크에 data-icon속성을 사용해서 기본 아이콘을 지정할 수 있다. 이 때 아이콘의 위치는 탐색 바에 data-iconpos 속성으로 지정하며 top, bottom, left, right값을 가질 수 있다.

<div data-role="navbar" data-iconpos="bottom">

탐색 바는 버튼들과 마찬가지로 부모의 테마를 상속 받는다. 탐색 바에 직접 테마를 적용할 수는 없으며 탐색바의 각 항목에 테마를 지정하려면 각각의 링크에 data-theme 속성을 지정한다.


Comments