10. jQuery Mobile 툴바(헤더바)

Index

08. jQuery Mobile 페이지(data-role="page")

09. jQuery Mobile 컨텐트

10. jQuery Mobile 툴바(헤더바)

11. jQuery Mobile 툴바(푸터바)

12. jQuery Mobile 툴바(내비게이션바)

 

 

jQuery Mobile에서 툴바(Toolbar)는 컨텐트 영역과는 별개의 영역으로 페이지의 상단,하단에 위치하는 영역이다. 툴바에서 헤더바, 푸터바, 내비게이션바가 있다. 툴바는 제목, 버튼 등을 포함한다.

 

 

헤더바

헤더바는 페이지 상단에 위치하는 툴바다. 주로 페이지의 제목이나 페이지 내비게이션용 버튼들이 위치한다. 버튼은 좌우 두개의 버튼만 가능하다.

 

<div data-role="header" data-position="fixed">

    <h1>제목</h1>

    <a href="#">Prev</a>

    <a href="#">Next</a>

</div>

 

data-position="fixed" 속성을 추가하면 헤더바는 항상 페이지 상단에 위치하게 된다.

한개 이상의 헤더바가 페이지에 존재할 수 있으며 정의된 순서대로 위에서 아래로 위치하게 된다.

 

<div id="index" data-role="page">
    <div data-role="header">
        <h1>Index</h1>
    </div>
    <div data-role="header">
        <h1></h1>
        <a href="home.html" class="ui-btn-right" data-icon="arrow-r">Home</a>
    </div>
    <div data-role="content">
    </div>

</div>

 

헤더바에 버튼이 하나인 경우 버튼이 좌측에 위치하게 된다. 우측에 배치하고자 하면 class="ui-btn-right" 속성을 추가한다. 버튼이 두개인 경우에는 자동으로 좌측에 하나 우측에 하나가 배치된다.

헤더바에 타이틀이 없으면 컨텐트 영역과 겹쳐져서 보여진다. 제목이 없더라도 <h1></h1> 을 넣어주면 겹쳐지지 않는다.

 

 

 

헤더바에 백버튼을 넣는 방법은 두가지 방법이 있다.

 

첫번째 방법은 페이지 정의용 <div> 태그에 data-add-back-btn="true" 속성을 추가하는 방법이다. 이때, 기본 표시 명칭은 "Back" 이다. 이 글자를 변경하기 위해서는 data-back-btn-text="버튼명" 속성을 추가해서 명칭을 변경한다.

 

두번재 방법은 헤더바에 data-rel="back" 속성을 갖는 <a> 태그를 추가한다. 이때 <a> 태그의 속성 href 는 무시된다. 

 

 

헤더바 정의할 때 사용할 수 있는 data-* 속성

data-* 속성	설명	값
data-add-back-btn	Back 버튼 추가	true | false (default)
data-back-btn-text	Back 버튼 글자	string
data-back-btn-theme	Back 버튼 테마	swatch letter(a-z)
data-position	헤더바 고정 여부	fixed
data-theme	헤더바 테마	swatch letter(a-z)

 

 

* 헤더바와 푸터바가 data-position="fixed" 속성에 의해서 고정된 상태에서 페이지 영역을 전체 화면 보기로 설정하면 스크롤의 상태와 상관없이 사용자의 탭에 의해서 숨기고 나타나게 할 수 있다.

 

<div data-role="page" data-fullscreen="true">

    <div data-role="header" data-position="fixed"> ... </div>

    <div data-role="content"> ... </div>

    <div data-role="footer" data-position="fixed"> ... </div>

</div>

 

 

관련글

jQuery Mobile 툴바(푸터바)

jQuery Mobile 툴바(내비게이션바)