如何去寫乙個jquery外掛程式

前些日子，因為專案的需求，自己定製了一款jquery彈窗，這得益於自己之前接觸的專案讓我對於物件導向程式設計有了深刻的理解。

在jquery的基礎上拓展一款彈窗外掛程式：

jquery原始碼中可知，jquery.fn便是jquery的命名空間。

jquery.fn = jquery.prototype = ;

var translucent = function (elem,options) 
translucent.prototype = 
...}

translucent.prototype = 

...

這段**是jquery中兩物件合併的乙個方法，作用是如果我們在外掛程式中設定了外掛程式的屬性，則會覆蓋掉預設屬性，不需要我們做一些複雜的判斷了；

this.config = $.extend({}, this.defaults, this.options);

init:function () , this.defaults, this.options);

//this._width = this.config.width;
//下邊是呼叫外掛程式中生成dom節點，放大縮小視窗等方法
this.drawinfowindow();
if(this.config.drag)
this.smallwindow();
this.closewindow();
this.maxwindow();
},

js:

/**

* created 2018/10/26.
* @author shuaiwu li
* @module jquery semitransparent suspension frame plug-in
* @email [email protected]
* @version 1.0
*/;(function($, window, document, undefined);
translucent.prototype = ,
init:function () , this.defaults, this.options);
//this._width = this.config.width;
this.drawinfowindow();
if(this.config.drag)
this.smallwindow();
this.closewindow();
this.maxwindow();
},drawinfowindow:function () 
var translucentcontainer = $(".translucent-container");
var translucenttitle = $(".translucent-title");
translucentcontainer.css().addclass("translucent-absolute");
if(context.config.shadow)
translucenttitle.css();
if(context.config.titletextcenter)
translucenttitle.find("span").css();
var _titleheight = translucenttitle.height();
var _top = (_titleheight-20)/2;
$(".translucent-control").css();
},smallwindow:function () );
context.defaults._isscale = true;
$("#translucent_small").bind("click",function (e) );
translucenttitle.css();
translucentcontent.hide();
$(this).attr("src",context.getpath()+"icon/fangda.png");
$(this).attr("title","還原");
$("#translucent_big").attr("src",context.getpath()+"icon/big.png");
$("#translucent_big").attr("title","最大化");
context.defaults._isscale = false;
context.defaults._ismax = true;
}else);
translucenttitle.css();
translucentcontent.show();
$(this).attr("src",context.getpath()+"icon/small.png");
$(this).attr("title","最小化");
context.defaults._isscale = true;
}e.preventdefault();  //阻止預設事件
e.stoppropagation();    //阻止冒泡事件
})},
closewindow:function () 
$(".translucent-container").remove();
});},
maxwindow:function () 
if(context.defaults._ismax));
$(this).attr("src",context.getpath()+"icon/huanyuan.png");
$(this).attr("title","還原");
= ($body.width())*(0.8);
context.defaults._ismax = false;
}else);
$(this).attr("src",context.getpath()+"icon/big.png");
$(this).attr("title","最大化");
= context._width;
context.defaults._ismax = true;
}});
},dragwindow:function()
if(_top < 0)
if(_left > bodywidth)
if(_top > bodyheight)
//重新為div的left和top賦值
obj3.css();
}}).mouseup(function())}})
}drag($(".translucent-title"),$(".translucent-container"));
},getpath:function () 
}return pathstring;}}
}};$.fn.translucent = function(options) ;
})( jquery, window , document );

body,html

.translucent-relative
.translucent-absolute
.translucent-shadow
.translucent-title
.translucent-content
.translucent-center
.translucent-move
.translucent-filter
.translucent-control
.translucent-control img
.translucent-control img:hover
.translucent-control img:nth-child(1)
.translucent-control img:nth-child(2)
.translucent-control img:nth-child(3)
.margincenter

請自己到網上尋找適合的，大小為16*16

外掛程式檔案結構

最終效果圖

如何寫乙個jquery外掛程式

本文總結整理一下如何寫乙個jquery外掛程式？雖然現今各種mvvm框架異常火爆，但是jquery這個陪伴我們成長，給我們帶來很多幫助的優秀的庫不應該被我們拋棄，寫此文章，作為對以往欠下的筆記的補充，以及對jquery的重溫。寫jquery外掛程式有三種方法 1.使用 extend 來拓展jquer...

如何寫乙個jQuery外掛程式

jquery 的外掛程式開發模式主要有三種 這裡我們選用第二種 fn.myplugin functin 因為這種方法是加在jquery物件上，可以在jquery選擇器選擇元素後直接呼叫 body myplugin 若對其他兩種方法有興趣，請自行檢視jquery 官方文件。改變元素的背景顏色外掛程式 ...

寫乙個Jquery字型外掛程式

在製作專案的過程中,為了給登入使用者提醒功能,需要將當前的提示資訊字型顏色變換幾次,以達到引起使用者注意的目的.具體做法就是當滑鼠移動過提醒資訊的時候,當前的字型顏色能夠每隔50ms變換一次.非plugin版本的製作方法 初次接觸到這個需求的時候,很多人都想到利用settimeout來做,我也不例外...