基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)


Posted in Javascript onSeptember 28, 2010

今天介绍的Jquery Dialog Plugins AeroWindow ,是其中最个性的一款,因为他拥有神似Windows 7 Aero效果的肉身。

效果图:
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
演示:

官方演示 本地演示

特点
独特: 窗口移动时标题栏反光效果
窗口按钮:最小化,减少,最大化和关闭
双击窗口标题栏最大化,缩小
活动窗口突出显示
更改窗口大小(resize)
鼠标拖拽窗口
N多个配置选项
配置选项
窗口标题
窗口的起始位置的X / Y
窗口大小
最小的窗口大小
打开窗口的可用状态(最小化,最大化,正常)
窗口动画(30个不同的绚丽效果)
窗口可用函数,鼠标事件和JavaScript调用
在下面的兼容性测试浏览器
Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
火狐3
谷歌浏览器4
苹果Safari 4
Opara10
使用起来是非常简单滴
来吧 让你现有的网站窗口以Windows Aero效果展现。

最简单的使用方法:

$('#YourContainerDiv').AeroWindow({ 
WindowTitle: 'My first very cool Aero Window for Web', 
});

自定义配置:

$('#YourContainerDiv').AeroWindow({ 
WindowTitle: 'My first cool Aero Window for Web', 
WindowPositionTop: 'center', 
WindowPositionLeft: 'center', 
WindowWidth: 600, 
WindowHeight: 400, 
WindowMinWidth: 100, 
WindowMinHeight: 100, 
WindowAnimationSpeed: 500, 
WindowAnimation: 'easeOutCubic',//窗口打开时的动画效果 
WindowResizable: true, 
WindowDraggable: true, 
WindowMinimize: true, 
WindowMaximize: false, 
WindowClosable: true 
});

包含所有必要的文件和演示文件。这个版本基于jQuery(v1.4.2)

官方下载地址: » AeroWindow(v3.5)
本站下载地址: AeroWindow 基于jquery的仿Windows Aero弹出窗

另附上生活流 页面的关于使用AeroWindow插件的代码

//javascript脚本 
$(document).ready(function() { 
$('#profilactic a').click(function() { 
var go=$(this); 
$('#mywindows').attr('src',go.attr('href')) 
go.attr('href','javascript:void(0);'); 
$('#Firefoxapp').AeroWindow({ 
WindowTitle: '向晚的'+go.attr('class'), 
WindowPositionTop: 'center', 
WindowPositionLeft: 'center', 
WindowWidth: 1000, 
WindowHeight: 500, 
WindowAnimation: 'easeOutCubic' 
}); 
$('html,body').animate({scrollTop: '0px'}, 300); 
return false; 
}); 
}); 
//弹出窗口容器 
<DIV id=Firefoxapp style="DISPLAY: none"> 
<iframe style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" id="mywindows" height="99.5%" src="" frameborder="0" width="100%"></iframe> 
<DIV id=iframeHelper></DIV> 
</DIV>

需要的朋友可以参考下。
Javascript 相关文章推荐
Javascript中的五种数据类型详解
Dec 26 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
JS实现获取图片大小和预览的方法完整实例【兼容IE和其它浏览器】
Apr 24 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
jquery控制listbox中项的移动并排序的实现代码
Sep 28 #Javascript
JQuery UI DatePicker中z-index默认为1的解决办法
Sep 28 #Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 #Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 #Javascript
封装的原生javascript弹出层代码
Sep 24 #Javascript
js最简单的拖拽效果实现代码
Sep 24 #Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 #Javascript
You might like
帅气的琦玉老师
2020/03/02 日漫
PHP生成静态页
2006/11/25 PHP
php 字符转义 注意事项
2009/05/27 PHP
说说PHP的autoLoad自动加载机制
2012/09/27 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
PHP+JQuery+Ajax实现分页方法详解
2016/08/06 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
Yii框架数据模型的验证规则rules()被执行的方法
2016/12/02 PHP
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
2011/05/25 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
js修改onclick动作的四种方法(推荐)
2016/08/18 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
Python selenium如何设置等待时间
2016/09/15 Python
python入门教程之识别验证码
2017/03/04 Python
pandas按若干个列的组合条件筛选数据的方法
2018/04/11 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
Python实现的读写json文件功能示例
2018/06/05 Python
对Python闭包与延迟绑定的方法详解
2019/01/07 Python
对pandas处理json数据的方法详解
2019/02/08 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
鼓励运动员的广播稿
2014/02/08 职场文书
客户接待方案
2014/02/26 职场文书
动员大会主持词
2014/03/20 职场文书
部门年终奖分配方案
2014/05/07 职场文书
大学生应聘求职信
2014/05/26 职场文书
模特大赛策划方案
2014/05/28 职场文书
学习型党组织心得体会
2014/09/12 职场文书
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA
python中 Flask Web 表单的使用方法
2022/05/20 Python