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客户端脚本的设计和应用
Aug 21 Javascript
event.srcElement+表格应用
Aug 29 Javascript
一个简单的javascript类定义例子
Sep 12 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
一不小心就做错的JS闭包面试题
Nov 25 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
AngularJS 模块详解及简单实例
Jul 28 Javascript
jQuery操作css样式
May 15 jQuery
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 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
实现树状结构的两种方法
2006/10/09 PHP
PHP+DBM的同学录程序(1)
2006/10/09 PHP
通过JavaScript或PHP检测Android设备的代码
2011/03/09 PHP
php微信公众开发之获取周边酒店信息的方法
2014/12/22 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
php基于jquery的ajax技术传递json数据简单实例
2016/04/15 PHP
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
2012/09/14 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
2017/05/05 jQuery
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
浏览器事件循环与vue nextTicket的实现
2019/04/16 Javascript
JavaScript基础之this和箭头函数详析
2019/09/05 Javascript
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
Servlet面试题库
2015/07/18 面试题
银行个人求职自荐信范文
2013/12/16 职场文书
年终考核评语
2014/01/19 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
班级活动策划书
2014/02/06 职场文书
2014年小学植树节活动方案
2014/03/02 职场文书
施工安全生产承诺书
2014/05/23 职场文书
爱护公物演讲稿
2014/09/09 职场文书
交通事故委托书范本
2014/09/28 职场文书
2019教师的学习计划
2019/06/25 职场文书
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python