AeroWindow 基于JQuery的弹出窗口插件
AeroWindow 基于JQuery的弹出窗口插件
发布时间:2016-12-30 来源:查字典编辑
摘要:可以一个页面中创建多个弹出窗,被选中的弹出窗会加亮显示,在同一网页中可以有多个弹出窗口,也可以通过双击窗口实现最大化,跟windows像极了...

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

AeroWindow 基于JQuery的弹出窗口插件1

最基础的调用方法:

复制代码 代码如下:$('#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">

<iframe src="http://www.baidu.com/" width="100%" height="100%" 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

下载地址: http://www.jb51.net/jiaoben/32239.html

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类