基于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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
原生javascript图片自动或手动切换示例附演示源码
Sep 04 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
Javascript中的异步编程规范Promises/A详细介绍
Jun 06 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
Jul 25 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
vue实现员工信息录入功能
Jun 11 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
DC动画电影《黑暗正义联盟》曝预告 5月5日上线数字平台
2020/04/09 欧美动漫
php静态文件生成类实例分析
2015/01/03 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
解决laravel session失效的问题
2019/10/14 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
详解RequireJS按需加载样式文件
2017/04/12 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
webstorm添加*.vue文件支持
2018/05/08 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
JS数组实现分类统计实例代码
2018/09/30 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
uniapp与webview之间的相互传值的实现
2020/06/29 Javascript
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Python面向对象之类的定义与继承用法示例
2019/01/14 Python
详解Python time库的使用
2019/10/10 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
精彩广告词大全
2014/03/19 职场文书
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers
Python采集股票数据并制作可视化柱状图
2022/04/04 Python
部分武汉产收音机展览
2022/04/07 无线电
深入理解pytorch库的dockerfile
2022/06/10 Python