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与google map api结合使用 控件,监听器
Mar 04 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 Javascript
Javascript window对象详解
Nov 12 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
javascript实现留言板功能
Feb 08 Javascript
在vue中使用eslint,配合vscode的操作
Nov 09 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处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
for 循环性能比较 提高for循环的效率
2009/03/19 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
Node.js实现Excel转JSON
2015/04/24 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
JS脚本实现网页自动秒杀点击
2018/01/11 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
python解析xml文件实例分享
2013/12/04 Python
在Python中使用成员运算符的示例
2015/05/13 Python
Python读写配置文件的方法
2015/06/03 Python
python requests 使用快速入门
2017/08/31 Python
python计算两个数的百分比方法
2018/06/29 Python
python使用matplotlib模块绘制多条折线图、散点图
2020/04/26 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Django中提示消息messages的设置方式
2019/11/15 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
python ubplot使用方法解析
2020/01/10 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
详解python使用金山词霸的翻译功能(调试工具断点的使用)
2021/01/07 Python
Python实现给PDF添加水印的方法
2021/01/25 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
应聘自荐信
2013/12/14 职场文书
2015年女职工工作总结
2015/05/15 职场文书
医疗纠纷调解协议书
2015/08/06 职场文书
Python+pyaudio实现音频控制示例详解
2022/07/23 Python