基于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 call方法使用说明
Jan 11 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
5秒后跳转到另一个页面的js代码
Oct 12 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
详解如何使用webpack打包Vue工程
May 27 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
js数组实现权重概率分配
Sep 12 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
vue+element_ui上传文件,并传递额外参数操作
Dec 05 Vue.js
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
生成sessionid和随机密码的例子
2006/10/09 PHP
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
text-align:justify实现文本两端对齐 兼容IE
2015/08/19 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
2015/08/25 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
ES2015 Symbol 一种绝不重复的值
2016/12/25 Javascript
简单实现jQuery上传图片显示预览功能
2020/06/29 jQuery
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
vue监听scroll的坑的解决方法
2017/09/07 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
2018/10/08 Javascript
微信小程序实现留言板(Storage)
2018/11/02 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
[49:31]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第二场 1月29日
2021/03/11 DOTA
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
详解python中的json的基本使用方法
2016/12/21 Python
详解python3中socket套接字的编码问题解决
2017/07/01 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
pyqt5中动画的使用详解
2020/04/01 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
Bergfreunde丹麦:登山装备网上零售商
2017/02/26 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
Orlebar Brown官网:设计师泳裤和泳装
2020/12/08 全球购物
初中生三年学习生活的自我评价
2013/11/03 职场文书
校园报刊亭的创业计划书
2014/01/02 职场文书
领导干部对照检查材料
2014/08/24 职场文书
2014年学习部工作总结
2014/11/12 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python