AeroWindow 基于JQuery的彈出窗口插件
更新時間:2011年06月27日 21:24:59 作者:
AeroWindow是個Win7樣式的彈出窗口,jQuery插件,效果很酷!而且還像windows的窗口一樣可最大,最小化,隨意拖動。
可以一個頁面中創(chuàng)建多個彈出窗,被選中的彈出窗會加亮顯示,在同一網(wǎng)頁中可以有多個彈出窗口,也可以通過雙擊窗口實現(xiàn)最大化,跟windows像極了。如果想要做一個類似操作系統(tǒng)的頁面,用這個插件是完全可以實現(xiàn)的。兼容多種主流瀏覽器。

最基礎(chǔ)的調(diào)用方法:
帶全部參數(shù)的調(diào)用:
$('#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>
最后調(diào)用并初始化窗體:
$(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://chabaoo.cn/jiaoben/32239.html

最基礎(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>
然后在頁面放一個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: '測試',
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://chabaoo.cn/jiaoben/32239.html
相關(guān)文章
JQuery實現(xiàn)的購物車功能(可以減少或者添加商品并自動計算價格)
這篇文章主要介紹了JQuery實現(xiàn)的購物車功能(可以減少或者添加商品并自動計算價格),本文的這個模擬實現(xiàn)的購物車難登大雅之堂,但是可以從中得到一些啟發(fā)或者相關(guān)的知識點,需要的朋友可以參考下2015-01-01jQuery獲取訪問者IP地址的方法(基于新浪API與QQ查詢接口)
這篇文章主要介紹了jQuery獲取訪問者IP地址的方法,實例分析了jQuery基于新浪API與QQ查詢接口獲取來訪者IP的相關(guān)參數(shù)傳遞與數(shù)據(jù)處理技巧,需要的朋友可以參考下2016-05-05jQuery zTree 異步加載添加子節(jié)點重復(fù)問題
zTree 是一個依靠 jQuery 實現(xiàn)的多功能 “樹插件”。下面通過本文給大家分享jQuery zTree 異步加載添加子節(jié)點重復(fù)問題,需要的朋友參考下吧2017-11-11jQuery學(xué)習(xí)筆記之jQuery+CSS3的瀏覽器兼容性
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之jQuery+CSS3的瀏覽器兼容性的相關(guān)資料,需要的朋友可以參考下2015-01-01jQuery操作input type=radio的實現(xiàn)代碼
jQuery操作input type=radio的實現(xiàn)代碼,需要的朋友可以參考下2012-06-06