DIV CSS 佈局教程網

今天介紹的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;
});
});
//彈出窗口容器
<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>

需要的朋友可以參考下。