此文档介绍了一个名为 myrectimg 的 jQuery 插件，允许用户自定义图像的高度、宽度、边角半径和边框样式。使用者可以通过配置选项来覆盖默认设置，并在插件执行时进行图像处理。文档提供了插件的基本用法和代码示例。

1. jQuery Plugin
Easy
Try
Jason Wang

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);
}

5. 執行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(); // 直接使用預設的設定值
});

6. END