Back

꼬리말 일반버튼

Home

1. 꼬리말 영역에 버튼을 배치했습니다.

2. 꼬리말 영역은 하단에 고정했습니다.

3. 외부 파일 링크는 rel="external"을 사용합니다.

3. 꼬리말 영역에 class="ui-bar" 스타일을 적용했습니다.

4. "Page1" 버튼에는 class="ui-btn-active ui-state-persist" 스타일로 활성표시를 적용했습니다.

Index Page1 Page2 Page3 Page4 Page5
Back

꼬리말 그룹버튼

Home

1. 꼬리말 영역에 그룹버튼을 배치했습니다.

2. 그룹버튼에 data-type="horizontal" 속성을 사용했습니다.

3. 꼬리말 영역은 하단에 고정했습니다.

4. 외부 파일 링크는 rel="external"을 사용합니다.

5. 꼬리말 영역에 class="ui-bar" 스타일을 적용했습니다.

6. "Page2" 버튼에는 활성표시를 적용했습니다.

Index Page1 Page2 Page3 Page4 Page5
Back

머리말과 꼬리말의 기본 네비게이션바

Home

1. 머리말 영역에 1개의 버튼이 있는 네비게이션바를 배치했습니다.

2. 꼬리말 영역에 5개의 버튼이 있는 네비게이션바를 배치했습니다.

3. "Page3" 버튼에는 활성표시를 적용했습니다.

4. 꼬리말 영역은 하단에 고정했습니다.

Back

풀스크린과 꼬리말 숨김

Home

1. 꼬리말 영역에 6개의 버튼이 있는 네비게이션바를 배치했습니다.

2. 풀스크린 페이지 영역

3. 풀스크린일 경우 내용영역에 여백설정 보정

4. 자바스크립트로 풀스크린에서 꼬리말 숨김, 클릭하면 꼬리말 보임

5. 꼬리말 영역은 하단에 고정했습니다.

6. "Page4" 버튼에는 활성표시를 적용했습니다.

Back

꼬리말 선택메뉴

Home

1. 꼬리말 영역에 <select> 태그로 선택 메뉴를 배치했습니다.

2. data-role="controlgroup" 속성으로 일반버튼과 선택메뉴를 하나로 묶어줍니다.

3. 선택메뉴에서 "Page5"가 선택된 상태로 처리합니다.

4. 자바스크립트에서 선택메뉴를 선택하면 페이지 이동할 수 있게 합니다.