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 :
<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++
Code 6. Code untuk membuat data-direction reverse.
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:
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++
01 | <span style="background-color: transparent; color: black; font-family: Roboto; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; text-decoration: none; vertical-align: baseline; white-space: pre-wrap;"><!DOCTYPE html> |
02 | <html> |
03 | <head> |
04 | <!-- Include meta tag to ensure proper rendering and touch zooming--> |
05 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
06 | <!-- Include jQuery Mobile stylesheets --> |
07 | <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> |
08 | <!-- Include the jQuery library --> |
09 | <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> |
10 | <!-- Include the jQuery Mobile library --> |
11 | <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"> |
12 | </script> |
13 | </head> |
14 | <body> |
15 |
16 | <div data-role="page" id="pagesatu"> |
17 | <div data-role="header"><h1>My Homepage</h1></div> |
18 | <div data-role="main" class="ui-content"> |
19 | <p>Klik link untuk melihat efek slide (slide ke page berikutnya dari kanan ke kiri) </p> |
20 | <a href="#pagedua" data-transition="slide">Slide menuju page kedua</a> |
21 | </div> |
22 | <div data-role="footer"><h1>Teks Footer</h1> |
23 | </div> |
24 | </div> |
25 | <div data-role ="page" id="pagedua"> |
26 | <div data-role="header"><h1>My Homepage</h1> |
27 | </div> |
28 | <div data-role="main" class="ui-content"> |
29 | <p>Klik link untuk melihat efek slide RESERVED (slide ke page sebelumnya dari kiri ke kanan)</p> |
30 | <a href="#pagesatu" data-transition="slide">Slide menuju page pertama (reserved)</a></div> |
31 | <div data-role="footer"><h1>Teks Footer</h1></div> |
32 | </div> |
33 | </body> |
34 | </html></span> |
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:
0 comments:
Post a Comment