You can create multiple pop-ups in one page, and the selected pop-up window will be highlighted, you can have multiple pop-up windows on the same page, or you can maximize by double-clicking the window, which is very similar to Windows. If you want to do an OS-like page, using this plugin is completely achievable. Compatible with a variety of mainstream browsers.
The most basic method of invocation:
Copy Code code as follows:
$ (' #YourContainerDiv '). Aerowindow (windowtitle: ' Hello World ',);
Call with all parameters:
Copy Code code as follows:
$ (' #YourContainerDiv '). Aerowindow ({
WindowTitle: ' My i-very cool Aero windows for Web ',
Windowpositiontop: ' Center ',
Windowpositionleft: ' Center ',
windowwidth:400,
WINDOWHEIGHT:100,
Windowanimation: ' Easeoutcubic ',
Windowresizable:true,
Windowdraggable:true,
Windowminimize:true,
Windowmaximize:false,
Windowclosable:true
});
How to use:
First, add the following references:
Copy Code code as follows:
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<link href= "Http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel= "stylesheet" type = "Text/css"/>
<link href= "css/aerowindow.css?r=123" rel= "stylesheet" type= "Text/css"/>
<script type= "Text/javascript" src= "Js/jquery-1.4.2.min.js" >script>
<script type= "Text/javascript" src= "Js/jquery-ui-1.8.1.custom.min.js" >script>
<script type= "Text/javascript" src= "Js/jquery.easing.1.3.js" >script>
<script type= "Text/javascript" src= "Js/jquery-aerowindow.js" >script>
Then put a div on the page:
Copy Code code as follows:
<div id= "Firefoxapp" style= "Display:none;" >
<iframe src= "http://www.baidu.com/" width= "100%" height= "100%" style= "border:0px;" frameborder= "0" ></ Iframe>
<div id= "Iframehelper" ></div>
</div>
The last call and initialize the form:
Copy Code code as follows:
$ (document). Ready (function () {
$ (' #Firefoxapp '). Aerowindow ({
WindowTitle: ' Test ',
WINDOWWIDTH:500,
WINDOWHEIGHT:300,
WINDOWMINWIDTH:50,
Windowminheight:10,
windowanimationspeed:1000,
Windowanimation: ' Easeoutcubic ',
Windowstatus: ' Maximized ',
Windowresizable:true,
Windowdraggable:true,
Windowminimize:true,
Windowmaximize:true,
Windowclosable:true
})
});
Online Demo: http://demo.jb51.net/js/AeroWindow/index.html
Download Address: http://www.jb51.net/jiaoben/32239.html