Welcome to Abdul Malik Ikhsan's Blog

jQuery – membuat plugin sendiri

Posted in Javascript by samsonasik on November 2, 2010

Selain Prototype Javascript library,  jQuery adalah salah satu library javascript yang banyak dipakai para developer ( kalau saya sih, tukang nonton kamen rider aja, hehehehe).  jQuery mempunyai ukuran yang relative kecil dibandingkan dengan library-library javascript lainnya dan mudah untuk dipelajari. Kita bisa dengan mudah meng-extends core library jQuery, dan membuat plugin sendiri untuk kebutuhan kita yg lebih spesifik.
Pada kesempatan kali ini, saya akan mencoba memaparkan cara membuat plugin sendiri di jQuery.
Hal pertama yg harus kita lakukan adalah menambahkan property ke dalam jQuery.fn object (  anggaplah kita akan membuat sebuah plugin untuk animasi menggoyang element ),  simpan dalam file goyang.jQuery.js

 $.fn.goyang = function(){};

Jika kita ingin menambahkan parameter, kita bisa gunakan seperti berikut :

 $.fn.goyang = function(options){};

Berikut contoh coding  jquery plugin untuk menggoyang element :

$.fn.goyang = function(options){
//setting default value jika parameter tidak dilewatkan
var    defaults = {
 left:'500',
 right:'1000'
 },
 settings = $.extend({}, defaults, options);

 var element = this;  //"this" adalah DOM object
 var leftpost = parseInt($(element).css("left")) -  parseInt(settings.left);
 $(element).click(function(){
 //geser kiri...
 $(element).animate({
 left:  leftpost
 },function(){
 //geser kanan...
 $(element).animate({ left: leftpost + parseInt(settings.right) });
 });
 });
};

Nah, kalau sudah, kita tinggal panggil deh :

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="goyang.jQuery.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
$('#book').goyang({   /* override default value */     left:'300', right:'700' });
 });
</script>

<div>
 <img  id="book" src="book.png" alt="" width="100" height="200" style="position: relative;left:600px"/>
</div>

simple kan ? hehehe
——————————
This article contained copyrighted material licensed under various creative commons licenses unless otherwise noted:
Image :
http://tpgblog.com/2009/11/30/jquery-plugin-its-cutetime-1-0-5/
Articles :
http://docs.jquery.com/Plugins/Authoring
http://net.tutsplus.com/articles/news/learn-how-to-create-a-jquery-plugin/
http://net.tutsplus.com/articles/news/you-still-cant-create-a-jquery-plugin/
http://jqfundamentals.com/book/book.html
jQuery 1.4 API ( CHM Version )

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: