Jquery仿Windows Aero弹出窗

目前市面上已经有很多成熟好用的jquery弹出窗插件，像模态窗口插件(Modal Dialog Plugins)以及数不胜数的灯箱插件(lightbox plugins)。

今天介绍的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效果展现。

最简单的使用方法：

view source

print?

1

2	$('#YourContainerDiv').AeroWindow({

3	WindowTitle: 'My first very cool Aero Window for Web',

4

});

自定义配置：

view source

print?

01	$('#YourContainerDiv').AeroWindow({

02	WindowTitle:          'My first cool Aero Window for Web',

03	WindowPositionTop:    'center',

04	WindowPositionLeft:   'center',

05	WindowWidth:          600,

06	WindowHeight:         400,

07	WindowMinWidth:       100,

08	WindowMinHeight:      100,

09	WindowAnimationSpeed: 500,

10	WindowAnimation:      'easeOutCubic',//窗口打开时的动画效果

11	WindowResizable:      true,// http://endless.im

12	WindowDraggable:      true,

13	WindowMinimize:       true,

14	WindowMaximize:       false,

15	WindowClosable:       true

16

});

下载

包含所有必要的文件和演示文件。这个版本基于jQuery(v1.4.2)

官方下载地址： » AeroWindow（v3.5）

本文同时发布在 Jquery仿Windows Aero弹出窗

另附上本博客 » 生活流 页面的关于使用AeroWindow插件的代码

view source

print?

01	//javascript脚本 http://endless.im

02	$(document).ready(function() {

03	$('#profilactic a').click(function() {

04	var go=$(this);

05	$('#mywindows').attr('src',go.attr('href'))

06	go.attr('href','javascript:void(0);');

07	$('#Firefoxapp').AeroWindow({

08	WindowTitle:          '向晚的'+go.attr('class'),

09	WindowPositionTop:    'center',

10	WindowPositionLeft:   'center',

11	WindowWidth:          1000,

12	WindowHeight:         500,

13	WindowAnimation:      'easeOutCubic'

14

});

15	$('html,body').animate({scrollTop: '0px'}, 300);

16	return false;

17

});

18

});

19

//弹出窗口容器

20	<DIV style="DISPLAY: none" id=Firefoxapp>

21	<iframe style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" id="mywindows" height="99.5%" src="http://endless.im" frameborder="0" width="100%"></iframe>

22

23

</DIV>

原文链接： http://endless.im/archives/jquery-window7aero-dialog-plugins.html