Membuat website Super Canggih dengan jQuery. Kalau Fungsi dari jQuery itu sendiri adalah menyederhanakan kode javascript, Plugin jQuery berfungsi menyederhanakan code jQuery itu sendiri. karena itu dengan plugin jQuery akan jauh lebih simple dan ringkan dalam penulisan javascript.
Cara menggunakan plugin jQuery hampir sama menggunakan jQuery biasa, misalnya pada jQuery Circle plugin untuk membuat sebuah image slideshow seperti dibawah ini
1. Panggil Library jquery plugin dengantag <head> pada file html :
<html>
<head>
<script type="text/javascript' src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src"jquery.cyrcle.all.win.js"></script>
</head>
<body>
</body>
</html>
2. Buat contentnya seperti dibawah ini :
<html>
<head>
<script type="text/javascript' src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src"jquery.cyrcle.all.win.js"></script>
</head>
<body>
<div class="slideshow">
<img src="beach1.jpg" width="200" height="200" />
<img src="beach2.jpg" width="200" height="200" />
<img src="beach3.jpg" width="200" height="200" />
<img src="beach4.jpg" width="200" height="200" />
<img src="beach5.jpg" width="200" height="200" />
</div>
</body>
</html>3. Panggil methode jquery plugin dan atur parameternya jika ada. hasilnya nanti akan terlihat pada pembahasan berikutnya yaitu Image Slideshow.
<html>
<head>
<script type="text/javascript' src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src"jquery.cyrcle.all.win.js"></script>
<script type="text/javascript">
$ (document) .ready(function() {
$ ('.slideshow') .cyrcle({
fx: 'fade'
});
});
</script>
</head>
<body>
<div class="slideshow">
<img src="beach1.jpg" width="200" height="200" />
<img src="beach2.jpg" width="200" height="200" />
<img src="beach3.jpg" width="200" height="200" />
<img src="beach4.jpg" width="200" height="200" />
<img src="beach5.jpg" width="200" height="200" />
</div>
</body>
</html>Begitu sederhana kita bisa membuat image slideshow dengan plugin jquery. jika kita menggunakan jquery biasa pasti jauh lebih rumit dibandingkan menggunakan plugin. apalagi jika mengguanakn javascript biasa atau standart.
Untuk selanjutnya postingan saya bagaimana membuat Menu Dropdown
nantikan postingan saya berikutnya
0 komentar:
Post a Comment