自制jQuery plugin

轉自http://blog.johnsonlu.org/jquery%E8%87%AA%E8%A8%82jquery-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事件
$.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'});