zoukankan      html  css  js  c++  java
  • AeroWindowJQuery插件

      AeroWindow是个Win7样式的弹出窗口,jQuery插件,效果很酷!而且还像windows的窗口一样可最大,最小化,随意拖动。可以一个页面中创建多个弹出窗,被选中的弹出窗会加亮显示,在同一网页中可以有多个弹出窗口,也可以通过双击窗口实现最大化,跟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.google.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://www.soyos.net/tl_files/demos/aero-window/
    下载地址:http://www.soyos.net/aerowindow-jquery.html
     

    作者:Crazy Ma
    出处:http://www.cnblogs.com/intcry
    ♪:30%的技术+70%的精神,帮助别人得到他想要的,你就能得到你想要的! ♪

  • 相关阅读:
    经济--股票--深圳指数基金
    经济--年终奖理财攻略
    经济--股票--基金经理打死不肯说的赚钱黑幕
    经济--股票--基金定投
    经济--股票--基金分类的三个角度
    经济学--股票--必胜法则
    经济--降息对股市是好消息还是坏消息?
    PHP数组的排序函数
    使用回调函数处理数组的函数
    统计数组元素的个数和唯一性的函数
  • 原文地址:https://www.cnblogs.com/intcry/p/2091167.html
Copyright © 2011-2022 走看看