基于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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
深入认识javascript中的eval函数
Nov 02 Javascript
javascript开发中因空格引发的错误
Nov 08 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
js的一些常用方法小结
Jun 29 Javascript
面向对象Javascript核心支持代码分享
May 23 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
vue-property-decorator用法详解
Dec 12 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 Javascript
关于JavaScript回调函数的深入理解
Jun 27 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
标准版Eclipse搭建PHP环境的详细步骤
2015/11/18 PHP
php注册和登录界面的实现案例(推荐)
2016/10/24 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
2016/10/09 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
2017/09/19 Javascript
vue按需加载组件webpack require.ensure的方法
2017/12/13 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
微信小程序canvas实现签名功能
2021/01/19 Javascript
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
python中的for循环
2018/09/28 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
Python3爬虫里关于识别微博宫格验证码的知识点详解
2020/07/30 Python
基于css3仿造window7的开始菜单
2010/06/17 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
Lampenwelt德国:欧洲领先的灯具和照明在线商店
2018/08/05 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
绿色环保标语
2014/06/12 职场文书
市场营销专业求职信
2014/06/17 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python