jQuery Mobile (04): Konsep Multiple Page, Satu File Banyak Halaman

<!-- definisi halaman 1 -->
<div data-role="page" id="halaman1">
  <header data-role="header">
    <h1>Header 1</h1>
  </header>
  <div data-role="content">
    <p>Halaman 1</p>
    <p>Pindah ke <a href="#halaman2">halaman 2</a></p>
  </div>
  <footer data-role="footer" data-position="fixed">
    <h2>Footer 1</h2>
  </footer>
</div>

<!-- definisi halaman 2 -->
<div data-role="page" id="halaman2">
  <header data-role="header">
    <h1>Header 2</h1>
  </header>
  <div data-role="content">
    <p>Halaman 2</p>
    <p>Kembali ke <a href="#halaman1">halaman 1</a></p>
  </div>
  <footer data-role="footer" data-position="fixed">
    <h2>Footer 2</h2>
  </footer>
</div>

Untuk melihat bagaimana hasilnya, silahkan ketik kode berikut ini selengkapnya, kemudian simpan dengan nama jqm_multipage.html. Setelah disimpan silahkan lihat hasilnya melalui browser, disarankan menggunakan Emulator Ripple agar terlihat seperti pada perangkat smartphone sungguhan.

<!DOCTYPE html>
<html lang="ID">
<head>
  <title>Multiple Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
  <script src="jquery-1.11.1.min.js"></script>
  <script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

  <!-- definisi halaman 1 -->
  <div data-role="page" id="halaman1">
    <header data-role="header">
      <h1>Header 1</h1>
    </header>
    <div data-role="content">
      <p>Halaman 1</p>
      <p>Pindah ke <a href="#halaman2">halaman 2</a></p>
    </div>
    <footer data-role="footer" data-position="fixed">
      <h2>Footer 1</h2>
    </footer>
  </div>

  <!-- definisi halaman 2 -->
  <div data-role="page" id="halaman2">
    <header data-role="header">
      <h1>Header 2</h1>
    </header>
    <div data-role="content">
      <p>Halaman 2</p>
      <p>Kembali ke <a href="#halaman1">halaman 1</a></p>
    </div>
    <footer data-role="footer" data-position="fixed">
      <h2>Footer 2</h2>
    </footer>
  </div>

</body>
</html>

Hasilnya seperti diperlihatkan pada gambar berikut.

Multipage pada JQuery Mobile

Efek transisi perpindahan halaman

Untuk lebih mantapnya desain, saat perpindahan antarpage, kita bisa tambahkan efek transisi. Caranya dengan menambahkan atribut data-transition="efek_transisi" ini pada link yang akan diberikan efek transisi. Ada beberapa macam efek transisi, salah satunya adalah “slide” yang menampilkan perpindahan halaman seperti “digeser”. Contoh penulisannya seperti ini: <a href="#halaman2" data-transition="slide">halaman 2</a>.

Adapun macam-macam efek transisinya adalah: slide, slidepage, fade, pop, flip, flow, slideup, slidedown, turn dan none. Silahkan pilih yang disukai. Silahkan dicoba pilih beberapa efek transisi, dan bisa juga dikembangkan lagi contoh di atas untuk beberapa halaman lagi (misal menjadi 4 atau 5 page dalam 1 file).

Saya rasa untuk bahasan web tentang multipage dalam satu file ini kita cukupkan saja. Sampai jumpa pada tutorial selanjutnya.

← Sebelumnya

Halaman : 1 2

Share

Muhammad Erfan

aslinya karyawan, suka belajar pemrograman, senang berbagi ilmu melalui tulisan, lagi usaha menghasilkan uang online :cool:

You may also like...

2 Responses

  1. 27 Mei 2017

    […] berkaitan dengan bahasan sebelumnya tentang Multiple Page pada jQuery Mobile, kita akan bahas cara membuat popup window ketika sebuah link atau tombol diklik. Popup ini sangat […]

  2. 6 Agustus 2017

    […] link. Kita juga sudah bahas konsep dari popup itu sendiri yang mana bisa berupa single page atau multiple page. Tulisan kali ini akan membahas tentang bagaimana cara membuat button atau tombol menggunakan […]

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *