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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
javascript 学习之旅 (3)
Feb 05 Javascript
Javascript图像处理思路及实现代码
Dec 25 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
商城常用滚动的焦点图效果代码简单实用
Mar 28 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
基于jquery实现弹幕效果
Sep 29 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
vue实现axios图片上传功能
Aug 20 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
Sep 23 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 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 用户权限中英对照
2010/04/02 PHP
php购物车实现代码
2011/10/10 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
jQuery zTree加载树形菜单功能
2016/02/25 Javascript
详解JS正则replace的使用方法
2016/03/06 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
JavaScript事件冒泡机制原理实例解析
2020/01/14 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
实例说明Python中比较运算符的使用
2015/05/13 Python
python list转置和前后反转的例子
2019/08/26 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
Python捕获异常堆栈信息的几种方法(小结)
2020/05/18 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
python实现简单的学生管理系统
2021/02/22 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
医药工作者的求职信范文
2013/09/21 职场文书
单位门卫岗位职责
2013/12/20 职场文书
安全责任书范文
2014/03/12 职场文书
生产文员岗位职责
2014/04/05 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
2014年统计工作总结
2014/11/21 职场文书
土建施工员岗位职责
2015/04/11 职场文书
企业员工辞职信范文
2015/05/12 职场文书
八年级作文之友情
2019/11/25 职场文书
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android