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 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
JQuery+Ajax无刷新分页的实例代码
Feb 08 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
Jan 14 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
jQuery实现复制到粘贴板功能
Feb 11 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
JavaScript实现单点登录的示例
Sep 23 Javascript
ajax请求前端跨域问题原因及解决方案
Oct 16 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
一个可以找出源代码中所有中文的工具
2006/10/25 PHP
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
php实现用于验证所有类型的信用卡类
2015/03/24 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
window.location和document.location的区别分析
2008/12/23 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
2011/01/06 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
JavaScript获取当前运行脚本文件所在目录的方法
2016/02/03 Javascript
如何在Angular.JS中接收并下载PDF
2016/11/26 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
Python max内置函数详细介绍
2016/11/17 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
利用html5 file api读取本地文件示例(如图片、PDF等)
2018/03/07 HTML / CSS
HTML5移动端手机网站开发流程
2016/04/25 HTML / CSS
服装厂厂长岗位职责
2013/12/27 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
我的动漫时代的创业计划书范文
2014/01/27 职场文书
奥巴马连任演讲稿
2014/05/15 职场文书
居住证明范文
2015/06/17 职场文书