AeroWindow 基于JQuery的彈出窗口插件

更新時間：2011年06月27日 21:24:59 作者：

AeroWindow是個Win7樣式的彈出窗口，jQuery插件，效果很酷!而且還像windows的窗口一樣可最大，最小化，隨意拖動。

可以一個頁面中創(chuàng)建多個彈出窗，被選中的彈出窗會加亮顯示，在同一網頁中可以有多個彈出窗口，也可以通過雙擊窗口實現(xiàn)最大化，跟windows像極了。如果想要做一個類似操作系統(tǒng)的頁面，用這個插件是完全可以實現(xiàn)的。兼容多種主流瀏覽器。

最基礎的調用方法：

復制代碼代碼如下:

$('#YourContainerDiv').AeroWindow((WindowTitle:'hello world',));

帶全部參數(shù)的調用：

復制代碼代碼如下:

 
$('#YourContainerDiv').AeroWindow({ 
WindowTitle: 'My first very cool Aero Window for Web', 
WindowPositionTop: 'center', 
WindowPositionLeft: 'center', 
WindowWidth: 400, 
WindowHeight: 100, 
WindowAnimation: 'easeOutCubic', 
WindowResizable: true, 
WindowDraggable: true, 
WindowMinimize: true, 
WindowMaximize: false, 
WindowClosable: true 
}); 

使用方法：
　　首先加上以下引用：

復制代碼代碼如下:

 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<link  rel="stylesheet" type="text/css"/> 
<link href="css/AeroWindow.css?r=123" rel="stylesheet" type="text/css"/> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js">script> 
<script type="text/javascript" src="js/jquery-ui-1.8.1.custom.min.js">script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js">script> 
<script type="text/javascript" src="js/jquery-AeroWindow.js">script> 

然后在頁面放一個DIV：

復制代碼代碼如下:

 
<div id="Firefoxapp" style="display: none;"> 
<iframe src="http://www.baidu.com/" width="100%" height="100%" style="border: 0px;" frameborder="0"></iframe> 
<div id="iframeHelper"></div> 
</div> 

最后調用并初始化窗體：

復制代碼代碼如下:

 
$(document).ready(function() { 
$('#Firefoxapp').AeroWindow({ 
WindowTitle: '測試', 
WindowWidth: 500, 
WindowHeight: 300, 
WindowMinWidth: 50, 
WindowMinHeight: 10, 
WindowAnimationSpeed: 1000, 
WindowAnimation: 'easeOutCubic', 
WindowStatus: 'maximized', 
WindowResizable: true, 
WindowDraggable: true, 
WindowMinimize: true, 
WindowMaximize: true, 
WindowClosable: true 
}) 
}); 

在線演示： http://demo.jb51.net/js/AeroWindow/index.html
下載地址： http://m.fzitv.net/jiaoben/32239.html

您可能感興趣的文章:

AeroWindow

JQuery給元素添加/刪除節(jié)點比如select
本教程詳細介紹下jQuery添加/刪除Select的Option項，感興趣的各位可以參考下哈
2013-04-04
jQuery 驗證插件 Web前端設計模式(asp.net)
asp.net下用戶注冊頁面的驗證代碼，花了點時間將驗證做成一個jQuery插件，希望對需要的朋友有所幫助。
2010-10-10
jQuery開發(fā)仿QQ版音樂播放器
這篇文章主要介紹了jQuery開發(fā)仿QQ版的音樂播放器，文中示例代碼非常詳細，幫助大家更好的理解和學習，感興趣的朋友可以了解下
2020-07-07
jQuery插件EasyUI實現(xiàn)Layout框架頁面中彈出窗體到最頂層效果(穿越iframe)
這篇文章主要介紹了jQuery插件EasyUI實現(xiàn)Layout框架頁面中彈出窗體到最頂層效果,具有穿越iframe的功能,涉及jQuery的EasyUI插件屬性操作相關技巧,需要的朋友可以參考下
2016-08-08
jquery中map函數(shù)與each函數(shù)的區(qū)別實例介紹
jquery中的each函數(shù)和map函數(shù)的用法看起來差不多，但其實還是有一點區(qū)別的,each返回的是原來的數(shù)組，并不會新創(chuàng)建一個數(shù)組。而map方法會返回一個新的數(shù)組
2014-06-06
淺談jQuery hover(over, out)事件函數(shù)
下面小編就為大家?guī)硪黄獪\談jQuery hover(over, out)事件函數(shù)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦
2016-12-12
jquery手機觸屏滑動拼音字母城市選擇器的實例代碼
下面小編就為大家分享一篇jquery手機觸屏滑動拼音字母城市選擇器的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
推薦9款炫酷的基于jquery的頁面特效
這里給大家推薦9款炫酷的基于jquery的頁面特效，都是本站比較熱門的效果，這里整理出來分享給大家，也方便小伙伴們對比查看
2014-12-12
jQuey將序列化對象在前臺顯示地實現(xiàn)代碼(方法總結)
本文給大家分享jQuey將序列化對象在前臺顯示地的幾種方式，非常不錯，具有參考借鑒價值，需要的朋友一起看看吧
2016-12-12
jQuery實現(xiàn)鼠標經過圖片變亮其他變暗效果
jQuery實現(xiàn)的仿商城圖片變亮變暗效果，鼠標懸停圖片之后該圖片變亮，其他圖片變暗。移開鼠標所有圖片變亮，兼容主流瀏覽器，適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗，有需要的小伙伴可以參考下。
2015-05-05