Ardian Wiratama007: jenis-jenis perpindahan halaman pada jquery mobile

PERPINDAHAN HALAMAN PADA JQUERY MOBILE PADA MATA KULIAH MOBILE

Query telah lama menjadi JavaScript library yang populer untuk menciptakan website interaktif yang kaya dan aplikasi web. Namun, karena ini dirancang terutama untuk browser desktop, jquery tidak memiliki banyak fitur yang khusus dirancang untuk membangun aplikasi web mobile.

jQuery Mobile adalah proyek baru yang membahas kekurangan Ini adalah framework yang dibangun di atas jQuery yang menyediakan berbagai elemen User-interface dan fitur-fitur untuk digunakan dalam aplikasi mobile.

framework ini cukup canggih, versi alpha pertama dirilis bulan lalu – tapi sudah memungkinkan untuk melakukan beberapa hal besar.

Pada artikel ini saya melihat beberapa fitur kunci dan manfaat dari Jquery mobile dan menunjukkan beberapa contoh bagaimana framework baru ini dapat membantu Anda membangun aplikasi mobile berkualitas dan dalam waktu singkat.

Apa yang dapat jQuery Mobile lakukan?

jQuery Mobile memudahkan pengembangan user-interface untuk mobile web apps.The interface configuration is markup-driven, yang berarti Anda dapat membuat seluruh aplikasi antarmuka dasar dalam HTML, tanpa perlu menulis satu baris JavaScript. Menyediakan serangkaian custom events baru, mendeteksi events mobile device dan touchscreen seperti tap, tap-and-hold, swipe, and orientation change (i.e. rotating the device). Memastikan bahwa user-interfcae bekerja pada web browser Menggunakan theme untuk memudahkan untuk costumized tampilan aplikasi Anda.

Struktur halaman Jquery Mobile

Sebagian besar halaman web aplikasi dengan jQuery Mobile akan mengikuti basic template:

[code]

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<scriptsrc="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

</head>

<body>

<h1>Page Title</h1>

</div>

<p>Page content goes here.</p>

</div>

<h4>Page Footer</h4>

</div>

</body>

</html>

[/code]

Untuk menggunakan jQuery Mobile, pertama anda perlu meng-include 3 file:

1. JQuery CSS Mobile file (jquery.mobile-1.0a1.min.css)

2. Perpustakaan jQuery (jquery-1.4.3.min.js)

3. Mobile perpustakaan jQuery (jquery.mobile-1.0a1.min.js)

Anda dapat mendownloadnya di website jQuerymobile Seperti yang anda lihat, konten halaman disimpan dalam sebuah div dengan atribut data-role “page”. Hal ini memungkinkan jQuery mobile tahu di mana konten di markup. Dalam div “page”, ada “header”, “content” dan “footer” div.

div “header” ini berfungsi untuk membuat toolbar di bagian atas halaman, yang digunakan untuk menyimpan title dan button. (terdapat tombol default “Back” dimana pengguna dapat menekan untuk kembali ke halaman sebelumnya.) Dengan menambahkan data-position = “fixed” untuk header,membuat header selalu tetap di bagian top screen.

Berisi konten utama halaman, seperti teks, images, button, list, form, dan sebagainya.

Membuat toolbar di bagian bawah halaman, yang berguna untuk hal-hal seperti buttona. Untuk membuat header selalu tetap top screen. Dengan menambahkan data-position = “fixed” untuk footer.

Halaman di dalam halaman

Salah satu hal baik dari struktur halaman di atas adalah bahwa Anda dapat membuat beberapa “page” dalam suatu satu halaman HTML. Ini berarti bahwa browser hanya meload 1 halaman. Berikut ini contohnya:

[code]

<!DOCTYPE html>

<html>

<head>

<title>jQuery Mobile: Pages within Pages</title>

<scriptsrc="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>

</head>

<body>

</div>

<p><a href="#about">About this app</a></p>

</div>

<h1>About This App</h1>

</div>

<p>This app rocks! <a href="#home">Go home</a></p>

</div>

</body>

</html>

[/code]

Perpindahan Halaman (Page Transitions)

Kita dapat menerapkan salah satu dari beberapa efek transisi yang berbeda ke halaman baru yang muncul. Untuk membuat itu, cukup tambahkan atribut data-transition ke link. Value nya adalah:

1. Fade peralihan dari halaman kehalaman lain dengan memberikan efek blur seolah-olah halaman hilang atau muncul dari kegelapan.

2. Pop peralihan dari halaman kehalaman lain dengan memberikan efek seperti "muncul kepermukaan". Jadi ibarat kata, halaman yang tenggelam muncul kelayar. (Penjelasan yang membingungkan)

3. Flip peralihan dari halaman kehalaman lain dengan memberikan efek seperti membalikkan halaman tersebut, tapi bukan seperti membalikkan halaman pada buku.

4. Turn memiliki efek yang mirip dengan flip, namun ini seolah-olah titik rotasi halaman berada di pinggir halaman, sedangkan pada flip, titik rotasi pada garis tengah halaman.

5. Flow efek yang dihasilkan adalah halaman seperti tenggelam, kemudian dilempar kebagian samping hingga tidak terlihat lagi. Efek yang satu ini, emang terlihat lebih garang dari pada yang lain, karena halaman bertukar dengan cara dilempar-lempar. Cocok bagi developer yang suka main keras.

6. Slide fade gabungan dari fade dan slide, sehingga halaman tersebut bergeser kemudian menghilang.

7. Slide efek yang diberikan pada peralihan ini yaitu membuat halaman seolah-olah meluncur dan digantikan oleh halaman berikutnya.

8. Slideup sama seperti slide, namun pergerakannya dari bawah keatas.

9. Slidedown sama seperti slide, namun pergerakannya dari atas kebawah.

10. None sesuai namanya, peralihan tidak ada efek apa-apa. Main tukaraja. Simple, no animation!

Untuk menggunakan transition ini, kita harus menambahkan atribut pada element yang menjadi trigger (Pemicu) misalkan link atau<a></a>.Rumusnya seperti ini :

Dengan formula ini, maka halaman "index.html" akan dibuka dengan efek transition "flow". Silahkan ganti sesuai data transition yang diinginkan. Pada beberapa efek transition, bias juga ditambahkan atribut "data-direction='reverse'" tanpa kutip. Contoh:

<a href="index.html" data-transition="slide" data-direction="reverse">Let Me Slide!</a>

Formula diatas akan memberikan efek slide dengan arah pergerakan sebaliknya. Selebihnya, tergantung imajinasi teman-teman dalam memanfaatkan fitur yang ada pada jQuery Mobile untuk menciptakan aplikasi yang responsif.

slide show gambar dengan jQuery pada website kita.Ada beberapa tutorial mudah membuat slide show gambar dengan jQuery, Namun setelah beberapa kali mencobanya, ternyata ada dua jenis slide show gambar yang mudah dibuat pada website.Berikut adalah Code membuat slide show gambar dengan jQuery:

1. Pertama kopas kode jQuery berikut antara <head>….</head>

$(document).ready(function(){

$(“#featured”).tabs({fx:{opacity: “toggle”}}).tabs(“rotate”, 5000, true);});

</script>

Untuk file “jquery-ui-tabs-rotate.js” download di siniataudi https://github.com/cmcculloh/jQuery-UI-Tabs-Rotate/blob/master/jquery-ui-tabs-rotate.jsDan letakan di folder web Anda. Karena banyak artikel membuat slide show gambar lainnya tidak memakainya, dan saya coba tidak bisa.

2. Sekarang tambahkan kode css membuat slide show gambar dengan jQuery berikut pada CSS Anda:

/* slide show*/

#featured{

width:200px;

padding-right:255px;

position:relative;

border:5px solid #ccc;

height:250px; overflow:hidden;

background:#fff;

}

#featured ul.ui-tabs-nav{

position:absolute;

top:0; left:355px;

list-style:none;

padding:0; margin:0;

width:240px; height:250px;

overflow:auto;

overflow-x:hidden;

}

#featured ul.ui-tabs-nav li{

padding:1px 0; padding-left:13px;

font-size:12px;

color:#666;

}

#featured ul.ui-tabs-nav li img{

float:left; margin:2px 5px;

background:#fff;

padding:2px;

border:1px solid #eee;

}

#featured ul.ui-tabs-nav li span{

font-size:11px; font-family:Verdana;

line-height:18px;

}

#featured li.ui-tabs-nav-item a{

display:block;

height:60px; text-decoration:none;

color:#333; background:#fff;

line-height:20px; outline:none;

}

#featured li.ui-tabs-nav-item a:hover{

background:#f2f2f2;

}

#featured li.ui-tabs-selected, #featured li.ui-tabs-active{

background:url(‘images/selected-item.gif’) top left no-repeat;

}

#featured ul.ui-tabs-navli.ui-tabs-selected a, #featured ul.ui-tabs-navli.ui-tabs-active a{

background:#ccc;

}

#featured .ui-tabs-panel{

width:359px; height:250px;

background:#999; position:relative;

}

#featured .ui-tabs-panel .info{

position:absolute;

bottom:0; left:0;

height:70px;

background: url(‘images/transparent-bg.png’);

}

#featured .ui-tabs-panel .info a.hideshow{

position:absolute; font-size:11px; font-family:Verdana; color:#f0f0f0; right:10px; top:-20px; line-height:20px; margin:0; outline:none; background:#333;

}

#featured .info h2{

font-size:1em; font-family:Georgia, serif;

color:#fff; padding:5px; margin:0; font-weight:normal;

overflow:hidden;

}

#featured .info p{

margin:0 5px;

font-family:Verdana; font-size:11px;

line-height:15px; color:#f0f0f0;

}

#featured .info a{

text-decoration:none;

color:#fff;

}

#featured .info a:hover{

text-decoration:underline;

}

#featured .ui-tabs-hide{

display:none;

}

Kedua silahkan copas kode HTML di bawah ini kehalaman web anda untuk ditampilkan slide show gambar halaman web html:

<!– slide –>

<ul>

<li id=”nav-fragment-1″><a href=”#“><imgsrc=”images/image1-small.jpg” alt=”" /><span>Membuat slide show gambardenganjQuery tab 1</span></a></li>

<li id=”nav-fragment-2″><a href=”#“><imgsrc=”images/image2-small.jpg” alt=”" /><span>Membuat slide show gambardenganjQuery tab 2</span></a></li>

<li id=”nav-fragment-3″><a href=”#“><imgsrc=”images/image3-small.jpg” alt=”" /><span>Membuat slide show gambardenganjQuery tab 3</span></a></li>

<li id=”nav-fragment-4″><a href=”#“><imgsrc=”images/image4-small.jpg” alt=”" /><span>Membuat slide show gambardenganjQuery tab 4</span></a></li>

</ul>

<!– First Content –>

<imgsrc=”images/image1.jpg” alt=”" />

<div >

<h2><a href=”#” >Membuat slide show gambar dengan jQuery judul 1</a></h2>

<p>Ini adalah penjelasan gambar 1 membuat slide show gambar jQuery….<a href=”#” >read more</a></p>

</div>

<!– Second Content –>

<imgsrc=”images/image2.jpg” alt=”" />

<div >

<h2><a href=”#” >Membuat slide show gambardenganjQueryjudul 2</a></h2>

<p>Ini adalah penjelasan gambar 2 membuat slide show gambar jQuery….<a href=”#” >read more</a></p>

</div>

<!– Third Content –>

<imgsrc=”images/image3.jpg” alt=”" />

<div >

<h2><a href=”#” >Membuat slide show gambardenganjQueryjudul 3</a></h2>

<p>Ini adalah penjelasan gambar 3 membuat slide show gambar jQuery….<a href=”#” >read more</a></p>

</div>

<!– Fourth Content –>

<imgsrc=”images/image4.jpg” alt=”" />

<div >

<h2><a href=”#” >Membuat slide show gambardenganjQueryjudul 4</a></h2>

<p>Iniadalahpenjelasangambar 4 membuat slideshow gambarjQuery….<a href=”#” >read more</a></p>

</div>

<!– end slide –>

Oke, kita tinggal mengganti beberapa text membuat slide show gambar dengan jQuery di atas dengan beberapa petunjuk berikut:

1. Ganti text warna merah sesuai judul dari gambar.

2. Teks warna biru ganti dengan keterangan gambar/postingan.

3. Untuk link, bisa ganti teks warna pink dengan alamat artikel yang anda posting.

4. Selanjutnya, untuk gambar yang akan ditampilkan dalam slide show jQuery sebaiknya anda upload danta ruh pada folser tersendiri seperti contoh diatas saya taruh pada folder images yang saya beri warna coklat.

Karena saya menyadari bahwa penjelasan saya mengenai transition sangat terbatas maka Untuk mengetahui dan mencoba demo dari masing-masingefek transition silahkan kunjungi link ini.

Referensi: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/transitions/

Sumber Gambar: http://blogfreakz.com/mobile-development/jquery-mobile-tutorials/

http://www.jquerymobile.com

Terima Kasih

Dosen Pengampuh :

Nama : M. Ropianto

NIDN : 102867804

Setatus : Dosen Tetap YAPISTA / STT IBNU SINA BATAM

Pengampuh Mata Kuliah : Pemograman MOBILE

http://sttibnusinabatam.ac.id