A simple jquery plug-in preparation learning process and example

First, a closure is required to create the jquery plug-in. CopyCode The Code is as follows: (function ($ ){
// Code in here
}) (Jquery );

This is an official jquery plug-in development standard requirement. What are the advantages of using this writing method?
A) avoid global dependency.
B) avoid third-party damages.
C) compatible with jquery operators '$' and 'jquery'

2. With the closure, add the skeleton of the plug-in to it Copy codeThe Code is as follows: $. FN. dbox = function (options ){
VaR defaults = {
// Attributes and Their default values
};
VaR opts = $. Extend (defaults, options );
// Function codes in here
};

Here, dbox is the name of the plug-in for this pop-up layer.

3. Create attributes and default values for dbox Copy codeThe Code is as follows: $. FN. dbox = function (options ){
VaR defaults = {
Opacity: 0.6, // For Mask Layer
Drag: True,
Title: 'dbox ',
Content :'',
Left: 400,
Top: 200,
Width: 600,
Height: 300,
Setpos: false, // If use the customer's left and top
Overlay: True, // If use the Mask Layer
Loadstr: 'loading ',
Ajaxsrc :'',
Iframesrc :''
};
VaR opts = $. Extend (defaults, options );
// Function codes in here
};

4. Since it is a pop-up form, you must first design a div form and a mask layer. Here, I directly write the style into it. In the function codes area, enter the following: Copy code The Code is as follows: // build HTML code of the dbox
VaR dboxhtml = "<Div id = 'dbox' style = 'background-color: # FFF; Border: solid 2px # 00e; position: absolute; Z-index: 100; '> ";
Dboxhtml + = "<Div id = 'd _ head 'style = 'width: 100%; Height: 20px; border-bottom: solid 1px # 00e; '> ";
Dboxhtml + = "<Div id = 'd _ title 'style = 'float: Left; width: 90%; color: # 00e '>" + opts. title + "</div> ";
Dboxhtml + = "<Div id = 'd _ close 'style = 'float: Right; cursor: pointer; margin-Right: 5px; color: # 00e'> [x] </div> ";
Dboxhtml + = "</div> ";
Dboxhtml + = "<Div id = 'd _ content 'style = 'width: 100%; Height: 100%; padding: 3px; '>" + opts. content + "</div> ";
Dboxhtml + = "</div> ";
VaR dboxbg = "<IFRAME id = 'd _ iframebg 'style = 'position: absolute; top: 0; left: 0; width: 0; Height: 0; Border: none; '> </iframe> <Div id = 'd _ BG' style = 'background-color: #000; Z-index: 99; position: absolute; top: 0; left: 0; '> </div> ";
VaR loading = "<Div id = 'd _ loading 'style = 'position: fixed; top: 48%; left: 48%; Z-index: 100; Border: solid 1px #000; '> "+ opts. loadstr + "</div> ";

in IE6, Z-index does not work on the drop-down list. Therefore, in the mask layer, add the iframe with the ID of d_iframebg as the mask layer. In this way, the framework has been created.
5. Now we have considered what functions to implement
first, how to display the pop-up form, usually click, here the click event copy Code the code is as follows: // click event
$ (this ). click (function () {
$ ("body "). append (dboxhtml);
// case Ajax
If (OPTs. ajaxsrc! = "") {
$ ("# d_content "). append ("

");
$ ("# d_ajaxcontent "). load (OPTs. ajaxsrc);
}< br> // case IFRAME
else if (OPTs. iframesrc! = "") {
$ ("# d_content "). append (" "); &lt;br &gt;}&lt; br&gt; addcss (); &lt;br&gt; // case drag &lt;br&gt; If (OPTs. drag = true) {&lt;br&gt; drag (); &lt;br &gt;}&lt; BR &gt;$ ("# d_close "). click (dboxremove); &lt;br&gt; return false; &lt;br &gt;}); &lt;/P&gt;

The last return false option removes the default click events of the browser. For example, binding a click event on a tag will not cause the default jump effect.
In this click event, the dbox framework is first loaded into the page, then the content loading method is determined, and the three events are handled separately.
1. addcss () This event processes the size of the mask layer and the position of the pop-up layer.
2, drag () This event handles the drag of the pop-up layer
3. dboxremove () Close the event processing pop-up layer
With these three events, the entire plug-in is basically complete.

6. The code for three events is posted here.
1, addcss ():Copy codeThe Code is as follows: // Add CSS to the dbox
Function addcss (){
VaR Pos = setposition ();
$ ("# Dbox" ).css ({"Left": POS [0], "TOP": POS [1], "width": opts. width + "PX", "height": opts. height + "PX "});
If (OPTs. overlay ){
VaR wh = getpagesize ();
$ (Dboxbg ). appendto ("body" mirror.css ({"opacity": opts. opacity, "width": wh [0], "height": wh [1]});
}
}

In addcss, there are two functions to implement. The following code:Copy codeThe Code is as follows: // calc the size of the page to put the mask layer cover the whole document
Function getpagesize (){
If ($ (window). Height ()> $ (document). Height ()){
H = $ (window). Height ();
} Else {
H = $ (document). Height ();
}
W = $ (window). Width ();
Return array (W, H );
}
// Calc the position of the dbox to put the dbox in the center of current window
Function setposition (){
If (OPTs. setpos ){
L = opts. Left;
T = opts. Top;
} Else {
VaR W = opts. width;
VaR H = opts. height;
VaR width = $ (document). Width ();
VaR Height = $ (window). Height ();
VaR left = $ (document). scrollleft ();
VaR Top = $ (document). scrolltop ();
VaR T = Top + (height/2)-(H/2 );
VaR L = left + (width/2)-(W/2 );
}
Return array (L, t );
}

2, drag ():Copy code The Code is as follows: // drag the dbox
// This event contains four events (handle. mousedown, move, out, up)
Function drag (){
VaR dx, Dy, moveout;
VaR handle = $ ("# dbox"). Find ("# d_head> # d_title" comment .css ('cursor ', 'Move ');
Handle. mousedown (function (e ){
// Cal the distance between E and dbox
DX = E. clientx-parseint ($ ("# dbox" ).css ("Left "));
DY = E. clienty-parseint ($ ("# dbox" ).css ("TOP "));
// Bind mousemove event and mouseout event to the dbox
$ ("# Dbox" mirror.mousemove(moveapps.mouseout(out).css ({"opacity": opts. Opacity });
Handle. mouseup (up );
});
Move = function (e ){
Moveout = false;
Win = $ (window );
VaR X, Y;
If (E. clientx-DX <0 ){
X = 0;
} Else {
If (E. clientx-DX> (win. Width ()-$ ("# dbox"). Width ())){
X = win. Width ()-$ ("# dbox"). Width ();
} Else {
X = E. clientx-DX;
}
}
If (E. clienty-dy <0 ){
Y = 0;
} Else {
Y = E. clienty-dy;
}
$ ("# Dbox" ).css ({
Left: X,
Top: Y
});
}
Out = function (e ){
Moveout = true;
SetTimeout (function (){
Moveout & up (E );
}, 10 );
}
Up = function (e ){
$ ("# Dbox"). Unbind ("mousemove", move). Unbind ("mouseout", outplacement .css ("opacity", 1 );
Handle. Unbind ("mouseup", up );
}
}

3, dboxremove ():Copy codeThe Code is as follows: // close the dbox
Function dboxremove (){
If ($ ("# dbox ")){
$ ("# Dbox"). Stop (). fadeout (200, function (){
$ ("# Dbox"). Remove ();
If (OPTs. overlay ){
$ ("# D_bg"). Remove ();
$ ("# D_iframebg"). Remove ();
}
});
}
}

At this point, the plug-in production is basically complete, but the loading stuff is not added...
In addition, we also found that in IE6, the IFRAME height and width in the pop-up are missing points. In addition, when there is a mask layer, the movement is not smooth.
You are welcome to discuss other issues!
Online Demo address http://demo.jb51.net/js/dBox/dBox.htm
Packaging http://xiazai.jb51.net/201004/yuanma/dBox.rar