jQuery Mobile 네비게이션 패널

jQuery Mobile 네비게이션 패널

네비게이션 바는 수평으로 배열된 링크로 구성되며, 일반적으로 헤더나 푸터 내에 위치합니다.

기본적으로, 네비게이션 바의 링크는 자동으로 버튼으로 변환됩니다(data-role="button"는 필요하지 않습니다).

네비게이션 바를 정의하기 위해 data-role="navbar" 속성을 사용하세요:

예제

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">홈페이지</a></li>
      <li><a href="#anylink">페이지 2</a></li>
      <li><a href="#anylink">검색</a></li>
    </ul>
  </div>
</div>

자신의 손으로 시도해 보세요

ヒント：버튼의 너비는 기본적으로 내용과 일치합니다. 버튼을 균등하게 나누기 위해 불리스트를 사용하세요: 하나의 버튼은 100%의 너비를 차지하고, 두 개의 버튼은 각각 50%의 너비를 공유하고, 세 개의 버튼은 33.3%，이렇게 계속됩니다. 그러나, 네비게이션 바에서 다섯 개 이상의 버튼을 설정하면 여러 행으로 굽습니다(페이지 하단의 "더 많은 예제" 참조).

활성 버튼

네비게이션 바의 링크가 클릭될 때, 선택 외관을 얻습니다(박력).

이 외관을 클릭하지 않고도 구현하려면 class="ui-btn-active"를 사용하세요:

예제

<li><a href="#anylink" class="ui-btn-active">首页</a></li>

자신의 손으로 시도해 보세요

여러 페이지에 대해, 각 버튼에 "선택" 외관을 설정해야 할 수 있습니다. 이를 위해 그런 경우, 링크에 "ui-state-persist" 클래스와 "ui-btn-active" 클래스를 추가하세요:

예제

<li><a href="#anylink" class="ui-btn-active ui-state-persist">首页</a></li>

자신의 손으로 시도해 보세요

더 많은 예제

콘텐츠의 네비게이션 패널
data-role="content"에 네비게이션 패널을 추가하는 방법
푸터의 네비게이션 패널
푸터에 네비게이션 패널을 추가하는 방법
네비게이션 패널에서 아이콘을 위치시키는 방법
푸터 내부 네비게이션 패널에 아이콘을 배치하는 방법
5개 이상의 버튼
네비게이션 패널에 있는 열 가지 버튼을 표시하는 데 사용됩니다.