基于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判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
js函数的引用, 关于内存的开销
Sep 17 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
May 02 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
Feb 16 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
Aug 25 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
php 解压zip压缩包内容到指定目录的实例
Jan 23 Javascript
vue项目引入字体.ttf的方法
Sep 28 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 url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
2009/12/15 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
Javascript之面向对象--方法
2016/12/02 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
微信小程序列表时间戳转换实现过程解析
2019/10/12 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
Vue2.0 ES6语法降级ES5的操作
2020/10/30 Javascript
[01:17]炒鸡美酒第四天TA暴走
2018/06/05 DOTA
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python中删除某个元素的方法解析
2019/11/05 Python
解决Numpy中sum函数求和结果维度的问题
2019/12/06 Python
python实现KNN近邻算法
2020/12/30 Python
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
甲方资料员岗位职责
2013/12/13 职场文书
教师辞职报告范文
2014/01/20 职场文书
中介业务员岗位职责
2014/04/09 职场文书
课外活动实习计划
2015/01/19 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android