JS implementation of the window plug-in function example code sharing _JAVASCRIPT skills

Current test under: Support ie6+ firefox Google browser and so on.

Let's take a look at the basic configuration items for this component:

Copy Code code as follows:

This.config = {

Targetcls: '. Clickelem ',//click Element
Title: ' I Am lone ',//Window caption
Content: ' text:<p style= ' width:100px;height:100px ' > I am the Dragon </p> ',
Content: ' img:yun_qi_img/error.html ',
Window content {text: specific content | id:id name | img: Pictures LINK |
Iframe:src link} {string}
width:400,//width of content
height:300,//content height
The height of the theight:30,//caption defaults to 30
Drag:true,//Whether you can drag the default to True
time:3000,//Auto Close window time is empty or ' undefined ' is not closed
Showbg:true,//Set whether to show mask layer defaults to true matte
Closable: ' #window-close ',//Close button
bgcolor: ' #000 ',//default color
opacity:0.5,//Default Transparency
Position: {
x:0,
y:0//default equals 0 Center
},
zindex:10000,
Isscroll:true,//By default, the window scrolls with scrolling
Isresize:true,//Zoom by default with window scaling
callback:null//window display Post callback function

};

JS to write a simple window plug-in (including demo and source code)
2013-12-11 22:30 by Lone 0707, 409 read, 1 reviews, favorites, edit
The latest project is done, not a lot of things, today is also in the lieu, so take advantage of this time to study a simple JS window function, of course, the Internet is a lot of plug-ins, I did not look at the online plug-in source code just with the daily use of the play window Plug-ins have so many functions to realize their own window thinking, Of course I this may achieve the basic function, then if want to do better and more perfect need to continue to optimize later! If there is a shortage of places! Please forgive us a lot!

Because the window, everyone knows what it is, so this time did not do a demonstration effect chart! Current test under: Support ie6+ firefox Google browser and so on.

Let's take a look at the basic configuration items for this component:

Press CTRL + C to copy the code

Press CTRL + C to copy the code
1. Support Configuration header content, the width of the height of the caption and Height window whether the Windows can be automatically closed after dragging the window to display the mask background color and transparency of the configuration, and the display position of the window the default x axis 0 Y axis 0 is centered, or you can configure the position of the x axis y axis, but note that it is relative to the parent element X axis y axis If you do not specify a relative positioning of the parent element, it is relative to the document by default. Of course the width and height of the contents of the window do not recommend more than the width and height of one screen of the viewer as far as possible than the width and height of the first screen because I used to play with someone else's. Window plugin will exist after clicking the Close button, because the viewer has a scroll bar click after the trigger scroll bar event can not close the window if the content width and height of the big words There is also no relationship window automatically appears with scroll bars.

2. The content configuration items of the window support four kinds of 1.text (text) can be configured as follows Text:<p style= "width:100px;height:100px" > I am Lone </p>

2. IMG (picture) can be configured as follows img:yun_qi_img/error.html

3. ID (ID node) can be configured as follows ' Id:xx '

4. The IFRAME can be configured as follows ' iframe:http://www.baidu.com (IFRAME address) '

3. Provide the window after the callback function: such as after the window can do their own want to do things.

So the window components also have nothing to say, of course, if you want to use their own CSS style can be used to write their own, I JS did not write dead just to complete the JS basic window business functions.

The HTML code is as follows:

Copy Code code as follows:

<div class= "Clickelem" style= "margin-top:10px;" > I am lone please click me </div>
<div class= "Clickelem" style= "margin-top:10px;" > I am lone please click me </div>

The CSS code is as follows

Copy Code code as follows:

<style type= "Text/css" >
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, Sans-serif;
Label{cursor:pointer;}

#window-box{border:5px solid #E9F3FD; background: #FFF;}
. windown-title{position:relative;height:30px;border:1px Solid #A6C9E1 Overflow:hidden;background:url (images/ Tipbg.png) 0 0 repeat-x;}
. Window-title h2{padding-left:5px;font-size:14px;color: #666;}
#window-close{position:absolute;right:10px;top:8px;width:10px;height:16px;text-indent:-10em;overflow:hidden; Background:url (images/tipbg.png) 100% -49px no-repeat;cursor:pointer;
#window-content-border{padding:5px 0 5px 5px;}

</style>

JS code is as follows

Copy Code code as follows:

/**
* Write JS window components
* @date 2013-12-10
* @author Tugenhua
* @email 879083421@qq.com
*/

function Overlay (options) {

This.config = {

Targetcls: '. Clickelem ',//click Element
Title: ' I Am lone ',//Window caption
Content: ' text:<p style= ' width:100px;height:100px ' > I am Lone </p> ',
Content: ' Img:yun_qi_img/t1uskqfc0dxxb5rxb6-1060-300.jpg ',
Window content {text: specific content | id:id name | img: Pictures LINK |
Iframe:src link} {string}
width:400,//width of content
height:300,//content height
The height of the theight:30,//caption defaults to 30
Drag:true,//Whether you can drag the default to True
time:3000,//Auto Close window time is empty or ' undefined ' is not closed
Showbg:true,//Set whether to show mask layer defaults to true matte
Closable: ' #window-close ',//Close button
bgcolor: ' #000 ',//default color
opacity:0.5,//Default Transparency
Position: {
x:0,
y:0//default equals 0 Center
},
zindex:10000,
Isscroll:true,//By default, the window scrolls with scrolling
Isresize:true,//Zoom by default with window scaling
callback:null//window display Post callback function

};

This.cache = {
Isrender:true,//window HTML structure renders only once
Isshow:false,//whether the window has been displayed
Moveable:false
};

This.init (options);
}

Overlay.prototype = {

Constructor:overlay,

Init:function (options) {
This.config = $.extend (This.config,options | | {});
var self = this,
_config = Self.config,
_cache = Self.cache;
$ (_CONFIG.TARGETCLS). each (function (Index,item) {

$ (item). Unbind (' click ');
$ (item). bind (' click ', function () {

HTML structure of render pinball window
Self._renderhtml ();

Window move
Self._windowmove ();
});
});

Window Scaling
Self._windowresize (' #window-box ');

The window scrolls along with the scroll bar
Self._windowisscroll (' #window-box ');

},
/*
* Render window HTML structure
*/
_renderhtml:function () {
var self = this,
_config = Self.config,
_cache = Self.cache;
var html = ';
if (_cache.isrender) {

html+= ' <div id= "WINDOWBG" style= "display:none;position:absolute;top:0;left:0;" ></div> ' +
"<div id=" Window-box "style=" Display:none;overflow:hidden; > ' +
' <div class= ' window-title ' >' <div id= ' window-content-border ' ><div id= ' window-content ' ></div></div> ' +
' </div> ';

$ (' body '). Append (HTML);

$ ("#windowbg"). CSS (' Z-index ', _config.zindex);
$ (' #window-content-border '). css ({' width ': _config.width + ' px ', ' height ': _config.height + ' px ', ' overflow ': ' Auto '});

$ ('. Window-title h2 '). HTML (_config.title);
$ ('. Window-title '). css ({' height ': _config.theight + ' px ', ' width ': _config.width, ' overflow ': ' Hidden '});
_cache.isrender = false;

Determine the format of the content passed in
Self._contenttype ();
if (_CONFIG.SHOWBG) {
Render background width and height
Self._renderdocheight ();
$ ("#windowbg"). Show ();

Self.show ();
}else {
$ ("#windowbg"). Hide ();
Self.show ();
}
Self._showdialogposition ("#window-box");
}else {

If the window has been created, just hide it, then we show
Self.show ();
$ ("#windowbg"). Animate ({"Opacity": _config.opacity}, ' normal ');
if (_CONFIG.SHOWBG) {
$ ("#windowbg"). Show ();
}

Self._showdialogposition ("#window-box");
}
$ (_config.closable). Unbind (' click ');
$ (_config.closable). bind (' click ', function () {
Click on the Close button
Self._closed ();
});

Post-Render callback function
_config.callback && $.isfunction (_config.callback) && _config.callback ();
},
/**
* Show window
*/
Show:function () {
var self = this,
_config = Self.config,
_cache = Self.cache;
$ ("#window-box") && $ ("#window-box"). Show ();
_cache.isshow = true;
if (_config.time = = ' | | typeof _config.time = = ' undefined ') {
Return
}else {
T && cleartimeout (t);
var t = settimeout (function () {
Self._closed ();
},_config.time);
}
},
/**
* Hidden Pinball window
*/
Hide:function () {
var self = this,
_cache = Self.cache;
$ ("#window-box") && $ ("#window-box"). Hide ();
_cache.isshow = false;
},
/**
* Determine what type of content to pass in
*/
_contenttype:function () {
var self = this,
_config = Self.config,
_cache = Self.cache;

var contentType = _config.content.substring (0,_config.content.indexof (":")),
Content = _config.content.substring (_config.content.indexof (":") +1,_config.content.length);

Switch (contentType) {
Case ' text ':
$ (' #window-content '). HTML (content);

Break

Case ' ID ':
$ (' #window-content '). HTML ($ (' # ' +content). html ());

Break

Case ' img ':
$ (' #window-content '). HTML (" ');

Break

Case ' iframe ':
$ (' #window-content '). html (' <iframe src= ' +content+ ' width= "100%" height= "100%" scrolling= "yes" frameborder= "0" ></iframe> ');
$ ("#window-content-border"). css ({' Overflow ': ' Visible '});

Break
}
},
/**
* Click on the Close button
*/
_closed:function () {
var self = this,
_config = Self.config,
_cache = Self.cache;
if (_cache.isshow) {
Self.hide ();
}
if (_CONFIG.SHOWBG) {
$ ("#windowbg"). Hide ();
}
$ ("#windowbg"). Animate ({"opacity": 0}, ' normal ');
},
/**
* Display the window position by default center
*/
_showdialogposition:function (Container) {
var self = this,
_config = Self.config,
_cache = Self.cache;
$ (container). css ({' position ': ' absolute ', ' z-index ': _config.zindex + 1});
var offsettop = Math.floor (($ (window). Height ()-$ (container). Height ())/2) + $ (document). ScrollTop (),
Offsetleft = Math.floor (($ (window). Width ()-$ (container). Width ())/2) + $ (document). ScrollLeft ();

Judge X,y position by default is equal to 0 if the word is centered otherwise reposition according to the incoming position
if (0 = = _config.position.x && 0 = = _CONFIG.POSITION.Y) {

$ (container). Offset ({' Top ': offsettop, ' Left ': offsetleft});
}else{
$ (container). Offset ({' Top ': _config.position.y, ' Left ': _config.position.x});
}
},
/**
* Render the height of the bottom background
*/
_renderdocheight:function () {
var self = this,
_config = Self.config;
$ ("#windowbg"). Animate ({"Opacity": _config.opacity}, ' normal ');
if (Self._isie6 ()) {
$ ("#windowbg"). CSS ({' Background ': ' #fff ', ' Height ': $ (document). Height () + ' px ', ' width ': $ (document). Width () + "px"});
}else {
$ ("#windowbg"). CSS ({' Background ': _config.bgcolor, ' height ': $ (document). Height () + ' px ', ' width ': $ (document). Width ( ) + "px"});
}

},
/*
* Window Zoom
*/
_windowresize:function (elem) {
var self = this,
_config = Self.config;
$ (window). Unbind (' resize ');
$ (window). Bind (' Resize ', function () {
T && cleartimeout (t);
var t = settimeout (function () {
if (_config.isresize) {
Self._showdialogposition (Elem);
Self._renderdocheight ();
}
},200);
});
},
/**
* Whether the window scrolls along with the scroll bar
*/
_windowisscroll:function (elem) {
var self = this,
_config = Self.config;
$ (window). Unbind (' scroll ');
$ (window). bind (' scroll ', function () {
T && cleartimeout (t);
var t = settimeout (function () {
if (_config.isscroll) {
Self._showdialogposition (Elem);
Self._renderdocheight ();
}
},200);
});
},
/**
* Window move
*/
_windowmove:function () {
var self = this,
_config = Self.config,
_cache = Self.cache;
var mousex = 0,
Mousey = 0;

$ ('. Window-title '). MouseEnter (function () {
$ (this). CSS ({' cursor ': ' Move '});
});
$ ('. Window-title '). MouseLeave (function () {
$ (this). CSS ({' cursor ': ' Default '});
});
$ ('. Window-title '). MouseDown (function (e) {
_cache.moveable = true;
MouseX = E.clientx-$ (this). Offset (). Left;
Mousey = E.clienty-$ (this). Offset (). Top;
$ ('. Window-title '). CSS ({' cursor ': ' Move '});
});
$ (document). MouseUp (function () {
if (!_cache.moveable) {
Return
}
$ ('. Window-title '). CSS ({' cursor ': ' Default '});
_cache.moveable = false;
});
$ (' #window-box '). MouseMove (function (e) {

if (_cache.moveable) {
$ (this). css ({"Left": E.clientx-mousex + ' px ', ' top ': E.clienty-mousey + ' px '});
}

});

},
/*
* To determine if it is a IE6 tour device
* @return {Boolean}
*/
_isie6:function () {
Return Navigator.userAgent.match (/msie 6.0/)!= null;
}

};