AeroWindow 基于JQuery的弹出窗口插件

可以一个页面中创建多个弹出窗，被选中的弹出窗会加亮显示，在同一网页中可以有多个弹出窗口，也可以通过双击窗口实现最大化，跟windows像极了。如果想要做一个类似操作系统的页面，用这个插件是完全可以实现的。兼容多种主流浏览器。

最基础的调用方法：

$('#YourContainerDiv').AeroWindow((WindowTitle:'hello world',));

带全部参数的调用：

 
$('#YourContainerDiv').AeroWindow({ 
 
WindowTitle: 'My first very cool Aero Window for Web', 
 
WindowPositionTop: 'center', 
 
WindowPositionLeft: 'center', 
 
WindowWidth: 400, 
 
WindowHeight: 100, 
 
WindowAnimation: 'easeOutCubic', 
 
WindowResizable: true, 
 
WindowDraggable: true, 
 
WindowMinimize: true, 
 
WindowMaximize: false, 
 
WindowClosable: true 
 
});

使用方法：
　　首先加上以下引用：

复制代码代码如下:

 
<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>

然后在页面放一个DIV：

复制代码代码如下:

 
<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>

最后调用并初始化窗体：

复制代码代码如下:

 
$(document).ready(function() { 
 
$('#Firefoxapp').AeroWindow({ 
 
WindowTitle: '测试', 
 
WindowWidth: 500, 
 
WindowHeight: 300, 
 
WindowMinWidth: 50, 
 
WindowMinHeight: 10, 
 
WindowAnimationSpeed: 1000, 
 
WindowAnimation: 'easeOutCubic', 
 
WindowStatus: 'maximized', 
 
WindowResizable: true, 
 
WindowDraggable: true, 
 
WindowMinimize: true, 
 
WindowMaximize: true, 
 
WindowClosable: true 
 
}) 
 
});

在线演示： http://demo.jb51.net/js/AeroWindow/index.html
下载地址： https://www.jb51.net/jiaoben/32239.html

频道导航

AeroWindow 基于JQuery的弹出窗口插件

您可能感兴趣的文章: