The test page must reference the jquery js file plug-in file jquery. Jwin. jsjquery. Jwin. The use parameters of the plug-in are described in the Code below:
The Code is as follows:
(Function ($ ){
Var imgdir = 'images/'; // path of the image folder
Var autoHide = false; // whether the suspended p is automatically hidden
Var hideType = 'hide '; // optional parameters include hide, slide, and fade.
Var hideDelay = 0; // the time used by the suspension p hiding Process
Var hideTime = 0; // The delay hiding time of the suspended p.
Var zIndex = 100; // if multiple p values exist, the p that obtains the focus is at the top layer.
Var showType = 'show'; // optional parameters include hide, slide, and fade.
Var showTime = 0; // the time used in the suspension p display process
Var showDelay = 0; // The time when the p delay is displayed.
// The following two variables are used to ensure that the position where p appears after it is dragged and hidden.
Var oldTop = ''; // Save the top
Var oldLeft = ''; // Save the left
$. Fn. extend ({
Jwin: function (option ){
Var op = $. extend ({
Id: '', // the id of the suspended p (required)
Title: '', // title
Message: '', // display information
ElementId: '', // display the element id
Url: '', // The displayed page address
Width: 400, // The width of the suspended p
Height: 300, // The height of the suspended p
// Floating p display parameters
ShowType: 'show', // optional parameters of hide, slide, and fade are displayed in floating p mode.
ShowTime: 0, // The time used to display the suspended p
ShowDelay: 0, // The time when the p delay is displayed.
// Floating p hidden Parameter
AutoHide: false, // whether the suspended p is automatically hidden
HideType: 'hide ', // optional parameters include hide, slide, and fade.
HideTime: 0, // the time used by the suspension p hiding Process
HideDelay: 0, // floating p automatically hides the delay time
}, Option );
If (op. id = ''){
Alert ("WinId missing ");
Return;
}
AutoHide = op. autoHide;
HideType = op. hideType;
HideDelay = op. hideDelay;
HideTime = op. hideTime;
ShowType = op. showType;
ShowTime = op. showTime;
ShowDelay = op. showDelay;
ZIndex = zIndex + 1;
Var winEle = $ ("#" + op. id );
If (winEle. length = 0 ){
This. width = parseInt (op. width );
This. height = parseInt (op. height );
Var banner = this. JwinCreatBanner (op. id, this. width, op. title );
OldTop = this. height> = document.doc umentElement. clientHeight? 0: (document.doc umentElement. clientHeight-this.height)/2;
OldLeft = this. width> = document. body. clientWidth? 0: (document. body. clientWidth-this.width)/2;
Win = $ ('
');
Win.css ({'position': 'absolute ', 'top': oldTop, 'left': oldLeft, 'width' :( this. width + 2), 'zindex': zIndex, 'display': 'none '});
Win.html (banner );
Win. find ("# close"). bind ('click', function () {$ (this). JwinClose (op. id );});
Win. find ("# bannerMiddle"). bind ('mousedown', function () {$ (this). JwinMove (op. id );});
Var container = $ ('
');
Container.css ({'float': 'left', 'width': + this. width, 'height': this. height, 'word-break': 'break-all', 'overflow-x': 'did', 'overflow-y': 'auto', 'border ': '1px solid #1972e1 ', 'background-color':' # fff', 'clear': 'both '});
If (op. message. length> 0 ){
Container. append (op. message );
}
Else if (op. url. length> 0 ){
Var iframe = $ ('');
Iframe.css ({'width': '000000', 'height': '000000', 'overflow': 'visible ', 'border': '0 '});
Iframe. attr ('src', op. url );
Container. append (iframe );
}
Else if (op. elementId. length> 0 ){
Var element = $ ("#" + op. elementId );
If (element ){
Container. append (element );
Element. show ();
}
}
Win. append (container );
$ (Document. body). append (win );
This. JwinShow (win );
// Whether to set automatic shutdown
If (autoHide ){
This. JwinHide (op. id );
}
}
Else {
WinEle.css ({'zindex' :( winEle.css ('zindex') + 2), 'top': oldTop, 'left': oldLeft });
This. JwinShow (winEle );
}
},
// Create a title
JwinCreatBanner: function (winId, width, title ){
Var bannerImddleWidth = width-47; // drag the Part p to the total width minus the width of the rounded corner and close the button
Var banner ='
';
Banner + ='
';
Banner + ='
'+ Title +'
';
Banner + ='
';
Banner + ='
';
Banner + ='
';
Return banner;
},
// Drag
JwinMove: function (winId ){
Var floatWin = document. getElementById (winId );
ZIndex = zIndex + 1;
FloatWin. style. zIndex = zIndex;
O = window. event. srcElement | specify your event.tar get;
Var d = document;
Var a = window. event;
Var x = a. layerX? A. layerX: a. offsetX;
Var y = a. layerY? A. layerY: a. offsetY;
If (o. setCapture ){
O. setCapture ();
}
Else if (window. captureEvents ){
Window. captureEvents (Event. MOUSEMOVE | Event. MOUSEUP );
}
D. onmousemove = function (){
If (! A) a = window. event;
If (! A. pageX) a. pageX = a. clientX;
If (! A. pageY) a. pageY = a. clientY;
Var tx = a. pageX-x, ty = a. pageY-y;
Var maxx=document.doc umentElement. clientWidth-floatWin.clientWidth;
Var maxy=document.doc umentElement. clientHeight-floatWin.clientHeight;
Tx = (tx <0 )? 0: tx;
Ty = (ty <0 )? 0: ty;
Tx = (tx> maxx )? Maxx: tx;
Ty = (ty> maxy )? Maxy: ty;
FloatWin. style. left = tx;
FloatWin. style. top = ty;
};
D. onmouseup = function (){
If (o. releaseCapture ){
O. releaseCapture ();
}
Else if (window. captureEvents ){
Window. captureEvents (Event. MOUSEMOVE | Event. MOUSEUP );
}
D. onmousemove = null;
D. onmouseup = null;
};
},
// Display
JwinShow: function (win ){
Var t = showDelay;
Switch (showType ){
Case 'slide ':
SetTimeout (function () {win. slideDown (showTime) ;}, t );
Break;
Case 'fade ':
SetTimeout (function () {win. fadeIn (showTime) ;}, t );
Break;
Default:
SetTimeout (function () {win. show () ;}, t );
Break;
}
},
// Hide
JwinHide: function (winId, atonce ){
Var win = $ ("#" + winId );
Var t = atonce? 0: hideDelay;
Switch (hideType ){
Case 'slide ':
SetTimeout (function () {win. slideUp (hideTime) ;}, t );
Break;
Case 'fade ':
SetTimeout (function () {win. fadeOut (hideTime) ;}, t );
Break;
Default:
SetTimeout (function () {win. hide () ;}, t );
Break;
}
},
// Close
JwinClose: function (winId ){
This. JwinHide (winId, true );
}
});
}) (JQuery)
