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
• 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,// http://endless.im  WindowDraggable:      true,  WindowMinimize:       true,  WindowMaximize:       false,  WindowClosable:       true       });  

下載包含所有必要的檔案和示範檔案。這個版本基於jQuery(v1.4.2)

官方： » AeroWindow（v3.5）

本文同時發布在 Jquery仿Windows Aero彈出窗

另附上本部落格 » 生活流 頁面的關於使用AeroWindow外掛程式的代碼

       //javascript指令碼 http://endless.im       $(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;          });      });//快顯視窗容器          <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>              

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