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 相关文章推荐
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
javascript对象的创建和访问
Mar 08 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
js仿淘宝商品放大预览功能
Mar 15 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
vuejs实现递归树型菜单组件
Jan 13 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
基于ant design日期控件使用_仅月份的操作
Oct 27 Javascript
从原生JavaScript到React深入理解
Jul 23 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
一个用mysql_odbc和php写的serach数据库程序
2006/10/09 PHP
php 验证码(倾斜,正弦干扰线,黏贴,旋转)
2013/06/29 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP批量修改文件名称的方法分析
2017/02/27 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
Prototype Class对象学习
2009/07/19 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
仿淘宝TAB切换搜索框搜索切换的相关内容
2014/09/21 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
jQuery模拟新浪微博首页滚动效果的方法
2015/03/11 Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
2016/02/21 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
js实现短信发送倒计时功能(正则验证)
2017/02/10 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
浅谈JavaScript作用域和闭包
2017/09/18 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
[43:57]LGD vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python sqlite3事务处理方法实例分析
2017/06/19 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
Python matplotlib的使用并自定义colormap的方法
2018/12/13 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
酒店总经理助理岗位职责
2014/02/01 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
大专学生求职信
2014/07/04 职场文书
公司离职证明样本
2014/09/13 职场文书
教师岗位职责范本
2015/04/02 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
python如何查找列表中元素的位置
2022/05/30 Python