AeroWindow 基于JQuery的彈出窗口插件

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

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

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

最基礎(chǔ)的調(diào)用方法：

復(fù)制代碼代碼如下:

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

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

復(fù)制代碼代碼如下:

 
$('#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 
}); 

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

復(fù)制代碼代碼如下:

 
<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> 

然后在頁(yè)面放一個(gè)DIV：

復(fù)制代碼代碼如下:

 
<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> 

最后調(diào)用并初始化窗體：

復(fù)制代碼代碼如下:

 
$(document).ready(function() { 
$('#Firefoxapp').AeroWindow({ 
WindowTitle: '測(cè)試', 
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://www.dhdzp.com/jiaoben/32239.html

您可能感興趣的文章:

AeroWindow

相關(guān)文章

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