간편한 header, footer

1.  header에 뒤로가는 버튼 자동 생성
1.1 페이지 요소에 자동으로 Back버튼을 지정하는 방법 
 <div data-role="page" id="page2" data-add-back-btn="true"> 
1. 2 라벨명 지정
 <div data-role="page" id="page2" data-add-back-btn="true" data-back-btn-text="뒤로"> 

2 header가 아닌곳에 back버튼을 넣으려면..
2.1 a요소에 data-rel속성에 back을 설정한 링크 추가
<a href="#" data-rel="back"></a>

※ back기능은 편리하긴 하나 방문 페이지가 복잡한 경우 돌아가는 위치가 달라지므로 추천하지 않음


해결방법~~
1.1 header에 임의 버튼 생성하기
1.2 버튼정렬하기
  <div data-role="header">
   <a href="#page2">home</a>
    <h1>페이지 1</h1>
   <a href="#page2" class="ui-btn-right">save</a>
  </div>

2.1 footer에 버튼생성
   : footer에는 여백설정이 없으므로 class속성을 지정해줘야함
  <div data-role="footer" class="ui-bar">
   <a href="#page2">Remove</a>
   <a href="#page2">Add</a>
  </div>

---

1. 네비게이션바 추가
2. 스크롤되지않게 고정하기
  : 공통으로 사용되는 footer에 data-id를 주면 풋터가 고정됨
  <div data-role="header" data-position="fixed">
   <h1>페이지 1</h1>
   <div data-role="navbar">
       <ul>
         <li><a href="#page2">One</a></li>
         <li><a href="#page2">Two</a></li>
    </ul>
   </div>
  </div> 
....
  <div data-role="footer" data-position="fixed" data-id="footerID"><h4>footer 1</h4></div>
  </div>

3. header, footer를 fixed한후 page에 풀스크린 요소를 추가할수있음
: data-fullscreen="true"



참고: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/headers/
http://view.jquerymobile.com/1.3.2/dist/demos/widgets/footers/