jQuery Plugin

Easy Try

Jason Wang

Plugin 框架jQuery.fn.myRectImg = function(settings) {

// myRectImg 為自己設定的Plugin 名稱

// settings 自訂的參數，可依需求新增數量

...

};

OR

$.fn.myRectImg = function(settings) {

…...

...

};

預設物件區塊

$.fn.myRectImg = function (settings) {

var _defaultSettings = { // 預設物件

rectHeight: 200, // 變數名稱 : 值

rectWidth: 200,

isInlineBlock:true,

rectRadius: 0,

borderWidth: 0,

callback: function(data){} // 函數名稱 : function 物件參數 data

}

// 利用 $.extend 覆寫掉預設的參數

var _settings = $.extend(_defaultSettings, settings); // 設定屬性物件

…..

處理程序區塊$.fn.myRectImg = function (settings) {

….

var _settings = $.extend(_defaultSettings, settings); // 設定屬性物件

var _handler = function () { // 處理程序取出設定屬性撰寫需求

var imgW = $(this).width(); // this 為使用此 Plugin 物件

var imgH = $(this).height();

var imgTop = (_settings.rectHeight - imgH) / 2;

var imgLeft = (_settings.rectWidth - imgW) / 2;

….略

}

// 綁定每個使用此 Plugin 的物件(this)執行處理程序 (_handler)

return this.each(_handler);

}

執行Plugin<img src="Winter.jpg" />

$(function (){

// 因為使用 $.extend 做比對覆寫，所以變數參數可移動跟減少來傳遞

$("img").myRectImg({

rectHeight: 300,

rectWidth: 300,

rectRadius: 30,

callback: function(data) {

data.css({"border-style" : "dashed", "border-width": 1});

}

});

OR

$("img").myRectImg(); // 直接使用預設的設定值

});

END