今天介紹的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>
需要的朋友可以參考下。