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数据显示插件整合实现代码
Oct 24 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
用jquery.sortElements实现table排序
May 04 Javascript
再探JavaScript作用域
Sep 24 Javascript
javascript中动态函数用法实例分析
May 14 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
AngularJS Ajax详解及示例代码
Aug 17 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
react 国际化的实现代码示例
Sep 14 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 缓冲的免费实现方法
2006/10/09 PHP
php 删除一个数组中的某个值.兼容多维数组!
2012/02/18 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
免费空间广告万能消除代码
2006/09/04 Javascript
JS截取字符串常用方法整理及使用示例
2013/10/18 Javascript
JavaScript 获取任一float型小数点后两位的小数
2014/06/30 Javascript
不得不分享的JavaScript常用方法函数集(下)
2015/12/25 Javascript
javascript运算符语法全面概述
2016/07/14 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
基于JavaScript实现活动倒计时效果
2017/04/20 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
Vue axios与Go Frame后端框架的Options请求跨域问题详解
2020/03/03 Javascript
JavaScript命令模式原理与用法实例详解
2020/03/10 Javascript
基于JS实现视频上传显示进度条
2020/05/12 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
在Windows8上的搭建Python和Django环境
2014/07/03 Python
详细介绍Ruby中的正则表达式
2015/04/10 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
Python变量和数据类型详解
2017/02/15 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
Python如何获取文件指定行的内容
2020/05/27 Python
详解Python 中的容器 collections
2020/08/17 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
大学毕业生简单自荐信
2013/11/05 职场文书
六一儿童节主持词
2014/03/21 职场文书
银行贷款承诺书
2014/03/29 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书