基于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 相关文章推荐
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 Javascript
JS实现按比例缩小图片宽高
Aug 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和ACCESS写聊天室(八)
2006/10/09 PHP
php 常用的系统函数
2017/02/07 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
PHP实现文件上传与下载
2020/08/28 PHP
超简单的jquery的AJAX用法
2010/05/10 Javascript
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
基于Javascript实现文件实时加载进度的方法
2016/10/12 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
vue2实现数据请求显示loading图
2017/11/28 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
详解Vue前端生产环境发布配置实战篇
2019/05/07 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
[15:15]教你分分钟做大人:狙击手
2014/10/30 DOTA
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
Python-Flask:动态创建表的示例详解
2019/11/22 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
为有想象力的人提供的生活方式商店:Firebox
2018/06/04 全球购物
数控专业毕业生求职信范文
2013/09/21 职场文书
优秀毕业生推荐信
2013/11/02 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
面试通知单大全
2015/04/20 职场文书
小平小道观后感
2015/06/09 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
浅谈MySQL之select优化方案
2021/08/07 MySQL