LeonKim

  <div id="mainPage" data-role="page">

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

                           <h1>Header</h1>

                    </div><!-- /header -->

                    <div data-role="content">

                           <p>Main Page</p> 

  <p><a href="#slidePage" data-transition="slide">Slide Page</a></p>   

  <p>11111</p>

  <p>11111</p>

  <p>11111</p>    

  <p>11111</p>

  <p>11111</p>

  <p>11111</p>

  <p>11111</p>

  <p>11111</p>

  <p>11111</p>

  <p>11111</p>

  <p>11111</p>

  <p>11111</p>

  <p>11111</p>

  <p>11111</p>

  <p>11111</p>

  <p>11111</p>

  <p>11111</p>

  <p>11111</p>

                    </div><!-- /content -->                          //FOOTER

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

                         <h1>Fixed toolbars</h1>

                    </div><!-- /Footer -->

       </div><!-- /page -->

Header

Content

Footer

와 같은 삼단 구조로 이루어져 있다.

아이폰 어플리케이션을 만지다 보면,

Header, Footer에 위치하는 툴바는 결국 Header 와 Footer에 위치할 툴바를 어떠한 방식으로 배치 시킬지..

- inline
- fixed
- fullScreen

data-position="inline" 

data-position="fixed"

data-fullscreen="true"  

위 세가지 옵션을 이용하여 Header와 Footer를 위치 시킨다.

헤더에 버튼등을 위치 시키는 방법

버튼의 종류는 jQuery Mobile에서 좀 더 알아보도록 하자.

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

<a href="#" data-icon="delete_c">Edit</a>  //Header Toolbar에 왼쪽 버튼

        <h1>Header</h1>

<a href="#" data-icon="info" data-iconpos="right">Info</a> // 오른쪽 버튼    

</div><!-- /header -->

Header bar에 Back button이 자동으로 페이지 이동시 생기는데 요거를 방지해주기 위한 방법

 <div data-role="header"  data-theme="c" data-nobackbtn="true">