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 解析xml文件
Aug 09 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
jquery网页日历显示控件calendar3.1使用详解
Nov 24 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 Javascript
微信小程序自定义轮播图
Nov 04 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
vue使用swiper实现左右滑动切换图片
Oct 16 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
TMDPHP 模板引擎使用教程
2012/03/13 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
php的一个简单加密解密代码
2014/01/14 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
2010/12/19 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
jQuery实现页面滚动时动态加载内容的方法
2015/03/20 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
weui框架实现上传、预览和删除图片功能代码
2017/08/24 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
js实现倒计时秒杀效果
2020/03/25 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
简单谈谈python中的Queue与多进程
2016/08/25 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
在PyCharm中批量查找及替换的方法
2019/01/20 Python
详解px单位html5响应式方案
2018/03/08 HTML / CSS
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
泰海淘:泰国king Power王权免税集团旗下跨境海淘综合型电商
2020/07/26 全球购物
应聘自荐书
2013/10/08 职场文书
护士实习生自我鉴定范文
2013/12/10 职场文书
会计专业大学生职业生涯规划书
2014/02/11 职场文书
检察机关个人对照检查材料
2014/09/15 职场文书
党小组意见范文
2015/06/08 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
2016年度农村党员干部主题教育活动总结
2016/04/06 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android
Nginx实现负载均衡的项目实践
2022/03/18 Servers
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android