基于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 相关文章推荐
如何实现浏览器上的右键菜单
Jul 10 Javascript
常用参考资料(手册)下载或者链接
Jul 22 Javascript
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
javascript 简单抽屉效果的实现代码
Mar 09 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
JS获取地址栏参数的小例子
Aug 23 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
canvas绘制一个常用的emoji表情
Mar 30 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
vue接口请求加密实例
Aug 11 Javascript
使用原生javascript开发计算器实例代码
Feb 21 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
不要轻信 PHP_SELF的安全问题
2009/09/05 PHP
php学习笔记之 函数声明
2011/06/09 PHP
PHP中的表达式简述
2016/05/29 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
基于jquery点击自以外任意处,关闭自身的代码
2012/02/10 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
JavaScript 中对象的深拷贝
2016/12/04 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
[02:51]2014DOTA2 TI小组赛总结中国军团全部进军钥匙球馆
2014/07/15 DOTA
Python之pymysql的使用小结
2019/07/01 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
Python面试题集
2012/03/08 面试题
翻译学院毕业生自荐书
2014/02/02 职场文书
农业项目建议书
2014/08/25 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
2015年信贷员工作总结
2015/04/28 职场文书
七一慰问简报
2015/07/20 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
《惊弓之鸟》教学反思
2016/02/20 职场文书
Pandas自定义选项option设置
2021/07/25 Python
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript