[jQuery]自訂jQuery plugin

平常都會使用網路上所釋出的jQuery plugin，像這樣：

<script src="xxx.js"></script>

如果是自己的功能要一直重複使用的話，做成plugin會比較方便，維護容易，使用上彈性也比較高

最精簡的jQuery plugin主要有兩個部份要處理
1.用jQuery.fn註冊plugin名稱
2.定義回傳function的動作

例如

//定義一個hello plugin
$.fn.hello = function(){
	//回傳jQuery each方法，將index和value輸出
	return this.each(function(key,value){
		alert(key + " " + $(value).html());
	});
};

使用

$('li').hello();

加入click事件

//加入click事件
$.fn.hello = function(){
	return this.each(function(key,value){
		$(this).click(function(){
			alert($(this).html());
		});
	});
};

設計可以自行傳入設定的plugin

//自行設定callback函式
$.fn.hello = function( setting ){
	//Default 物件設定
	var default_setting = {
		callback : function() {
			alert('Hello');
		}
	};

	//將setting(使用者輸入的設定)覆蓋到預設設定
	var final_settings = $.extend(default_setting, setting);

	return this.each(function(key,value){
		//呼叫callback
		$(this).click(final_settings.callback);
	});
};

使用

$('li').hello({
	callback:function(){
		alert("HAHAHAHA");
	}
});

新增參數

//新增輸入參數
$.fn.hello = function( text, setting ){
	//Default 設定
	text = text || "Hello";
	var default_setting = {
		//新增bind設定，可自行控制事件
		bind:'click',
		callback : function() {
			alert(text);
		}
	};

	//將setting(使用者輸入的設定)覆蓋到預設設定
	var final_settings = $.extend(default_setting, setting);

	return this.each(function(key,value){
		$(this).on(final_settings.bind, final_settings.callback);
	});
};

使用

//將事件改成mouseover，並輸出自訂的文字
$('li').hello("HAHAHA",{bind:'mouseover'});

另外一個簡單的plugin範例

//自製調整css plugin
$.fn.highlight = function( options ) {
	var default_options = {
		'background':'#000',
		'font-size':'10px',
		'color':'#FFF',
	};

	var final_options = $.extend(default_options, options);
	return this.css(final_options);
};

使用

$('li').highlight({'font-size':'40px'});