JQM memiliki support terhadap beberapa bentuk header yang biasa ditemui pada aplikasi mobile. Fitur ini dapat diaktifkan melalui penggunaan susunan/struktur markup yang dikenali oleh JQM.

Header

setiap page bisa berisi header, content, dan footer.
untuk bagian header, JQM menyediakan beberapa konfigurasi yang siap digunakan.
konfigurasi tersebut antara lain,

1. Centered title + header height
   konfigurasi ini dapat diaktifkan dengan menggunakan markup berikut

   <div data-role="header">
       <h1>App Title</h1>
   </div>

   See the Pen Header Auto Height by Moh Hasbi Assidiqi (@mohhasbias) on CodePen.

   
   Dengan menggunakan tag h1 pada data-role="header", JQM akan memproses-nya menjadi sebuah header yang sesuai dengan dengan standar header pada aplikasi mobile.

2. Left and Right button
   konfigurasi ini dapat digunakan untuk menambahkan tombol yang biasa muncul pada bagian kiri dan kanan dari header bar.
   bentuk markup-nya sebagai berikut

   <div data-role="header">
     <a href="">Button 1</a>
     <h1>App Title</h1>
     <a href="">Button 2</a>
   </div>

   See the Pen Header Buttons by Moh Hasbi Assidiqi (@mohhasbias) on CodePen.

   markup tersebut akan diproses oleh JQM, dimana links akan diubah menjadi button

3. Menambahkan tombol back
   konfigurasi ini dapat digunakan untuk implementasi tombol back. Tidak perlu mengutak-atik history menggunakan javascript. Sudah disediakan oleh JQM, caranya dengan menggunakan empty link dengan tambahan atribut data-rel="back" seperti berikut ini

   <div data-role="header">
     <a href="" data-rel="back">Back</a>
     <h1>App Title</h1>
   </div>

   See the Pen Header Back Buttons by Moh Hasbi Assidiqi (@mohhasbias) on CodePen.

   tombol tersebut akan berfungsi seperti tombol back pada browser.

4. Menambahkan navbar sebagai sub header
   Pada bagian bawah header bisa ditambahkan navbar dengan menggunakan data-role="navbar" seperti berikut ini

   <div data-role="header">
     <h1>Home</h1>
     <div data-role="navbar">
       <ul>
         <li><a href="nav1.html" class="ui-btn-active">Home</a></li>
         <li><a href="nav2.html">Another</a></li>
         <li><a href="nav3.html">Next</a></li>
     </div>
   </div>

   See the Pen Header With Navbar by Moh Hasbi Assidiqi (@mohhasbias) on CodePen.

   class ui-btn-active digunakan untuk menandai link yang aktif.

Footer

Ada beberapa bentuk footer yang didukung oleh JQM, diantaranya

1. Footer dengan single text
   Tinggi dari footer dapat otomatis diatur oleh JQM jika menggunakan tag h4 seperti berikut ini

   <div data-role="footer">
      <h4>My Footer</h4>
   </div>

   See the Pen Footer Auto Height by Moh Hasbi Assidiqi (@mohhasbias) on CodePen.

2. Footer dengan button
   Untuk menampilkan tombol pada bagian footer, bisa meniru markup berikut

   <div data-role="footer" class="ui-bar">
     <a href="tools1.html">Tools 1</a>
     <a href="tools2.html">Tools 2</a>
   </div> 

   See the Pen Footer with Buttons by Moh Hasbi Assidiqi (@mohhasbias) on CodePen.

   perhatikan bahwa link yang berada pada bagian footer akan diubah menjadi tombol oleh JQM. Tinggi dari footer tersebut diatur oleh class ui-bar

3. Sticky footer
   Konfigurasi ini bisa digunakan membuat footer yang selalu menempel pada bagian bawah layar.
   untuk mengaktifkannya, cukup dengan menambahkan attribut data-position="fixed" pada bagian footer

   <div data-role="footer" data-position="fixed">
     My Sticky Footer
   </div>

   See the Pen Sticky Footer by Moh Hasbi Assidiqi (@mohhasbias) on CodePen.

   Perhatikan bahwa footer menempel (stick) di bagian bawah tampilan meskipun di-scroll.

4. Footer sebagai navbar
   JQM juga menyediakan bentuk footer untuk keperluan navbar yang biasanya merepresentasikan multi page view atau tab view
   fungsi ini dapat diaktifkan dengan menggunakan markup seperti berikut ini.

   <div data-role="footer">
     <div data-role="navbar">
       <ul>
         <li><a href="one.html" class="ui-btn-active">One</a></li>
         <li><a href="two.html">Two</a></li>
         <li><a href="three.html">Three</a></li>
       </ul>
     </div>
   </div>

   See the Pen Footer with Navbar by Moh Hasbi Assidiqi (@mohhasbias) on CodePen.

   JQM memiliki class ui-btn-active untuk menandai tombol yang aktif.

Referensi

jQuery Mobile Web Development Essentials
JQM Toolbars