JQuery Plugin
- 2. Plugin 框架
jQuery.fn.myRectImg = function(settings) {
// myRectImg 為自己設定的Plugin 名稱
// settings 自訂的參數，可依需求新增數量
...
};
OR
$.fn.myRectImg = function(settings) {
…...
...
};
- 3. 預設物件區塊
$.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); // 設定屬性物件
…..
- 4. 處理程序區塊
$.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);
}
