基于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操作cookie的文章(设置,删除cookies)
Apr 01 Javascript
图片img的src不变让浏览器重新加载实现方法
Mar 29 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
Jquery注册事件实现方法
May 18 Javascript
jQuery遮罩层效果实例分析
Jan 14 Javascript
bootstrap table实例详解
Jan 06 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
Vue.js实现列表清单的操作方法
Nov 15 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
js实现动态增加文件域表单功能
Oct 22 Javascript
如何进行微信公众号开发的本地调试的方法
Jun 16 Javascript
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
ie6 动态缩略图不显示的原因
2009/06/21 PHP
php图片加水印原理(超简单的实例代码)
2013/01/18 PHP
php define的第二个参数使用方法
2013/11/04 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
使用composer命令加载vendor中的第三方类库 的方法
2019/07/09 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
vue二级路由设置方法
2018/02/09 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
2019/12/20 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
使用Node.js和Socket.IO扩展Django的实时处理功能
2015/04/20 Python
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python中常见的异常总结
2018/02/20 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
python实现简单遗传算法
2020/09/18 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
环境工程大学生自荐信
2013/10/21 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
Python如何使用循环结构和分支结构
2022/04/13 Python