基于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 04 Javascript
javascript 有用的脚本函数
May 07 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
Jun 21 Javascript
js日期时间补零的小例子
Mar 05 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
js获取Get值的方法
Sep 29 Javascript
JavaScript原型继承_动力节点Java学院整理
Jun 30 Javascript
前端开发不得不知的10个最佳ES6特性
Aug 30 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
React Native 截屏组件的示例代码
Dec 06 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访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
PHP读取CSV大文件导入数据库的实例
2017/07/24 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
2015/02/28 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
JS表格组件神器bootstrap table详解(强化版)
2016/05/26 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
举例讲解Python面向对象编程中类的继承
2016/06/17 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
Django开发中的日志输出的方法
2018/07/02 Python
pyqt 实现为长内容添加滑轮 scrollArea
2019/06/19 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
Footshop法国:购买运动鞋
2020/01/19 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
工商企业管理实习自我鉴定
2013/12/04 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
逃课上网检讨书
2014/02/20 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
采购部年度工作总结
2015/08/13 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python