Self-made lightweight jQuery. boxy dialog box extension code

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 CodeCopy codeThe 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 = '<div id = "cvBoxShade" class = "cvBoxShade"> </div> ';
CvBoxElement + = '<div id = "cvBoxBorder" class = "cvBoxBorder"> ';
CvBoxElement + = '<div id = "cvBoxTitleBar" class = "cvBoxTitleBar"> <div class = "cvBoxTitleBarText">' + param. titleBarText + '</div> <div class = "cvBoxTitleBarClose"> <a href = "javascript: void (0);" id = "cvBoxTitleBarClose">' + param. titleBarClose + '</a> </div> <div class = "cvBoxClear"> </div> ';
CvBoxElement + = '<div id = "cvBoxBody" class = "cvBoxBody"> </div> ';
CvBoxElement + = '</div> ';

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 = $ ('<div class = "cvBoxBodyBtn">' + param. confirmText + '<p> <input type = "button" id = "cvBoxBtnSubmit" class = "cvBoxBtnSubmit" value = "OK"/> <input type = "button" id =" cvBoxBtnCancel "class =" cvBoxBtnCancel "value =" cancel "/> </p> </div> ');
}
Else if (param. alertText! = ""){
Text = $ ('<div class = "cvBoxBodyBtn">' + param. alertText + '<p> <input type = "button" id = "cvBoxBtnSubmit" class = "cvBoxBtnSubmit" value = "OK"/> </p> </div> ');
}
Else {
Self. show ();
Text = self;
}

Return text;
},

Hw: function (obj ){
// Obtain the height and width of any element
Var hwSize = {};
$ ('<Div id = "cbBox" style = "position: absolute; left:-999px;"> </div> '). 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 codeCopy codeThe Code is as follows: <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Script src = "jquery. js" type = "text/javascript"> </script>
<Script src = "jquery. blockUI. js" type = "text/javascript"> </script>
<Script src = "jquery. cvbox. min. js" type = "text/javascript"> </script>
<Style type = "text/css">
DIV. postCon {
FONT-SIZE: 12px; COLOR: #666666
}
DIV. postBody {
FONT-SIZE: 12px; COLOR: #666666; LINE-HEIGHT: 150%
}
. MySearch {
DISPLAY: none
}
# MainContent {
MARGIN-TOP: 5px; MARGIN-LEFT: 5px
}
# Author_profile {
DISPLAY: none
}
. PostCon {
COLOR: # 0099ff
}
. PostBody {
COLOR: # 0099ff
}
. FeedbackCon {
COLOR: # 0099ff
}
# SideBar {
BORDER-RIGHT: # ced7ce 1px solid; BORDER-TOP: # ced7ce 1px solid; MARGIN: 0px 0px 0px 4px; BORDER-LEFT: # ced7ce 1px solid; WIDTH: auto; BORDER-BOTTOM: # ced7ce 1px solid; POSITION: fixed; TOP: 24%
}
. NewsItem {
DISPLAY: none
}
# Calendar {
DISPLAY: none
}
. CatListLink {
DISPLAY: none
}
. CatListComment {
DISPLAY: none
}
. CatListFeedback {
DISPLAY: none
}
# SideBarMain {
DISPLAY: none
}
# EntryTag {
DISPLAY: none
}
. CatListTag {
DISPLAY: none
}
. CvBoxShade {
Z-INDEX: 2000; BACKGROUND: # ccc; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 0px
}
. CvBoxBorder {
BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 8px; BORDER-TOP: #000000 0px solid; PADDING-LEFT: 8px; FONT-SIZE: 12px; Z-INDEX: 2000; PADDING-BOTTOM: 8px; BORDER-LEFT: #000000 0px solid; WIDTH: 100%; PADDING-TOP: 8px; BORDER-BOTTOM: #000000 0px solid; POSITION: absolute; BACKGROUND-COLOR: # ccc
}
. CvBoxBorder {
COLOR: # 486aaa; TEXT-DECORATION: none
}
. CvBoxBorder A: hover {
COLOR: # c00; TEXT-DECORATION: none
}
. CvBoxTitleBar {
WIDTH: 100%; LINE-HEIGHT: 27px; HEIGHT: 26px; BACKGROUND-COLOR: # eeeeee
}
. CvBoxTitleBarText {
PADDING-LEFT: 10px; FONT-WEIGHT: bold; FLOAT: left; COLOR: #333.
}
. CvBoxTitleBarClose {
PADDING-RIGHT: 10px; FLOAT: right; COLOR: # 3867af; FONT-FAMILY: Verdana
}
. CvBoxTitleBarClose IMG {
BORDER-TOP-WIDTH: 0px; DISPLAY: block; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; MARGIN: 4px 0px 0px; BORDER-RIGHT-WIDTH: 0px
}
. CvBoxBody {
WIDTH: 100%; BACKGROUND-COLOR: # ffffff
}
. CvBoxBodyBtn {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px
}
. CvBoxBodyBtn P {
MARGIN: 20px 0px 0px
}
. CvBoxBtnSubmit {
BORDER-RIGHT: # 34538b 1px solid; BORDER-TOP: # 34538b 1px solid; BACKGROUND: # 486aaa; BORDER-LEFT: # 34538b 1px solid; WIDTH: 60px; CURSOR: pointer; COLOR: # fff; LINE-HEIGHT: 23px; BORDER-BOTTOM: # 34538b 1px solid; HEIGHT: 24px
}
. CvBoxBtnCancel {
BORDER-RIGHT: # ccc 1px solid; BORDER-TOP: # ccc 1px solid; BACKGROUND: # eee; BORDER-LEFT: # ccc 1px solid; WIDTH: 60px; CURSOR: pointer; COLOR: #333; LINE-HEIGHT: 23px; BORDER-BOTTOM: # ccc 1px solid; HEIGHT: 24px
}
. CvBoxClear {
CLEAR: both; PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 1px; PADDING-BOTTOM: 0px; MARGIN: 0px; LINE-HEIGHT: 1px; PADDING-TOP: 0px
}

</Style>
<Body>
<Div>
The size of the uncompressed version is 6 kb, which is only 2 kb after compression. It should be very light. </Div>
<Div> </div>
<Div id = "jquerycvbox">
<Div>
<A id = "A1" href = "javascript: void (0);"> 1. In the displayed dialog box, click View results. </A>
<Script type = "text/javascript"> // <! [CDATA [
$ ("# A1"). click (function (){
$ (This). cvbox ({
TitleBarText: "prompt box ",
AlertText: "The farthest distance in the world Is not the distance between life and death. <br/> I am in front of you. <br/> you don't know that my father is Li Gang"
});
});
//]> </Script>
</Div>
<Div class = "jb51_Highlighter">
<Pre class = "brush: javascript"> $ (this). cvbox ({
TitleBarText: "prompt box ",
AlertText: "The farthest distance in the world Is not the distance between life and death. <br/> I am in front of you. <br/> you don't know that my father is Li Gang"
});
</Pre>
</Div>
<Div>
<A id = "A2" href = "javascript: void (0);"> 2. The prompt box pops up and closes automatically one second later. Click to view the effect. </A>
<Script type = "text/javascript"> // <! [CDATA [
$ ("# A2"). click (function (){
$ (This). cvbox ({
TitleBarText: "The prompt box is automatically closed one second later ",
AlertText: "The farthest distance in the world Is not the distance between life and death. <br/> I am in front of you. <br/> you don't know that my father is Li Gang ",
DelayClose: 1000
});
});
//]> </Script>
</Div>
<Div class = "jb51_Highlighter">
<Pre class = "brush: javascript"> $ ("# A2"). click (function (){
$ (This). cvbox ({
TitleBarText: "The prompt box is automatically closed one second later ",
AlertText: "The farthest distance in the world Is not the distance between life and death. <br/> I am in front of you. <br/> you don't know that my father is Li Gang ",
DelayClose: 1000
});
});
</Pre>
</Div>
<Div>
<A id = "A3" href = "javascript: void (0);"> 3. In the displayed dialog box, click View results. </A>
<Script type = "text/javascript"> // <! [CDATA [
$ ("# A3"). click (function (){
$ (This). cvbox ({
TitleBarText: "pop-up dialog box ",
ConfirmText: "The farthest distance in the world Is not the distance between life and death. <br/> I am in front of you. <br/> you do not know that my father is Li Gang. <br/> confirm is your father Li Gang? ",
SubmitAfter: HelloLiGang
});
});

Function HelloLiGang (){
Alert! ");
}
//]> </Script>
</Div>
<Div class = "jb51_Highlighter">
<Pre class = "brush: javascript"> $ ("# A3"). click (function (){
$ (This). cvbox ({
TitleBarText: "pop-up dialog box ",
ConfirmText: "The farthest distance in the world Is not the distance between life and death. <br/> I am in front of you. <br/> you don't know that my father is Li Gang. <br
/> <Br/> Are you sure your father is Li Gang? ",
SubmitAfter: HelloLiGang
});
});

Function HelloLiGang (){
Alert! ");
}
</Pre>
</Div>
<Div>
<A id = "A4" href = "javascript: void (0);"> 4. Load an HTML section and click View results. </A>
<Div class = "A4Demo" style = "display: none; width: 550px; padding: 10px;">
<Div>
Normally, the display of this section is set to Den den. Here, we only want to demonstrate that the HTML content is written on the current page rather than dynamically. You can view the source text of the page.
.
<Br/>
The content can be any element, including iframe.
</Div>
<Div>
</Div>
</Div>
<Script type = "text/javascript"> // <! [CDATA [
$ ("# A4"). click (function (){
$ (". A4Demo"). cvbox ({
TitleBarText: "loading HTML content"
});
});
//]> </Script>
</Div>
<Div class = "jb51_Highlighter">
<Pre class = "brush: html"> <div class = "A4Demo" style = "display: none; width: 550px; padding: 10px;">
<Div>
Normally, the display of this section is set to Den den. Here, we only want to demonstrate that the HTML content is written on the current page rather than dynamically. You can view the page source file.
<Br/>
The content can be any element, including iframe.
</Div>
<Div>
<Iframe width = "100%" frameborder = "0" src = "http://a.cvimg.cn/UploadFile/MiniBlog/2010/10-20/7a09cf13-eeb6-491b-aa63-
18dd67bde0a1_Big.jpg "> </iframe>
</Div>
</Div>
</Pre>
</Div>
<Br/>
<Div class = "jb51_Highlighter">
<Pre class = "brush: javascript"> $ ("# A4"). click (function (){
$ (". A4Demo"). cvbox ({
TitleBarText: "loading HTML content"
});
});
</Pre>
</Div>
</Div>
<Div>
<Br/> currently, it is only a simple application. The location parameter is added later, so that the dialog layer is not limited to displaying only in the middle of the screen.
</Div>
<Div id = "c_jquery_test" style = "display: none"> </div>
<Script type = "text/javascript">
If ($! = JQuery ){
$ = JQuery. noConflict ();
}
</Script>
</Body>