基于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 相关文章推荐
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
Mar 16 Javascript
javascript 子窗体父窗体相互传值方法
May 31 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
javascript解析xml实现省市县三级联动的方法
Jul 25 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
全面解析JavaScript Module模式
Jul 24 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 MYSQL中插入当前时间
2008/04/06 PHP
php提示Failed to write session data错误的解决方法
2014/12/17 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
JS画线(实例代码)
2013/11/20 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
详解堆的javascript实现方法
2016/11/29 Javascript
jQuery根据ID、CLASS、等获取对象的实例
2016/12/04 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
Python的垃圾回收机制深入分析
2014/07/16 Python
Python可变参数函数用法实例
2015/07/07 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
python监控文件并且发送告警邮件
2018/06/21 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
Python pandas RFM模型应用实例详解
2019/11/20 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
巴西购物网站:Estrela10
2018/12/13 全球购物
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
汽车检测与维修专业求职信
2013/10/30 职场文书
本科毕业生应聘自荐信范文
2014/06/26 职场文书
html5中sharedWorker实现多页面通信的示例代码
2021/05/07 Javascript
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android