jQuery를 모바일 네비게이션 바
네비게이션 바는 일반적으로 머리글 또는 바닥 글에서, 수평으로 정렬 된 링크의 그룹으로 구성
바는 내부에 랩 링크의 정렬되지 않은 목록으로 코딩 <div> 이 요소 data-role="navbar" 속성 :
예
<div data-role="header">
<div data-role="navbar" >
<ul>
<li><a href="#anylink">Home</a></li>
<li><a href="#anylink">Page Two</a></li>
<li><a href="#anylink">Search</a></li>
</ul>
</div>
</div>
»그것을 자신을 시도 기본적으로 탐색 모음 내의 링크는 자동으로 버튼 (대한 필요로 바뀝니다 class="ui-btn" 또는 data-role="button" ).
버튼은 그 내용으로 넓은 기본적으로 있습니다. 동일하게 버튼을 나눌 정렬되지 않은 목록을 사용하여 1 버튼 폭의 100 %를 소요, 2 버튼은 각각 50 %, 3 버튼 33.3 %, 당신은 네비게이션 바에서 5 개 이상의 버튼을 지정하는 경우 등 그러나, 그것은 바꿈 할 공유 여러 줄 (아래 "추가 예"참조).
탐색 버튼의 아이콘
데이터-icon 속성을 사용하여 탐색 버튼에 아이콘을 추가하려면 :
데이터 - 아이콘 "아이콘"장에 명시된 CSS 클래스와 동일한 값을 사용 때문이다. 유일한 차이점은 대신 지정하는 것입니다 class="ui-icon- value " , 당신의 속성 지정 data-icon=" value " .
| 속성 값 | 기술 | 상 |
|---|---|---|
| data-icon="home" | 집 | |
| data-icon="arrow-r" | 오른쪽 화살표 | |
| data-icon="search" | 수색 |
모든 jQuery를 모바일 단추 아이콘의 완전한 참고로, 우리로 이동하시기 바랍니다 jQuery를 모바일 아이콘 참조 .
위치 아이콘
그냥와 마찬가지로 "ui-btn-icon- position " : 아이콘이 탐색 버튼에 위치 할 위치 (이하 "아이콘"장에서 지정) 클래스를 선택할 수 있습니다 top, right, bottom 또는 left .
아이콘의 위치가 메뉴 바에 컨테이너 세트 - 그것은 각 링크 버튼을 배치 할 수 없다. 사용 data-iconpos 위치를 지정하는 속성 :
| 속성 값 | 기술 | 예 |
|---|---|---|
| data-iconpos="top" | 최고 아이콘 정렬 | 시도 해봐 |
| data-iconpos="right" | 마우스 오른쪽 버튼으로 아이콘 정렬 | 시도 해봐 |
| data-iconpos="bottom" | 아래 아이콘 정렬 | 시도 해봐 |
| data-iconpos="left" | 왼쪽 아이콘 정렬 | 시도 해봐 |
기본적으로 탐색 버튼의 아이콘 텍스트 위에 배치됩니다 (data-iconpos="top") .
활성 버튼
네비게이션 바에있는 링크를 탭하면 / 클릭, 선택된 (누름) 봐집니다.
링크를 탭합니다 사용하지 않고이 모습을 달성하기 위해 class="ui-btn-active" :
여러 페이지를 들어, 사용자가있는 페이지를 나타내는 각 버튼의 "선택"보기를 할 수 있습니다. 이렇게하려면 추가 "ui-state-persist" 당신의 연결에 클래스를,뿐만 아니라 "ui-btn-active" 클래스 :
더 예
콘텐츠 Navbars
어떻게 내부 탐색 모음 추가 data-role="content" .
바닥 글에 Navbars
어떻게 바닥 글 내부 탐색 모음을 추가 할 수 있습니다.
5 개 이상의 버튼
탐색 줄에 10 버튼의 데모