jQuery Mobile 툴바

jQuery Mobile 툴바

工具栏 요소는 일반적으로页眉와页脚에 배치됩니다 - “이미 방문한” 탐색을 위해서입니다：

标题栏

页眉는 일반적으로页眉 타이틀/LOGO 또는 하나 또는 두 개의 버튼(대개 홈페이지, 옵션 또는 검색 버튼)을 포함합니다。

页眉에 좌측 또는/또는 우측에 버튼을 추가할 수 있습니다。

아래 코드는页眉 타이틀 텍스트의 좌측에 버튼을 추가하고, 우측에 버튼을 추가합니다：

예제

<div data-role="header">
  <a href="#" data-role="button">홈페이지</a>
  <h1>이곳에 오신 것을 환영합니다</h1>
  <a href="#" data-role="button">검색</a>
</div>

직접 시험해 보세요

아래 코드는页眉 타이틀의 좌측에 버튼을 추가합니다：

<div data-role="header">
  <a href="#" data-role="button">홈페이지</a>
  <h1>이곳에 오신 것을 환영합니다</h1>
</div>

그러나, <h1> 요소 뒤에 버튼 링크를 배치하면 그것은 텍스트의 우측에 표시되지 않습니다.页眉 타이틀의 우측에 버튼을 추가하려면, 클래스 이름 "ui-btn-right"를 지정하세요：

예제

<div data-role="header">
  <h1>이곳에 오신 것을 환영합니다</h1>
  <a href="#" data-role="button" class="ui-btn-right">검색</a>
</div>

직접 시험해 보세요

푸시:页眉은 하나나 두 개의 버튼을 포함할 수 있지만,页脚에는 제한이 없습니다。

页脚栏

页眉에 비해,页脚는 더 유연합니다 - 그들은 더 실용적이고 다양하므로 필요한 수의 버튼을 포함할 수 있습니다：

예제

<div data-role="footer">
  <a href="#" data-role="button">新浪微博으로 중계</a>
  <a href="#" data-role="button">腾讯微博으로 중계</a>
  <a href="#" data-role="button">QQ 공간으로 중계</a>
</div>

직접 시험해 보세요

주의사항：하단과 헤더의 스타일은 다릅니다（때문에 여백이 줄어들고, 버튼은 중앙에 없습니다）。이 문제를 수정하려면 하단 설정에 클래스 이름 "ui-btn"을 추가하세요:

예제

<div data-role="footer" class="ui-btn">

직접 시험해 보세요

하단에 버튼을 수평이나 수직으로 조합할 수 있습니다:

예제

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">新浪微博으로 중계</a>
    <a href="#" data-role="button" data-icon="plus">腾讯微博으로 중계</a>
    <a href="#" data-role="button" data-icon="plus">QQ 공간으로 중계</a>
  </div>
</div>

직접 시험해 보세요

헤더와 푸터 정위치 설정

헤더와 푸터를 배치하는 방법은 세 가지가 있습니다：

  • Inline - 기본 설정. 헤더와 푸터는 페이지 내용과 행 내에 위치합니다.
  • 고정 - 페이지와 푸터는 페이지 상단과 하단에 남아 있습니다.
  • 전체 화면 - fixed와 유사합니다; 페이지와 푸터는 페이지 상단과 하단에 남아 있으며, 페이지 내용 위에도 보입니다. 또한 약간 투명합니다

헤더와 푸터를 정위치로 설정하려면 data-position 속성을 사용하세요：

Inline 정위치（기본 설정）

<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>

직접 시험해 보세요

전체 정위치를 활성화하려면 data-position="fixed"를 사용하고, 해당 요소에 data-fullscreen 속성을 추가하세요：

전체 화면 정위치

<div data-role="header" data-position="fixed" data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"} data-fullscreen="true"</div>

직접 시험해 보세요

푸시:fullscreen은 사진, 이미지 및 비디오에 매우 적합합니다.

푸시:fixed 및 fullscreen 위치에 대해, 터치 스크린은 헤더 및 푸터를 숨기고 표시합니다.