AeroWindow是个Win7样式的弹出窗口，jQuery插件，效果很酷!而且还像windows的窗口一样可最大，最小化，随意拖动。
可以一个页面中创建多个弹出窗，被选中的弹出窗会加亮显示，在同一网页中可以有多个弹出窗口，也可以通过双击窗口实现最大化，跟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="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css"/>
<link href="https://www.jb51.net/css/AeroWindow.css?r=123" type="text/css"/>
<script type="text/javascript" src="https://www.jb51.net/js/jquery-1.4.2.min.js">script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery-ui-1.8.1.custom.min.js">script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery.easing.1.3.js">script>
<script type="text/javascript" src="https://www.jb51.net/js/jquery-AeroWindow.js">script>
然后在页面放一个DIV：
复制代码 代码如下:
<div>
<iframe src="https://www.baidu.com/" frameborder="0"></iframe>
<div></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
})
});
在线演示：
下载地址： https://www.jb51.net/jiaoben/32239.html
您可能感兴趣的文章: