作家
登录

AeroWindow 基于JQuery的弹出窗口插件

作者: 来源:www.28hudong.com 2013-03-30 00:51:10 阅读 我要评论

可以一个页面中创建多个弹出窗,被选中的弹出窗会加亮显示,在同一网页中可以有多个弹出窗口,也可以通过双击窗口实现最大化,跟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

  推荐阅读

  读jQuery之八 包装事件对象

比如,停止事件冒泡IE用 cancelBubble ,标准浏览器则用 stopPropagation 。 获取事件源对象,IE用 srcElement ,标准浏览器则用 target 诸如此类。 jQuery 对原生事件对象的修复和包装主要使用 jQuery.Event 类和>>>详细阅读


本文标题:AeroWindow 基于JQuery的弹出窗口插件

地址:http://www.17bianji.com/kaifa2/JS/24503.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)