jQuery를 모바일 도구 모음
도구 모음 요소는 종종 머리글과 바닥 글을 내부에 배치됩니다 - "쉽게 접근"탐색 :
헤더 바
헤더는 페이지의 상단에 위치하며, 일반적으로 페이지 제목 / 로고 또는 하나 또는 두 개의 버튼 (일반적으로 가정, 옵션 또는 검색)를 포함한다.
당신은 왼쪽 및 / 또는 헤더의 오른쪽에 버튼을 추가 할 수 있습니다.
아래의 코드는, 왼쪽에 '홈'버튼을 추가 할 것입니다 및 헤더 제목 텍스트의 오른쪽에있는 "검색"버튼을 :
예
<div data-role="header">
<a href="#"
class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
<a href="#" class="ui-btn ui-icon-search ui-btn-icon-left">Search</a>
</div> »그것을 자신을 시도 다음 코드는 헤더 제목의 왼쪽에 단추를 추가합니다 :
예
<div data-role="header">
<a href="#"
class="ui-btn ui-btn-left ui-icon-home ui-btn-icon-left">Home</a>
<h1>Welcome To My Homepage</h1>
</div> »그것을 자신을 시도 다음 코드는 헤더 제목의 오른쪽에 단추를 추가합니다 :
예
<div data-role="header">
<h1>Welcome To My Homepage</h1>
<a href="#"
class="ui-btn ui-btn-right ui-icon-home ui-btn-icon-left">Search</a>
</div> »그것을 자신을 시도 바닥 글에는 제한이 없습니다 동안 헤더는 하나 또는 두 개의 버튼을 포함 할 수 있습니다.
바닥 글 바
바닥 글은 페이지 하단에 있습니다.
: 그것은 더 많은 기능과 페이지에 걸쳐 변경하고, 필요에 따라서 많은 버튼을 포함 할 수 있습니다 - 바닥 글 헤더보다 더 유연
예
<div data-role="footer">
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div> »그것을 자신을 시도 팁 : 바닥 글에있는 버튼은 기본적으로 중앙에 있지. 이 문제를 해결하려면 CSS를 사용 :
당신은 수평 또는 수직으로 바닥 글에 수 또한 그룹 버튼 :
예
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup"
data-type="horizontal" >
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On
Facebook</a>
<a href="#" class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Twitter</a>
<a href="#"
class="ui-btn ui-icon-plus ui-btn-icon-left">Add Me On Instagram</a>
</div>
</div> »그것을 자신을 시도 위치 머리글 및 바닥 글
머리글과 바닥 글은 세 가지 방법으로 배치 할 수 있습니다 :
- Inline - 기본. 머리글과 바닥 글은 페이지의 콘텐츠와 인라인입니다
- Fixed - 머리글과 바닥 글은 페이지의 상단과 하단에 위치한 상태로 유지됩니다
- Fullscreen - 같은 고정 동작 해 머리글과 바닥 글은뿐만 아니라 페이지의 콘텐츠를, 상단과 하단에 위치한 상태로 유지됩니다. 또한 약간 투시되고
당신의 머리글과 바닥 글의 위치를 데이터 위치 속성을 사용합니다 :
인라인 위치 (기본값)
<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> »그것을 자신을 시도 팁 : 전체 화면 위치가 사진, 이미지와 동영상에 이상적이다.
팁 : 화면을 탭하면 숨기고 모두 고정 전체 화면 위치에 대한 표시 머리글과 바닥 글 것입니다.
더 예
도구 모음에 아이콘 만 표시
은 Using ui-btn-icon-notext 클래스 만 머리글과 바닥 글 버튼의 아이콘을 표시합니다.