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>
<link
rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"
/>
<script
src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<scriptsrc="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div
data-role="page">
<div
data-role="header">
<h1>Page
Title</h1>
</div>
<div
data-role="content">
<p>Page
content goes here.</p>
</div>
<div
data-role="footer">
<h4>Page
Footer</h4>
</div>
</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
data-role=”header”>
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.
<div
data-role=”content”>
Berisi
konten utama halaman, seperti teks, images, button, list, form, dan sebagainya.
<div
data-role=”footer”>
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>
<link
rel="stylesheet"
href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css"
/>
<script
src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<scriptsrc="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div
data-role="page" id="home">
<div
data-role="header">
<h1>Home</h1>
</div>
<div
data-role="content">
<p><a
href="#about">About this app</a></p>
</div>
</div>
<div
data-role="page" id="about">
<div
data-role="header">
<h1>About
This App</h1>
</div>
<div
data-role="content">
<p>This
app rocks! <a href="#home">Go home</a></p>
</div>
</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 :
<a href="index.html"
data-transition="flow">Let Me Flow!</a>
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>
<script
type=”http://code.jquery.com/jquery-1.6.2.min.js” ></script>
<script
type=”text/javascript” src=”http://code.jquery.com/ui/1.9.0/jquery-ui.js”></script>
<script type=”text/javascript”
src=”jquery-ui-tabs-rotate.js“></script>
<script
type=”text/javascript”>
$(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 –>
<div
id=”featured” >
<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 –>
<div
id=”fragment-1″ style=”">
<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>
</div>
<!–
Second Content –>
<div
id=”fragment-2″ style=”">
<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>
</div>
<!–
Third Content –>
<div
id=”fragment-3″ style=”">
<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>
</div>
<!–
Fourth Content –>
<div
id=”fragment-4″ style=”">
<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>
</div>
</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/
Terima Kasih
Dosen Pengampuh :
Nama :
M. Ropianto
NIDN :
102867804
Setatus :
Dosen Tetap YAPISTA / STT IBNU SINA BATAM
Pengampuh Mata Kuliah : Pemograman MOBILE
