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 相关文章推荐
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
jQuery获取对象简单实现方法小结
Oct 30 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
JavaScript6 let 新语法优势介绍
Jul 15 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
Nov 18 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
Javascript中click与blur事件的顺序详析
Apr 25 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
axios向后台传递数组作为参数的方法
Aug 11 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 中文和编码判断代码
2010/05/16 PHP
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
php使用substr()和strpos()联合查找字符串中某一特定字符的方法
2015/05/12 PHP
PHP封装的Twitter访问类实例
2015/07/18 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
2009/07/18 Javascript
jQuery ajax cache缓存问题
2010/07/01 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
[04:51]TI10典藏宝瓶Ⅱ外观视频展示
2020/08/15 DOTA
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
用实例详解Python中的Django框架中prefetch_related()函数对数据库查询的优化
2015/04/01 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Pycharm学习教程(5) Python快捷键相关设置
2017/05/03 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
python按照多个条件排序的方法
2019/02/08 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
Python中zip函数如何使用
2020/06/04 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
美国流行背包品牌:JanSport(杰斯伯)
2018/03/02 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
成品仓管员岗位职责
2013/12/11 职场文书
学校安全检查制度
2014/01/27 职场文书
西式结婚主持词
2014/03/14 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
大学新生军训自我鉴定
2014/03/18 职场文书
2014大学班主任工作总结
2014/11/08 职场文书