A simple jQuery plug-in production learning process and examples_jquery

1. First, making a jQuery plug-in requires a closure

Copy the code The code is as follows:

(function ($) {
//code in here
})(jQuery);

This is the official plug-in development specification requirement from jQuery, use this What are the benefits of this way of writing?
a) Avoid global dependencies.
b) Avoid third-party sabotage.
c) Compatible with jQuery operator '$' and 'jQuery '

Second, with the closure, add the skeleton of the plug-in

Copy code The code is as follows:

$.fn.dBox = function (options) {
var defaults = {
//Various attributes and their default values
};
var opts = $.extend(defaults, options);
//function codes in here
};

Here dBox is my name for this pop-up layer plug-in

Third, establish the properties and their default values ​​​​for dBox

Copy code The 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
};

Fourth, since it is a pop-up form, you must first design a div form and mask layer . Here I also write the style directly in the function codes area. Input as follows:

Copy code The code is as follows:

//build html code of the dBox
var dBoxHtml = "

";
dBoxHtml = "

";
dBoxHtml = "

" opts.title "

";
dBoxHtml = "

[x]

";
dBoxHtml = "

";
dBoxHtml = "< ;div id='d_content' style='width:100%;height:100%;padding:3px;'>" opts.content "

";
dBoxHtml = "

";
var dBoxBG = "