[jQuery Mobile] Web/App Hybrid 만들기 4. Footer Bar

4. Footer 

1. data-icon ( delete, plus, arrow-u, arrow-d )

<div data-role="footer" data-position="fixed">   <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>

2. data-role="controlgroup" data-type="horizontal">

<div data-role="footer" data-position="fixed">   <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>

버튼을 그룹화 할때 위와 같이 사용한다.

3. Footer bar에 TAP 컴포넌트

<div data-role="footer" 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 Start -->   <div data-role="footer" class="ui-bar" data-position="fixed">     <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>