基於Jquery的仿Windows Aero彈出窗(漂亮的關閉按鈕)

今天介紹的Jquery Dialog Plugins AeroWindow ，是其中最個性的一款，因為他擁有神似Windows 7 Aero效果的肉身。

:

示範:

官方示範 本地示範

特點
獨特： 視窗移動時標題列反光效果
視窗按鈕：最小化，減少，最大化和關閉
雙擊視窗標題列最大化，縮小
使用中視窗反白
更改視窗大小（resize）
滑鼠拖拽視窗
N多個配置選項
配置選項
視窗標題
視窗的起始位置的X / Y
視窗大小
最小的視窗大小
開啟視窗的可用狀態（最小化，最大化，正常）
視窗動畫（30個不同的絢麗效果）
視窗可用函數，滑鼠事件和JavaScript調用
在下面的相容性測試瀏覽器
Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
Firefox3
Google瀏覽器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>

需要的朋友可以參考下。