A simple jquery plug-in creation, learning process and example

This article is for reference only. If you have any shortcomings or errors, please do not hesitate to give me your advice.

Here, we will describe how to create a plug-in based on the jquery plug-in production instance at the pop-up layer. Here we can see the effect:

Http://files.cnblogs.com/bestfc/dBox.rar

In addition, how can I add this to my blog without downloading it?

First, a closure is required to create the jquery plug-in.

 
(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

 
$. FN. dbox =Function(Options ){VaRDefaults = {// Attributes and Their default values};VaROpts = $. 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

 
$. FN. dbox =Function(Options ){VaRDefaults = {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 :''};VaROpts = $. Extend (defaults, options );
 

 
// Function codes in here };
 

4. Since it is a pop-up form, first design a div form and a mask layer. Here I write the style directly into it. In the function codes area, enter the following:

         // 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, so the iframe with ID d_iframebg is added to the mask layer as the mask layer. In this way, the framework has been created.

 
5. What functions should we consider now?
 

 
First, how to display the pop-up form, usually click, here the click event is still used
 

         // Click Event $ ( This ). Click ( Function () {$ (" Body "). Append (dboxhtml ); // Case Ajax             If (OPTs. ajaxsrc! ="  ") {$ (" # D_content "). Append (" <Div id = 'd _ Ajax 'style = 'width: "+ (OPTs. Width-6) +" Px; height: "+ (OPTs. Height-26) +" Px; overflow: Scroll; '> <Div id = 'd _ ajaxcontent'> </div> "); $ (" # D_ajaxcontent "). Load (OPTs. ajaxsrc );} // Case IFRAME              Else   If (OPTs. iframesrc! =" ") {$ (" # D_content "). Append (" <IFRAME frameborder = '0' width =' "+ (OPTs. Width-6) +" 'Height =' "+ (OPTs. Height-26) +" 'Src =' "+ Opts. iframesrc +" '> ");} Addcss (); // Case drag              If (OPTs. Drag = True ) {Drag ();} $ (" # D_close "). Click (dboxremove );Return   False ;});

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 three events are posted here.Code

1, addcss ():

  // Add CSS to the dbox          Function Addcss (){ VaR Pos = setposition (); $ (" # Dbox "Developer.css ({"Left ": POS [0]," Top ": POS [1]," Width ": Opts. Width +" Px "," Height ": Opts. height +" Px "}); If (OPTs. overlay ){ VaR Wh = getpagesize (); $ (dboxbg). appendto (" Body "Developer.css ({" Opacity ": Opts. opacity ," Width ": Wh [0],"Height ": Wh [1]}) ;}} in addcss, there are two functions to be implemented:

 // 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 ():

 // 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 "Mirror.css ('cursor ', 'Move'); handle. mousedown (Function (E ){ // Cal the distance between E and dbox DX = E. clientx- Parseint ($ (" # Dbox "Developer.css (" Left "); DY = E. clienty- Parseint ($ (" # Dbox "Developer.css (" Top ")); // Bind mousemove event and mouseout event to the dbox $ (" # Dbox "Developer.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 "Developer.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 ", Out0000.css (" Opacity ", 1); handle. Unbind (" Mouseup ", UP );}}

3, dboxremove ():

// Close the dboxFunctionDboxremove (){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!

Http://files.cnblogs.com/bestfc/dBox.rar