Jquery实现WIN7-AeroWindow窗口效果插件使用

AeroWindow--JQuery插件
  AeroWindow是个Win7样式的弹出窗口,jQuery插件,效果很酷!而且还像windows的窗口一样可最大,最小化,随意拖动。可以一个页面中创建多个弹出窗,被选中的弹出窗会加亮显示,在同一网页中可以有多个弹出窗口,也可以通过双击窗口实现最大化,跟windows像极了。如果想要做一个类似操作系统的页面,用这个插件是完全可以实现的。兼容多种主流浏览器。


  最基础的调用方法:
view sourceprint?
$('#YourContainerDiv').AeroWindow((WindowTitle:'hello world',));
  带全部参数的调用:
view sourceprint?
$('#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       
});
使用方法:
  首先加上以下引用:
view sourceprint?
<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:
view sourceprint?
<div id="Firefoxapp" style="display: none;">  
<iframe src="http://www.google.com/" width="100%" height="100%" style="border: 0px;" frameborder="0"></iframe>  
<div id="iframeHelper"></div>  
</div>
  最后调用并初始化窗体:
view sourceprint?
$(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
   })           
});
posted @ 2013-05-19 13:27  BicycleBoy  阅读(1422)  评论(0编辑  收藏  举报