Footer bar
Footer bar는 브라우저 하단에 위치하며 버튼, 텝, 링크 등 컴포넌트 요소 등을 넣을 수 있다.
기본코드
Footer bar는 기본적으로 검정색으로 나타나며 Footer bar의 높이는 Title 크기에 따라 달라진다.
Footer title
<div data-role="footer">
<h1>Footer title</h1>
</div>
색상 변경
기본 코드 <data-role="footer"> Tag에 data-theme='[적용테마: a~g]" 을 추가한다.
색상 유형은 Header bar의 색상변경 을 참고한다.
data-theme="b"
<div data-role="footer" data-theme="b">
<h1>data-theme="b"</h1>
</div>
버튼 추가
Footer bar에 Anchor 링크를 추가하면 자동으로 버튼이 생성된다.
버튼은 여러개 생성 할수 있으며 버튼은 자동으로 오른쪽 정렬 된다.
버튼에 모양은 UX Component ICon 부분을 참조 한다.
<div data-role="footer">
<a href="index.html" data-role="button" data-icon="delete">Remove</a>
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>
버튼 정렬
Footer bar에서 버튼을 그룹화 할때는 Footer에 <div data-role="controlgroup" data-type="horizontal">
로 버튼을 감싸준다
<div data-role="footer">
<div data-role="controlgroup" data-type="horizontal">
<a href="index.html" data-role="button" data-icon="delete">Remove</a>
<a href="index.html" data-role="button" data-icon="plus">Add</a>
<a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
<a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>
</div>
컴포넌트 추가
Footer bar에는 UX 컴포넌트를 추가 하여 화면 전환 및 조정을 용이하게 할 수 있다.
Tab 컴포넌트
Footer bar의 위치에Tab 컴포넌트 를 넣어 화면간 이동을 용이하게 할 수 있다.
Footer Tab 예시 보기
<div data-role="footer" data-theme="z" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="exHome.jsp">Home</a></li>
<li><a href="header.jsp">Header bar </a></li>
<li><a href="footer.jsp">Footer bar</a></li>
</ul>
</div>
</div>
기타 컴포넌트
Footer bar에 다른 컴포넌트를 넣을 수 있다.
선택하시오:
사과
바나나
포도
양파
<div data-role="footer" class="ui-bar" data-position="inline">
<label for="select-choice-1">Shipping:</label>
<select name="select-choice-1" id="select-choice-1" data-theme="a">
<option value="apple">사과</option>
<option value="banana">바나나</option>
<option value="grapes">포도</option>
<option value="onion">양파</option>
</select>
</div>
위치 선정
고정 위치
footer bar의 위치를 브라우저 맨 위/ 끝으로 고정된다.
스크롤 이벤트가 일어날 경우 Footer bar는 항상 브라우저의 맨 위와/끝에 나타난다.
Header bar의 <div data-role="footer">에 data-position="fixed" 를 추가 한다
fixed position 예시 보기
<div data-role="footer" data-position="fixed">
<h1>header title</h1>
</div>
전체 화면 모드
Header/footer bar의 위치를 브라우저 맨 위/ 끝으로 고정하거나 없앨 수 있다.
이벤트가 일어날 경우 Header/footer bar가 나타나거나 없어진다.
자세한 내용은 header bar 의 전체 화면 모드를 참고 한다.