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 事件查询综合 推荐收藏
Mar 10 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 Javascript
jQuery中:contains选择器用法实例
Dec 30 Javascript
js实现简单的可切换选项卡效果
Apr 10 Javascript
js实现的简单图片浮动效果完整实例
May 10 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
js中!和!!的区别与用法
May 09 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
Vue详细的入门笔记
May 10 Vue.js
angular异步验证器防抖实例详解
Mar 31 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 远程关机操作的代码
2008/12/05 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
file控件选择上传文件确定后触发的js事件是哪个
2014/03/17 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
jQuery定义背景动态切换效果的方法
2015/03/23 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
jQuery Validate插件自定义验证规则的方法
2016/12/27 Javascript
详解VUE的状态控制与延时加载刷新
2017/03/27 Javascript
vue组件发布到npm简单步骤
2017/11/30 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
python写入xml文件的方法
2015/05/08 Python
python版本坑:md5例子(python2与python3中md5区别)
2017/06/20 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
python 表格打印代码实例解析
2019/10/12 Python
深入理解Tensorflow中的masking和padding
2020/02/24 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
哈萨克斯坦最大的时装、鞋子和配饰在线商店:Lamoda.kz
2019/11/19 全球购物
FirstCry阿联酋儿童和婴儿产品网上购物:FirstCry.ae
2021/02/22 全球购物
酒店管理毕业生自我鉴定
2014/03/02 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
redis数据一致性的实现示例
2022/03/18 Redis
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技