快捷導(dǎo)航

基于Jquery的仿Windows Aero彈出窗(漂亮的關(guān)閉按鈕)

更新時(shí)間：2010年09月28日 13:26:54 作者：

目前市面上已經(jīng)有很多成熟好用的jquery彈出窗插件，像模態(tài)窗口插件(Modal Dialog Plugins)以及數(shù)不勝數(shù)的燈箱插件(lightbox plugins)。

今天介紹的Jquery Dialog Plugins AeroWindow ，是其中最個(gè)性的一款，因?yàn)樗麚碛猩袼芖indows 7 Aero效果的肉身。

效果圖:

演示:

官方演示本地演示

特點(diǎn)
獨(dú)特：窗口移動(dòng)時(shí)標(biāo)題欄反光效果
窗口按鈕：最小化，減少，最大化和關(guān)閉
雙擊窗口標(biāo)題欄最大化，縮小
活動(dòng)窗口突出顯示
更改窗口大?。╮esize）
鼠標(biāo)拖拽窗口
N多個(gè)配置選項(xiàng)
配置選項(xiàng)
窗口標(biāo)題
窗口的起始位置的X / Y
窗口大小
最小的窗口大小
打開窗口的可用狀態(tài)（最小化，最大化，正常）
窗口動(dòng)畫（30個(gè)不同的絢麗效果）
窗口可用函數(shù)，鼠標(biāo)事件和JavaScript調(diào)用
在下面的兼容性測(cè)試瀏覽器
Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
火狐3
谷歌瀏覽器4
蘋果Safari 4
Opara10
使用起來(lái)是非常簡(jiǎn)單滴
來(lái)吧讓你現(xiàn)有的網(wǎng)站窗口以Windows Aero效果展現(xiàn)。

最簡(jiǎn)單的使用方法：

復(fù)制代碼代碼如下:

 
$('#YourContainerDiv').AeroWindow({ 
WindowTitle: 'My first very cool Aero Window for Web', 
}); 

自定義配置：

復(fù)制代碼代碼如下:

 
$('#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',//窗口打開時(shí)的動(dòng)畫效果 
WindowResizable: true, 
WindowDraggable: true, 
WindowMinimize: true, 
WindowMaximize: false, 
WindowClosable: true 
}); 

包含所有必要的文件和演示文件。這個(gè)版本基于jQuery(v1.4.2)

官方下載地址： » AeroWindow（v3.5）
本站下載地址： AeroWindow 基于jquery的仿Windows Aero彈出窗

另附上生活流頁(yè)面的關(guān)于使用AeroWindow插件的代碼

復(fù)制代碼代碼如下:

 
//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> 