Mobile Web App 4 – Header dan Footer

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

    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

    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

    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

    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

    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

    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

    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.

    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

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.