최고의 jQuery를 모바일 도구 모음 튜토리얼 2024년, 이 튜토리얼에서는 머리 바,예,예,예,테일 바,예,예,예,머리와 꼬리 바 바 위치,인라인 위치 (기본값),고정 위치,전체 화면 위치,더 많은 예제,를 배울 수 있습니다.
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>
»시도
머리와 꼬리 바 바 위치
머리와 꼬리는 세 가지 방법으로 배치 할 수 있습니다 :
- 인라인 - 기본. 미국 내부 헤더 바 및 후면 바 및 페이지 내용.
- 고정 - 머리와 꼬리 바 바는 페이지의 상단과 하단에 고정.
- 전체 화면이 - 고정 위치 결정 모드는 기본적으로 페이지의 상단과 하단에 고정 된 헤드와 꼬리 바 바와 동일하다. 이미지 나 동영상 카테고리 응용 프로그램의 의미로 제기 된 화면을 탭하지 않는 도구 모음을 스크롤하면 다시 자동으로 표시되지 않습니다 때 그가 화면 밖으로했다 때 매우 유용합니다. 그것이 가장 특별한 경우에 사용되도록이 모드 도구 모음은 페이지의 콘텐츠를 포함 않습니다.
머리와 꼬리 바 바의 위치를 데이터의 위치 속성을 사용하여 :
인라인 위치 (기본값)
<div data-role="header" data-position="inline" ></div>
<div data-role="footer"
data-position="inline" ></div>
»시도 고정 위치
<div data-role="header" data-position="fixed" ></div>
<div data-role="footer"
data-position="fixed" ></div>
»시도 = "고정"데이터 위치를 사용하여 전체 화면 위치를 활성화하고 요소에 데이터 전체 화면 속성을 추가하려면 :
전체 화면 위치
<div data-role="header"
data-position="fixed" data-fullscreen="true" ></div>
<div data-role="footer"
data-position="fixed" data-fullscreen="true" ></div>
»시도 팁 : 전체 타겟팅 사진, 이미지와 비디오에 적용됩니다.
팁 : 고정 된 위치와 표시 및 열 머리와 꼬리 줄을 숨길 화면을 클릭하여 전체 화면을 대상으로.
더 많은 예제
도구 모음 표시 아이콘 만
도구 모음 아이콘이 표시에서만 당신은 UI-btn을-아이콘 - notext 클래스를 사용할 수 있습니다.