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

Tinggalkan Balasan

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