Setelah mengaktifkan jquery mobile, langkah selanjutnya yang bisa dilakukan adalah dengan menambahkan halaman baru.

Berikut adalah modifikasi dari kode sebelumnya

See the Pen jQuery Mobile Embedded Page by Moh Hasbi Assidiqi (@mohhasbias) on CodePen.

Pada kode tersebut terdapat dua div dengan data-role=”page”, dimana masing-masing div tersebut diperlakukan sebagai dua tampilan yang berbeda. Yang pertama kali ditampilkan oleh jQuery Mobile adalah div yang pertama kali muncul. Yaitu div dengan id=”home-page”. Ini adalah salah satu fasilitas yang disediakan oleh jQuery Mobile dimana sebuah page/tampilan diwakili oleh sebuah div dengan data-role=”page”.

Meskipun berada pada satu file html yang sama, setiap data-role=”page” diperlakukan sebagai tampilan yang berbeda. page yang berada pada satu file html yang sama disebut dengan embedded page. Untuk berpindah dari satu embedded page ke embedded page yang lain, dapat dilakukan dengan membuat anchor dengan id dari page yang diinginkan. Sebagai contoh, untuk berpindah ke page dengan id=”about-page” cukup dengan menulis

<a href="#about-page">go to about page</a>

maka otomatis, jQuery Mobile akan memodif anchor tersebut sehingga berfungsi untuk menampilkan halaman yang dituju lengkap dengan transisi-nya. Untuk kembali dari halaman about menuju homepage, cukup dnegan menulis anchor dengan home-page sebagai href-nya, seperti berikut ini

<a href="#home-page">back to home page</a>

penggunaan embedded page sangat tidak disarankan dikarenakan untuk jangka panjang dari aplikasi yang dibuat, akan sangat sulit untuk merawatnya terutama apabila ditemukan bug dikemudian hari.
disarankan maksimum 2 page untuk setiap file html.

pembuatan external page akan dibahas pada posting berikutnya.