AeroWindow 基于JQuery的弹出窗口插件


Posted in Javascript onJune 27, 2011

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

$('#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.3water.com/js/AeroWindow/index.html
下载地址: https://3water.com/jiaoben/32239.html
Javascript 相关文章推荐
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
js中数组结合字符串实现查找(屏蔽广告判断url等)
Mar 30 Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
js下载文件并修改文件名
May 08 Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
jQuery表格行换色的三种实现方法
Jun 27 #Javascript
19个很有用的 JavaScript库推荐
Jun 27 #Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
Jun 27 #Javascript
Jsonp 跨域的原理以及Jquery的解决方案
Jun 27 #Javascript
基于jQuery实现的当离开页面时出现提示的实现代码
Jun 27 #Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 #Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 #Javascript
You might like
PHP中通过语义URL防止网站被攻击的方法分享
2011/09/08 PHP
php加密算法之实现可逆加密算法和解密分享
2014/01/21 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
基于CI(CodeIgniter)框架实现购物车功能的方法
2018/04/09 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
PHP重载基础知识回顾
2020/09/10 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
JavaScript的arguments对象应用示例
2014/09/15 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
原生js实现可拖动的登录框效果
2017/01/21 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
python调用fortran模块
2016/04/08 Python
django批量导入xml数据
2016/10/16 Python
python实现树形打印目录结构
2018/03/29 Python
pyQT5 实现窗体之间传值的示例
2019/06/20 Python
python实现画循环圆
2019/11/23 Python
Python解析json代码实例解析
2019/11/25 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Python多线程thread及模块使用实例
2020/04/28 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
Python 测试框架unittest和pytest的优劣
2020/09/26 Python
教师简历自我评价
2014/02/03 职场文书
举起手来观后感
2015/06/09 职场文书
投诉信回复范文
2015/07/03 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书