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管中窥豹 形参与实参浅析
Dec 17 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
js实现div弹出层的方法
Nov 20 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
浅谈JavaScript中的String对象常用方法
Feb 25 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
详解小程序用户登录状态检查与更新实例
May 15 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 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
允许phpmyadmin空密码登录的配置方法
2011/05/29 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
从PHP的源码中深入了解stdClass类
2014/04/18 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
php reset() 函数指针指向数组中的第一个元素并输出实例代码
2016/11/21 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
Cookie 小记
2010/04/01 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
jQuery选择器源码解读(五):tokenize的解析过程
2015/03/31 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
JS动态增删表格行的方法
2016/03/03 Javascript
JS获取元素多层嵌套思路详解
2016/05/16 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
浅谈Node异步编程的机制
2017/10/18 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
jquery实现两个div中的元素相互拖动的方法分析
2020/04/05 jQuery
Python实现生成简单的Makefile文件代码示例
2015/03/10 Python
Django基础之Model操作步骤(介绍)
2017/05/27 Python
Python列表切片操作实例总结
2019/02/19 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
Python sorted排序方法如何实现
2020/03/31 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
python递归函数用法详解
2020/10/26 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
土木工程专业大学毕业生求职信
2013/10/13 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
夏洛特的网观后感
2015/06/15 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技