Cara Membuat jQuery Plugin

Pada kesempatan kali ini kita akan membahas step by step / langkah demi langkah cara membuat jQuery plugin. Berdasrkan pengalaman saya, plugin dalam jQuery ini dibagi menjadi dua, yaitu plugin yang berdiri sendiri misal: plugin dialog atau splash notice dan plugin yang diattach ke element tertentu seperti lightbox, carousel, dll. Kita bahas terlebih dahulu plugin yang diattach ke element tertentu dengan cotoh ketika kita klik button tertentu, warna background akan berubah:

Demo Download File

1. Pertama kita buat kode awal

;(function($)
{

}(jQuery)

Tanda ; berfungsi untuk menutup kode diatasnya yang barang kali masih terbuka, kemudian ( function(){} )() adalah IIFE (silakan di google), dimana fungsi akan langsung dijalankan ketika di load, Sedangkan tanda $ merupakan simbol dari jQuery yang kita definisikan di bawahnya.

2. Buat Property ke Objek jQuery

;(function($)
{
	$.simplePlugin = function(element, options)
	{

	}

}(jQuery)

Silakan pilih nama property yang unik, untuk menghindari bentrok dengan property lainnya, pada contoh kali kita beri nama simplePlugin. Property ini akan kita gunakan pada saat memanggil plugin. Perintah $.simplePlugin berarti kita menambahkan property pada jQuery objek dengan value berupa objek fungsi, kemudian function(element, options) berarti kita membuat fungsi dengan dua argumen yaitu element yang berarti element dimana plugin akan kita pasangkan dan options yang merupakan parameter dari user

2. Definisikan variabel plugin dan opsi default

;(function($)
{
	$.simplePlugin = function(element, options)
	{
		var	plugin = this,
			$elm = $(element),
			defaults = {
				background: 'red',
				alertTitle: false
			}
	}

}(jQuery)

Opsi default berupa objek dengan berbagai parameter, misal dalam contoh ini warna background merah dan alertTitle bernilai false (apakah akan memunculkan alert ketika di klik), selanjutnya daripada menggunakan this, untuk memudahkan kita buat variabel plugin yang merujuk pada objek plugin yang kita buat, selanjutnya kita simpan objek jQuery dari element kedalam variabel $elm.

3. Buat fungsi pada objek plugin

;(function($)
{
	$.simplePlugin = function(element, options)
	{	
		var	plugin = this,
			$elm = $(element),
			defaults = {
				background: 'red',
				alert: true
			}
	
		var _init = function()
		{
			plugin.options = $.extend( {}, defaults, options );
			$elm.click(function(){
				$(this).parent().css('background-color', plugin.options.background);
				if (plugin.options.alertTitle)
					alert($elm.attr('title'));
				return false;
			})
		}
		_init();
	}

})(jQuery)

Kita buat fungsi yang disimpan dalam variabel _init (tanda underscore didepannya untuk memudahkan penamaan saja bahwa variabel tersebut dersifat private), maksud init ini adalah kependekan dari initialization yang berarti awalan, fungsi ini akan kita jalankan pertama kali ketika objek dibuat. Kode plugin.options = $.extend( {}, defaults, options ); berarti kita menambahkan property pada plugin kita dengan nama options yang berisi objek gabungan antara opsi defaults yang telah kita tentukan sebelumnya dengan opsi yang diberikan user (dengan method jQuery extend kita dapat gabungkan dua objek dan disimpan dalam objek baru, baca jQuery.extend()).

Selanjutnya kita beri event click ke element, dimana ketika di klik, background parent element akan berubah sesuai opsi yang telah ditentukan, jika opsi alertTitle bernilai true, tampilkan alert dengan kata-kata sesuai dengan atribut title pada element.

Terakhir kita panggil fungsi init dengan kode _init();

4. Buat Handle Untuk Mengattach Plugin ke Element

;(function($)
{
	$.simplePlugin = function(element, options)
	{	
		var	plugin = this,
			$elm = $(element),
			defaults = {
				background: 'red',
				alert: true
			}
	
		var _init = function()
		{
			plugin.options = $.extend( {}, defaults, options );
			$elm.click(function(){
				console.log('gg');
				$(this).parent().css('background-color', plugin.options.background);
			})
		}
		_init();
	}
	
	$.fn.changeBg = function(options) 
	{
		return this.each(function() 
		{
			if ($(this).data('changeBg') == undefined) {
				var plugin = new $.simplePlugin(this, options);
				$(this).data('changeBg', plugin);
			}
		});
	}

})(jQuery)

Kita beri nama plugin sesuai keinginan kita, namun usahakan yang unik, sehingga tidak bentrok dengan yang lain. pada contoh kali ini kita beri nama changeBg. Pertama kita cek apakah plugin telah disimpan ke masing-masing element if ($(this).data('changeBg') == undefined) , jika belum ada kita buat objek baru var plugin = new $.simplePlugin(this, options); dan kita simpan ke data di masing masing objek element $(this).data('changeBg', plugin);

5. Panggil Plugin
Contoh untuk memanggil plugin yang telah kita buat

$(document).ready(function()
{
	$('#yellow').changeBg({background: 'yellow'});
	$('#blue').changeBg({background: 'blue', alertTitle: true});
	$('#orange').changeBg({background: 'orange'});
})

Demo:

Download File