jQuery를 모바일 도구 모음

일반적으로 머리와 꼬리에있는 도구 모음 요소 - 탐색 쉽게 접근을합니다

머리 바

헤드 열은 일반적으로 페이지의 타이틀 / 로고 또는 하나 또는 두 개의 버튼 (보통 홈 페이지 또는 검색 옵션)을 포함한다.

사용자는 헤드의 좌우 측면에 버튼을 추가 할 수있다.

다음 코드는 제목 텍스트의 머리의 오른쪽에 단추를 추가, 제목 텍스트의 머리의 왼쪽에 단추를 추가합니다 :

예

<사업부의 데이터 역할 = "헤더">
<a href="#" class="ui-btn ui-icon-home ui-btn-icon-left"> 홈 </a>
<H1> 내 홈페이지에 오신 것을 환영합니다 </ H1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left"> 검색 </a>를
</ DIV>

»시도

다음 코드는 제목 텍스트의 머리의 왼쪽에 단추를 추가합니다 :

예

<사업부의 데이터 역할 = "헤더">
<a href="#" class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left"> 홈 </a>
<H1> 내 홈페이지에 오신 것을 환영합니다 </ H1>
</ DIV>

»시도

버튼 링크가 <H1> 뒤에 위치 넣을 경우, 소자는 적절한 텍스트를 표시 할 수 없다. 제목의 머리의 오른쪽에 단추를 추가하려면, "UI-btn을 오른쪽"로 클래스를 지정합니다

예

<사업부의 데이터 역할 = "헤더">
<H1> 내 홈페이지에 오신 것을 환영합니다 </ H1>
<a href="#" class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left"> 검색 </a>를
</ DIV>

»시도

	헤더는 하나 또는 두 개의 버튼을 제한하지 않고 꼬리를 포함 할 수있다.

테일 바

후면 열 머리글 바보다 유연한 -, 그것은 많은 버튼을 포함 할 수 있습니다 더 많은 기능과 변동성 자신의 페이지에 걸쳐 :

예

<사업부의 데이터 역할 = "바닥 글">
<a href="#" class="ui-btn ui-icon-plus 페이스 북 </a>에에 나를 따르라 ui-btn-icon-left">
<a href="#" class="ui-btn ui-icon-plus 트위터 </a>에에 나를 따르라 ui-btn-icon-left">
<a href="#" class="ui-btn ui-icon-plus 인스 타 그램 </a>에에 나를 따르라 ui-btn-icon-left">
</ DIV>

»시도

꼬리를 서로 다른 스타일의 머리 (아무 패딩과 공간을, 그리고 버튼이 중앙에 있지 않습니다) 참고. 우리는이 문제를 해결하는 간단한 패턴을 사용할 수있다 :

예

<사업부의 데이터 역할 = "바닥 글"스타일 = "텍스트 정렬 : 센터;">

»시도

또한 후방 수평 또는 수직 결합의 버튼을 사용할 수있다 :

예

<사업부의 데이터 역할 = "바닥 글"스타일 = "텍스트 정렬 : 센터;">
<DIV 데이터 역할 = "controlgroup "데이터 유형 = "수평">
<a href="#" class="ui-btn ui-icon-plus 페이스 북 </a>에에 나를 따르라 ui-btn-icon-left">
<a href="#" class="ui-btn ui-icon-plus 트위터 </a>에에 나를 따르라 ui-btn-icon-left">
<a href="#" class="ui-btn ui-icon-plus 인스 타 그램 </a>에에 나를 따르라 ui-btn-icon-left">
</ DIV>
</ DIV>

»시도

머리와 꼬리 바 바 위치

머리와 꼬리는 세 가지 방법으로 배치 할 수 있습니다 :

인라인 - 기본. 미국 내부 헤더 바 및 후면 바 및 페이지 내용.
고정 - 머리와 꼬리 바 바는 페이지의 상단과 하단에 고정.
전체 화면이 - 고정 위치 결정 모드는 기본적으로 페이지의 상단과 하단에 고정 된 헤드와 꼬리 바 바와 동일하다. 이미지 나 동영상 카테고리 응용 프로그램의 의미로 제기 된 화면을 탭하지 않는 도구 모음을 스크롤하면 다시 자동으로 표시되지 않습니다 때 그가 화면 밖으로했다 때 매우 유용합니다. 그것이 가장 특별한 경우에 사용되도록이 모드 도구 모음은 페이지의 콘텐츠를 포함 않습니다.

머리와 꼬리 바 바의 위치를 데이터의 위치 속성을 사용하여 :