Recently, I made another Weibo post in China. From the perspective of user experience, I changed many frequently-used prompts such as window. alert or window. confirm to a pop-up layer. Jquery. the boxy plug-in is already very powerful. Common prompts, confirmation, drag-and-drop, size change, and asynchronous loading are all very useful, resulting in large (negligible) files and many functions are not required, therefore, with the attitude and idea of learning and practice, we made a lightweight pop-up layer plug-in for this project. This is the first time we wrote the jqeury plug-in, in order to encapsulate common operations into jquery plug-ins in the future.
First, let's get a plug-in name so that we can get to the publisher. It's called jquey. cvbox. min. js. cv is the abbreviation of ChinaValue, the compressed capacity is under 6 K. Because it has not been completed, we should first record our thoughts.
1. add the container elements used to display the content on the page and the background of the pop-up layer. You only need to have them. As to where the elements are born (that is, where the content is displayed on the page) what will it look like? It will be trained (set up) Later, And the appearance will naturally be dressed up by the art guide.
2. according to our needs, we define common objects in advance, for example, the background of the mask, the container of the pop-up layer, the title bar of the pop-up layer, the content area of the pop-up layer, and the height and width of the current browser window, it is much easier to use later.
3. start to insert content into the container. The content can be a prompt (corresponding to the prompt function), a prompt (corresponding to the confirmation box), or an image (for example, used to enlarge a thumbnail ), it can also be a piece of HTML code (rather than writing HTML directly in JS ).
4. Define the event that the user clicks to close, that is, to hide or remove the background layer and the pop-up layer, which will be called when the operation is complete.
5. Set the transparency and scroll height of the background layer, and set the position of the pop-up layer. The center is tumble or fixed.
6. Finally, to facilitate the use of variable parameters in multiple scenarios, you must use $. extend to specify the default value.
The beta version is expected to be released after the festival, but it is still not deleted.
Online Demo: http://demo.jb51.net/js/jquery_cvbox/index.htm
Package download: http://xiazai.jb51.net/201010/yuanma/jquery_cvbox.rar
Jquery. cvbox. min. js Code
The Code is as follows:
/*
* JQuery. cvbox. js
* Http://www.chinavalue.net
*
* J. Wang
* Http://0417.cnblog.socm
*
* 2010.09.30
*/
(Function ($ ){
$. Fn. cvbox = function (options ){
Var self = $ (this );
Var defaults = {
TitleBarText :"",
TitleBarClose: "close ",
BgClickClose: false,
BgShow: true,
BgOpacity: 0.2,
ConfirmText :"",
AlertText :"",
DelayClose: 0,
SubmitAfter: function (){
$. Noop ();
}
};
Var param = $. extend ({}, defaults, options || {});
// Display the dialog box
Var cvBoxElement ='
';
CvBoxElement + ='
';
CvBoxElement + ='
'+ Param. titleBarText +'
'+ Param. titleBarClose +'
';
CvBoxElement + ='
';
CvBoxElement + ='
';
If ($ ("# cvBoxBorder"). size ()){
$ ("# CvBoxBorder"). show ();
If (param. bgShow ){
$ ("# CvBoxShade"). show ();
}
Else {
$ ("# CvBoxShade"). hide ();
}
}
Else {
$ ("Body"). append (cvBoxElement );
}
// Some element objects, such as browser width and height, scroll height, and page height
Var cbBg = $ ("# cvBoxShade ");
Var cbBorder = $ ("# cvBoxBorder ");
Var cbTitleBar =$ ("# cvBoxTitleBar ");
Var cbBody = $ ("# cvBoxBody ");
Var w, h, st, ph;
Var cb = {
// Loaded content
Content: function (){
Var text;
If (param. confirmText! = ""){
Text = $ ('
'+ Param. confirmText +'
');
}
Else if (param. alertText! = ""){
Text = $ ('
'+ Param. alertText +'
');
}
Else {
Self. show ();
Text = self;
}
Return text;
},
Hw: function (obj ){
// Obtain the height and width of any element
Var hwSize = {};
$ ('
'). AppendTo ("body"). append (obj. clone ());
HwSize. w = $ ("# cbBox"). width ();
HwSize. h = $ ("# cbBox"). height ();
$ ("# CbBox"). remove ();
Return hwSize;
},
// The width and height of the black background, and the position of the bullet box
Position: function (){
W = $ (window ). width (), h = $ (window ). height (), st = $ (window ). scrollTop (), ph = $ (document ). height ();
Cbbg.width(w2.16.height(ph2.16.css ("opacity", param. bgOpacity );
// Subject content location
Var x_size = cb. hw (cb. content ());
Var xh = x_size.h, xw = x_size.w;
Var t = st + (h-xh)/2, l = (w-xw)/2;
CbBorder.css ({
Width: xw,
Top: t,
Left: l,
ZIndex: 9999
});
},
// Locate
Posfix: function (){
If (window. XMLHttpRequest ){
CbBorder.css ("position", "fixed ");
} Else {
$ (Window). scroll (function (){
Cb. position ();
});
}
},
// Center
Center: function (){
$ (Window). resize (function (){
Cb. position ();
});
},
Bgclick: function (){
CbBg. click (function (){
Cb. hide ();
});
},
Bghide: function (){
CbBg. hide ();
},
// Hide the bullet box
Hide: function (){
If (param. confirmText = "" & param. alertText = ""){
Cb. content (). hide (). appendTo ($ ("body "));
}
// CbBorder. fadeOut (300 );
CbBorder. remove ();
CbBg. remove ();
Return false;
},
Barhide: function (){
CbTitleBar. hide ();
},
Show: function (){
If (cbBody.html () = ""){
CbBody. append (cb. content ());
}
Cb. position ();
Cb. center ();
If (param. titleBarText = ""){
Cb. barhide ();
}
If (! Param. bgShow ){
Cb. bghide ();
}
If (param. bgClickClose ){
Cb. bgclick ();
}
If (param. delayClose> 0 ){
SetTimeout (cb. hide, param. delayClose );
}
}
};
Cb. show ();
// Bind events
$ ("# CvBoxBtnSubmit"). bind ("click", function (){
If (param. confirmText! = ""){
Param. submitAfter ();
}
Cb. hide ();
});
$ ("# CvBoxBtnCancel"). bind ("click", function (){
Cb. hide ();
});
$ ("# CvBoxTitleBarClose"). bind ("click", function (){
Cb. hide ();
});
}
}) (JQuery );
Complete Test code
The Code is as follows:
