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实现的类似Google的Div拖动效果代码
Aug 09 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
JQuery学习总结【二】
Dec 01 Javascript
浅谈JavaScript的函数及作用域
Dec 30 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
MUI实现上拉加载和下拉刷新效果
Jun 30 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
js prototype深入理解及应用实例分析
Nov 25 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
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学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
php解析url并得到url中的参数及获取url参数的四种方式
2015/10/26 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
2014/11/23 Javascript
html的DOM中document对象images集合用法实例
2015/01/21 Javascript
AngulerJS学习之按需动态加载文件
2017/02/13 Javascript
javascript+html5+css3自定义提示窗口
2017/06/21 Javascript
React Native自定义控件底部抽屉菜单的示例
2018/02/08 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
Python 40行代码实现人脸识别功能
2017/04/02 Python
pycharm远程调试openstack代码
2017/11/21 Python
浅谈Python NLP入门教程
2017/12/25 Python
Python实现线程状态监测简单示例
2018/03/28 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
销售工作岗位职责
2013/12/24 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
九华山导游词
2015/02/03 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
中秋节随笔
2015/08/15 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
反邪教学习心得体会
2016/01/15 职场文书
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript
详解Vue的列表渲染
2021/11/20 Vue.js