基于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做拖动布局的思路
May 31 Javascript
一句话JavaScript表单验证代码
Aug 02 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
JQuery表格内容过滤的实现方法
Jul 05 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 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
Access数据库导入Mysql的方法之一
2006/10/09 PHP
php教程 插件机制在PHP中实现方案
2012/11/02 PHP
解析PHP中数组元素升序、降序以及重新排序的函数
2013/06/20 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
详解node如何让一个端口同时支持https与http
2017/07/04 Javascript
vue增删改查的简单操作
2017/07/15 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
2019/04/17 Javascript
基于vue实现图片验证码倒计时60s功能
2019/12/10 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
[01:05:00]2018国际邀请赛 表演赛 Pain vs OpenAI
2018/08/24 DOTA
python中xrange用法分析
2015/04/15 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
VTK与Python实现机械臂三维模型可视化详解
2017/12/13 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
服务行业个人求职的自我评价
2013/12/12 职场文书
心理健康教育心得体会
2013/12/29 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
师范大学生求职信
2014/06/13 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
浅谈Redis的事件驱动模型
2022/05/30 Redis