Kalau sebelumnya, kita terpesona oleh keindahan jQuery UI, jangan puas dulu, karena sekarang kita akan berkenalan dengan salah satu plugin bundled terbaik juga, yaitu jQuery Tools yang dikembangkan oleh Tero Piirainen.

Kehadiran jQuery Tools memberikan wama yang berbeda, memberikan suasana website yang lebih indah dan elegan serta menampilkan animasi yang smooth (lembut), ditambah lagi skrip jQuery Tools sangat ringan dan cepat.

Untuk memeulai belajar script menggunakan jQuery tools, maka hal pertama yang dilakukan adalah mendownload terlebih dahulu jQuery tools diwebsite resminya. Lihat artikel sebelumnya Pengertian Serta Penggunaan Fungsi Event Dan Effect Pada jQuery . dibawah ini akan dijelaskan beberpan contoh listing program menggunakan jQuery tools.

Contents show

Tabs (Mengelompokkan Content dalam Bentuk Tab)

Tabs dapat digunakan untuk memasukkan banyak content ke dalam satu halaman, kemudian merapikannya atau mengelompokkannya dalam bentuk tab, dan setiap contenl dapat ditampilkan dengan mengklik tab tersebut.
Pada contoh pertama, kita akan coba tab standar dulu. Perhatikan skrip berikut:

Lihat Script Tab.html

<html>
<head>
<link type=”text/css” href=”css/tabs-l.css” rel=”stylesheet” />
<script src=” jquery. tools .min. js”X/script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“ul.tabs”).tabs(“div.panes > div”);
}) ;
</script>
</head>
<body>
<!— tabs —>
<ul class=”tabs”>
<!— class current : tabs yg pertama kali aktif —> <lixa class=”current” href=”#”>Tab l</ax/li>
<lixa class=”” href=”#”>Tab 2</ax/li>
<lixa class=”” href=”#”>Tab 3</aX/li>
</ul>
<!— panes (content untuk masing-masing tab) –>
<div class=”panes”>
<!— display block : content panes yg pertama aktif –>
<div style=”display: block;”>Content untuk Tab l.</div> <div style=”display: none;”>Content untuk Tab 2.</div>
<div style=”display: none;”>Content untuk Tab 3.</div> </div>
</body>
</html>

Penjelasan Skrip:

$(“ul.tabs”).tabs(“div.panes > div”); artinya, kita terapkan tabs pada bagian ul dengan class=”Tabs”, div.panes akan mengacu pada div dengan class=”panes”.
jQuery Tools mengatur tampilan desainnya melalui file CSS, dalam kasus diatas menggunakan file tabs-l.css yang terdapat di folder css. Apabila Anda buka file tabs-1.css (tepatnya pada baris ke-22), Anda akan melihat bahwa jQuery Tools menggunakan gambar untuk mempercantik tab-nya, nama file gambarnya adalah blue.png yang bisa temukan di folder css/img.
Jalankan skrip tabsl.html, maka akan tampil Tab 1 beserta content-nya, coba klik Tab 1 dun tab 3 untuk menguji apakah tab sudah berjalan dengan baik. lihat gambar berikut ini

Tooltip

Bagi yang sering berselancar di Internet tentu pernah bersentuhan dengan tooltip, misalnya apabila kita arahkan mouse kita ke atas suatu link, maka akan tampil info/ keterangan tambahan mengenai link tersebut, itulah yang disebut tooltip .. itu sih tooltip biasa. Dengan bantuan jQuery, khususnya jQuery Tools, kita dapat membuat tooltip yang lebih professional dan menarik.
Agar kelihatan menarik, maka pada contoh pertama ini, kita akan memberikan tooltip pada gambar, dimana apabila mouse berada diatas gambar tersebut, maka tooltip berupa info/keterangan mengenai gambar tersebut akan tampil. Bagaimana cara membuatnya? |
Perhatikan skrip berikut:

Lihat Script Tooltip.html

<html>
<head>
<link type=”text/css” href=”css/tips-basic . css”
rel=”stylesheat”/>
<script src=”jquery.tools.min.js”></script>
<sript type=”text/javascript”>
$(document).ready(function(){
$(“#demo imq[title]”).tooltip({
effect: ‘slide’
});
});
</script>
</head>
<body>
<!–tooltip–>
<div style=”position: absolute; top: 38px; left: 237px; display: none;” id=”demotip”X/div>
<!— beberapa elemen yang akan diberi tooltip —>
<div id=”demo”>
<img src=”images/ointal.jpg” title=”Beberapa lilin diatas karpet merah disusun membentuk formasi cinta.”/>
<img src=”images/cinta2.jpg”
title=”Kertas yang berisi tangga nada dilengkungkan untuk membuat bentuk cinta.”/>
<img src=”images/cinta3.jpg”
title=”Bunga-bunga biru diatas karpet krem disusun membentuk formasi cinta.”/>
</div>
</body>
</html>

Sekarang coba jalankan skrip tooltip.html di browser, maka akan tampil tiga buah gambar cinta, coba arahkan kursor mouse pada salah satu gambar, maka akan tampil tooltip (info/keterangan) disertai efek slide diatas gambar tersebut.

Tooltip dari jQuery Tools tidak hanya bisa ditampilkan diatas objek, tapi juga bisa disamping ataupun dibawah objek.

Overlay (Efek Melayang)

Overlay adalah suatu keadaan yang membuat elemen/objek menjadi terfokus yang menyebabkan objek di sekitamya menjadi tidak aktif sampai overlay-nya ditutup. Ibarat sebuah lapisan, maka overlay adalah lapisan pada tumpukan paling atas.
Pada contoh kali ini, kita akan coba terapkan overlay pada galeri foto, dimana apabila salah satu foto di-klik, maka foto tersebut akan membesar dan ditampilkan secara apik sebagai foto paling depan. Untuk lebih jelasnya, perhatikan skrip berikut:

Lihat Script Overlay.html

<html>
<head>
<link type=”text/css” href=”css/overlay-basic. css” rel=”stylesheet” />
<script src=”jquery.tools .min. j s”x/script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“img[rel]”).overlay();
});
</script>
</head>
<body>
<!— elemen foto —>
<div id=”photos”>
<img src=”images/spy_small.jpg” rel=”#miesl”>
<img src=”images/khan_small.jpg” rel=”#mies2″>
</div>
<!–overlays –>
<div class=”simple_overlay” id=”miesl”>
<div class=”close”></div>
<!– karena content cukup panjang, maka untuk versi lengkapnya, silahkan lihat source code untuk skrip overlay.html di CD –>
</div>
<dlv cIass-“simple_overlay” id=”mies2″>
<div clasS“”close”>/div>
<!–karena content cukup panjang, maka untuk versi lengkapnya, ailahkan lihat source code untuk skrip overlay.html di CD –>
</div>
</dlv>
</body>
</html>

Jalankan skrip overlay.html, maka akan tampil dua buah gambar. Lihat gambar berikut:

Sekarang coba klik salah satu gambar, misalnya gambar Spiderman, maka gambar akan membesar dan menampilkan info mengenai gambar tersebut di sebelah kanan gambar disinilah peran overlay dalam menyajikan tampilan foto secara apik dengan tambahan tombol Close di bagian kanan atas untuk menutup gambar tersebut.

Scrollable (Efek Menggulung)

Scrollable merupakan suatu teknik yang memungkinkan kita agar bisa menerapkan efek scroll (menggulung) pada website kita dengan mudah. Scrollable juga merupakm efek andalan dari jQuery Tools, dimana kalau Anda perhatikan di halaman demonya menggunakan efek scroll untuk menampilkan demo masing-masing efek.

Oke, sekarang kita akan terapkan scrollable pada foto yang akan dipajang secara horizontal, nantinya terdapat empat foto yang terlihat, namun apabila ingin melihat foto lainnya, klik tombol navigasi ke kanan/ke kiri, maka akan tampaklah efek scrollable. Untuk lebih jelasnya, lihat skrip berikut:

Lihat Script Scrollabe.html

Sekarang coba jalankan skrip scrollable.html, maka akan tampil empat buah foto yang dilengkapi dengan tombol navigasi ke kanan dan ke kiri, silahkan klik tombol navigasi tersebut untuk melihat efek scrollable.

Pada contoh berikutnya, kita akan coba menerapkan efek scrollable pada galeri foto, tentunya akan menambah keren galeri foto. Adapun contoh penerapan efek scrollable pmla galeri foto dapat dilihat pada skrip berikut:

Lihat Script scroll_gallery.html

<html>
<head>
<link type=”text/css” href=”css/scrollable-horizontal.css” rel=”stylesheet” />
<link type=”text/css” href=”css/scrollable-buttons.css” rel=”stylesheet” />
<script src=”jquery.tools.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function()(
$(“div.scrollable”).scrollable() ;
$(“.items img”).click(function() {
// hilangkan _t dibelakang nama file foto untuk // foto yang besar (air_t.jpg) dihilangkan _t // manjadi (air. jpg)
var url – $(this).attr (“src”) .replace(“_t”, “”);
// untuk area gambar baaar dibarlkan afak fade
var wrap “ $(“#image wrap”).fadoTo(“medium”, 0.5);
//load foto
var img = new Image();
img.onload = function () {
wrap.fadeTo(“fast”, 1);
wrap.find (“img”) .attr(”src”, url);
});
img.src = url;
}) .filter (“:first”) . click () ;
});
</script>
<style>
/* style untuk image wrapper (preview image) */
#image_wrap (
width:547px;
margin:15px 0 15px 40px;
padding:15px 0;
text-align:center;
background-color:#efefef;
border:2px solid #fff;
outline:lpx solid #ddd;
-moz-ouline-radius:4px;
}
</style>
</head>
<body>
<!—-tempat untuk menampung foto yang besar —->
<div id=”image_wrap”>
<!—- background untuk foto berupa gambar blank.gif >
<img src=”images/blank.gif” width=”276″ height=”330 />
</div>
<!—- aksi untuk halaman sebelumnya –>
<a class=”prevPage browse left”></a>
<!– elemen untuk scrollable —->
<div class=”scrollable”>
<!—- elemen untuk items -—>
<div class=”items”>
<div>
<!— foto ke 1 s.d 4 —>
cimg src=”images/khan_t.jpg”>
<img src=”images/fairy_t.jpg”>
<img src=”images/spy_t.jpg”>
<img src=”images/pemimpi_t.jpg”>
</div>
<div>
<!— foto ke 5 s.d 8 —>
<img src=”images/ichi_t.jpg”>
<img src=”images/kcb_t.jpg”>
<img src=”images/percy_t.jpg”>
<img src=”images/confucius_t.jpg”> </div>
</div>
</div>
<!–aksi untuk halaman selanjutnya –>
<a class=”nextPage browse right”></a>
</div>
</body>
</html>

Sekarang coba jalankan skrip scroll_gallery.html, maka akan tampil empat buah foto yang dilengkapi dengan image preview yang menampilkan foto dalam ukuran yang lebih besar.

Anda bisa memilih foto lainnya untuk dilihat versi preview-nya dengan mengklik salah satu foto kecil dibawahnya. Adapun efek scroll bisa dilihat dengan mengklik tombol navigasi ke kanan dan ke kiri.

Demikian penjelasan yang bisa disampaikan tentang cara penggunaan jQuery Ui, semoga artikel ini bermanfaat bagi pembaca.. Untuk lebih memahami penjelasan tentang pengertian jQuery selanjutnya baca artikel lainnya tentang Belajar jQuery: