AeroWindow 基於JQuery的快顯視窗外掛程式

來源:互聯網
上載者:User

可以一個頁面中建立多個彈出窗,被選中的彈出窗會加亮顯示,在同一網頁中可以有多個快顯視窗,也可以通過雙擊視窗實現最大化,跟windows像極了。如果想要做一個類似作業系統的頁面,用這個外掛程式是完全可以實現的。相容多種主流瀏覽器。

最基礎的調用方法:
複製代碼 代碼如下:$('#YourContainerDiv').AeroWindow((WindowTitle:'hello world',));
帶全部參數的調用:
複製代碼 代碼如下:
$('#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 href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" 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://www.jb51.net/jiaoben/32239.html

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.