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 相关文章推荐
js常用代码段收集
Oct 28 Javascript
js confirm()方法的使用方法实例
Jul 13 Javascript
javascript 循环调用示例介绍
Nov 20 Javascript
JS cookie中文乱码解决方法
Jan 28 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
javascript容错处理代码(屏蔽js错误)
Jan 20 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
解决vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效问题
Aug 24 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
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
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
php递归列出所有文件和目录的代码
2008/09/10 PHP
php实现图片缩略图的方法
2016/03/29 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
thinkphp中U方法按路由规则生成url的方法
2018/03/12 PHP
基于JQuery的日期联动实现代码
2011/02/24 Javascript
$.format,jquery.format 使用说明
2011/07/13 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
knockoutjs动态加载外部的file作为component中的template数据源的实现方法
2016/09/01 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
jQuery插件实现图片轮播效果
2020/10/19 jQuery
python实现划词翻译
2020/04/23 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
Tensorflow 查看变量的值方法
2018/06/14 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
Python Selenium截图功能实现代码
2020/04/26 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
质检的岗位职责
2013/11/17 职场文书
房地产开盘策划方案
2014/02/10 职场文书
倡议书范文格式
2014/05/12 职场文书
学生干部培训方案
2014/06/12 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
会议主持人开场白台词
2015/05/28 职场文书
python使用glob检索文件的操作
2021/05/20 Python
GO语言异常处理分析 err接口及defer延迟
2022/04/14 Golang