Tutorial JQuery Mobile Part 3: Transisi

Transitions Effect

jQuery Mobile memiliki efek transisi dari satu page ke page berikutnya.

Note: untuk mencapai efek transisi, browser harus mendukung CSS3 yang dapat mentransformasikan 3D :
Berikut ini minimal browser yang dapat mensupport Transition Effect.

Angka-angka dalam tabel menentukan versi browser pertama yang mendukung sepenuhnya 3D Transformasi. Efek transisi dapat diterapkan untuk setiap link atau pengiriman formulir dengan menggunakan atribut data transisi “

<a href=”#anylink” data-transition=”slide”>Slide to Page Two</a>

Tabel dibawah ini menunjukkan transisi yang tersedia yang dapat digunakan dengan data-transition attribute kedua halaman dan dialog :

Transition	Description
fade	Default. Memudar ke halaman berikutnya
flip	Slide membalik ke halaman berikutnya dari belakang ke depan
flow	Slide diarahkan menuju dan datang dengan halaman berikutnya
pop	Menuju halaman berikutnya seperti jendela popup
slide	Slide ke halaman berikutnya seperti jendela popup
slidefade	Slide dari kanan ke kiri dan memudar ke halaman berikutnya
slideup	Slide ke halaman berikutnya dari bawah ke atas
slidedown	Slide ke halaman berikutnya dari bawah
turn	Turns to the next page
none	Tidak ada efek transisi

Fading effect adalah default semua link di JQuery Mobile (jika ada dukungan browser).

Note: Semua efek diatas juga mengandung tindakan terbalik/mundur, misalkan jika Anda ingin page bisa slide dari kiri ke kanan bukan ke kanan ke kiri, gunakan data-direction attribute dengan “reverse” lihat script berikut:

<a href=”#pagetwo” data-transition=”slide” data-direction=”reverse”>Slide</a>

Buat script dengan nama part3-data-direction-reverse.html
Berikut source part3-data-direction-reverse.html

Untuk membuat efek transisi lakukan tutorial berikut ini:

1. Buka Notepad++
2. Lakukan copy paste script berikut ke dalam Notepad++

<!DOCTYPE html>
<html>
 <head>
<!-- Include meta tag to ensure proper rendering and touch zooming-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Include jQuery Mobile stylesheets --> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<!-- Include the jQuery library -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- Include the jQuery Mobile library -->
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
</head>
<body>

<div data-role="page" id="pagesatu">
 <div data-role="header"><h1>My Homepage</h1></div>
 <div data-role="main" class="ui-content">
  <p>Klik link untuk melihat efek slide (slide ke page berikutnya dari kanan ke kiri) </p>
 <a href="#pagedua" data-transition="slide">Slide menuju page kedua</a>
 </div>
 <div data-role="footer"><h1>Teks Footer</h1>
 </div>
</div>
<div data-role ="page" id="pagedua">
 <div data-role="header"><h1>My Homepage</h1>
 </div>
  <div data-role="main" class="ui-content">
  <p>Klik link untuk melihat efek slide RESERVED (slide ke page sebelumnya dari kiri ke kanan)</p>
  <a href="#pagesatu" data-transition="slide">Slide menuju page pertama (reserved)</a></div>
 <div data-role="footer"><h1>Teks Footer</h1></div>
</div>
</body>
</html>

Code 6. Code untuk membuat data-direction reverse.

3. Simpan dengan nama tutorial-part3-transisi.html

4. Hasilnya dari script diatas dapat ditampilkan sebagai berikut:

Gambar 11. Hasil dari code 6

Setelah mempelajari transisi, selanjutnya:

Tutorial JQuery Mobile Part 3: Transisi

Transitions Effect

Tutorial jQuery Mobile Part 4: Tombol

0 Response to "Tutorial JQuery Mobile Part 3: Transisi"

Post a Comment