当前位置：Gxlcms > JavaScript > 基于Jquery的仿WindowsAero弹出窗(漂亮的关闭按钮)_jquery

基于Jquery的仿WindowsAero弹出窗(漂亮的关闭按钮)_jquery

时间：2021-07-01 10:21:17 帮助过：22人阅读

今天介绍的Jquery Dialog Plugins AeroWindow ，是其中最个性的一款，因为他拥有神似Windows 7 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; 
}); 
}); 
//弹出窗口容器 

需要的朋友可以参考下。

基于Jquery的仿WindowsAero弹出窗(漂亮的关闭按钮)_jquery

人气教程排行