Mobile Web App 3 – External Pages

Mengelola banyak tampilan menggunakan jQuery Mobile relatif mudah. Terdapat opsi untuk menggunakan embedded page dan juga opsi untuk external page.

Sebagaimana pembahasan sebelumnya, dalam sebuah file html disarankan maksimum 2 embedded page, sisanya adalah external pages.

Yang dimaksud dengan external page adalah sebuah link/anchor yang merujuk pada file html lain dalam domain name yang sama. Sebagai contoh link berikut

<a href="products.html>List of Our Products</a>

link ini akan diproses sebagai external page, dimana jQuery Mobile akan melakukan ajax call pada link tersebut kemudian menggunakan hasilnya untuk me-replace tampilan yang ada lengkap dengan transisi tampilannya.
berikut adalah contoh penerapan external pages.
Demo External Page pada jQuery Mobile

Demo tersebut berada pada runnable.com. Untuk menjalankannya cukup tekan tombol Run.
Pada demo tersebut dapat dilihat dua buah file html sebagai penyusunnya.

file-html-penyusun
File-file html penyusun
File index.html berisi 2 buah embedded page, yaitu #home-page dan #about-page. Sedangkan file products.html berisi 1 page, yaitu products-page.
pada file index.html terdapat link menuju halaman products.html, yaitu
link-to-products-page
Link to products page
link ini akan menyebabkan jQuery Mobile untuk melakukan ajax call terhadap products.html.
jika kita ingin link tersebut diperlakukan sebagai link biasa maka jQuery Mobile perlu diberi tahu untuk mendisable ajax dengan menggunakan attribut data-ajax=”false” seperti berikut ini,

<a href="http://www.google.com" data-ajax="false>Search on Google</a>

Leave a Reply