基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)

今天介绍的Jquery Dialog Plugins AeroWindow ,是其中最个性的一款,因为他拥有神似Windows 7 Aero效果的肉身。

效果图:

演示:

官方演示 本地演示

特点
独特: 窗口移动时标题栏反光效果
窗口按钮:最小化,减少,最大化和关闭
双击窗口标题栏最大化,缩小
活动窗口突出显示
更改窗口大小(resize)
鼠标拖拽窗口
N多个配置选项
配置选项
窗口标题
窗口的起始位置的X / Y
窗口大小
最小的窗口大小
打开窗口的可用状态(最小化,最大化,正常)
窗口动画(30个不同的绚丽效果)
窗口可用函数,鼠标事件和JavaScript调用
在下面的兼容性测试浏览器
Internet Explorer 6
Internet Explorer 7
Internet Explorer 8
火狐3
谷歌浏览器4
苹果Safari 4
Opara10
使用起来是非常简单滴
来吧 让你现有的网站窗口以Windows Aero效果展现。

最简单的使用方法:


代码如下:

$('#YourContainerDiv').AeroWindow({
WindowTitle: 'My first very cool Aero Window for Web',
});

自定义配置:


代码如下:

$('#YourContainerDiv').AeroWindow({
WindowTitle: 'My first cool Aero Window for Web',
WindowPositionTop: 'center',
WindowPositionLeft: 'center',
WindowWidth: 600,
WindowHeight: 400,
WindowMinWidth: 100,
WindowMinHeight: 100,
WindowAnimationSpeed: 500,
WindowAnimation: 'easeOutCubic',//窗口打开时的动画效果
WindowResizable: true,
WindowDraggable: true,
WindowMinimize: true,
WindowMaximize: false,
WindowClosable: true
});

包含所有必要的文件和演示文件。这个版本基于jQuery(v1.4.2)

官方下载地址: » AeroWindow(v3.5)
本站下载地址: AeroWindow 基于jquery的仿Windows Aero弹出窗
另附上生活流 页面的关于使用AeroWindow插件的代码


代码如下:

//javascript脚本
$(document).ready(function() {
$('#profilactic a').click(function() {
var go=$(this);
$('#mywindows').attr('src',go.attr('href'))
go.attr('href','javascript:void(0);');
$('#Firefoxapp').AeroWindow({
WindowTitle: '向晚的'+go.attr('class'),
WindowPositionTop: 'center',
WindowPositionLeft: 'center',
WindowWidth: 1000,
WindowHeight: 500,
WindowAnimation: 'easeOutCubic'
});
$('html,body').animate({scrollTop: '0px'}, 300);
return false;
});
});
//弹出窗口容器
<DIV id=Firefoxapp style="DISPLAY: none">
<iframe style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" id="mywindows" height="99.5%" src="" frameborder="0" width="100%"></iframe>
<DIV id=iframeHelper></DIV>
</DIV>

需要的朋友可以参考下。

(0)

相关推荐

  • JQuery扩展插件Validate 5添加自定义验证方法

    示例如下: 复制代码 代码如下: <script type="text/javascript"> jQuery.validator.addMethod("regex", //addMethod第1个参数:方法名称 function(value, element, params) { //addMethod第2个参数:验证方法,参数(被验证元素的值,被验证元素,参数) var exp = new RegExp(params); //实例化正则对象,参数为传

  • jquery $(document).ready() 与window.onload的区别

    1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.         $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕. 2.编写个数不同 window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个          $(document).ready()可以同时编写多个,并且都可以得到执行 3.简化写法 window.onload没有简化写法          $(documen

  • jquery自定义插件开发之window的实现过程

    本例子实现弹窗的效果:如果亲感觉效果还不错,请继续往下阅读. 1.jquery.show.js /* * 开发者:lzugis * 开发时间:2014年6月10日 * 实现功能:点击在鼠标位置显示div * 版本序号:1.0 */ (function($){ $.fn.showDIV = function(options){ var defaults = {}; var options = $.extend(defaults, options); var showdiv=$(this); var

  • jquery中的$(document).ready()与window.onload的区别

    所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>"; } 解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQu

  • 用Jquery重写windows.alert方法实现思路

    已经在 IE8 , firefox3.0.11下面测试通过 复制代码 代码如下: $.extend({ includePath: '', include: function(file) { var files = typeof file == "string" ? [file] : file; for (var i = 0; i < files.length; i++) { var name = files[i].replace(/^\s|\s$/g, "")

  • jQuery实现的一个自定义Placeholder属性插件

    HTML5中文本框的新属性placeholder是个非常好用的属性,但是IE系列直至IE9都不支持这一属性,这就让大家在用这一属性的时候有些犹豫不决.自己曾经写过很多类似共的小控件,但是都不是很通用,这里分享一个渐进增强的自定义placeholder的jQuery插件.有点是使用简单,大家也可以根据自己的需要进行改进.平常写jQuery插件比较少,考虑到用jQuery的同学比较多,这里就用jQuery插件的形式编写了. 在这里简单的介绍一下实现思路. 1.表现与html5原生的placehold

  • jQuery创建自己的插件(自定义插件)的方法

    但必须知道,这些插件不是自己凭空产生的,它们是由开发人员编写.测试并完善的,这些人员为 jQuery 社区奉献了自己的业余时间.我们做这些都是免费的,是出于对自己代码的热爱.本文主要关注您如何回报这个伟大的社区,即如何编写自己的插件并上传到 jQuery 的插件页面.这可以让所有人使用您创建的插件,可以让整个 jQuery 开发社区变得更好.今年您也做出自己的贡献吧. 在编写本文中的插件时,我发现插件的创建过程以及用来创建它的框架非常简单明了.困难的地方在于想一些其他人还没有做过的事情,并编写一

  • 使用jQuery.fn自定义jQuery翻页插件

    第一次写jQuery插件.自己感觉写的也不怎么样.写jQuery插件利用的就是这个东东 jQuery.fn,例如 复制代码 代码如下: jQuery.fn.pluginName=function(){}; 这个是我写的分页插件的样子 插件通过一个外放的函数来进行翻页操作,无论是点击前进.后退.还是改变页面大小,都会调用该函数. 先看看插件的代码结构 复制代码 代码如下: (function ($) { //存放插件所需的属性字段 var PagerFields = { }; //插件的私有函数

  • jQuery中使用了document和window哪些属性和方法小结

    document.activeElement获取文档当前获得焦点的元素 document.head在jQuery中使用方式如下document.head || document.getElementsByTagName( "head" )[0] ,可见并非所有浏览器支持 document.body获得当前文档的HTMLBodyElement元素 document.compatMode 获取当前文档的渲染方式.返回值:BackCompat(怪癖模式)和CSS1Compat(标准模式).

  • 自定义一个jquery插件[鼠标悬浮时候 出现说明label]

    最近在学习jquery,看了几天,决定做个小东西练练手.入门级的可以看看. 先看下面这个小东西有什么功能,有模有用. 功能:当你鼠标悬浮在你的html元素上面的时候,它会显示一个help说明性的label. 效果图: 原始: 当你的鼠标悬浮在'单击我吧1'时: 当你的鼠标悬浮在'textbox'时: 看了效果图,若是有兴趣的话,仔细看看代码吧,代码有注释 html 代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup=&quo

  • 增强用户体验友好性之jquery easyui window 窗口关闭时的提示

    我的弹窗是这么写的 复制代码 代码如下: $('#aa').click(function(){ //按钮单击事件 $('#w').window({//窗口初始化 title:'随便点',width:400,height:300,iconCls:'icon_add', //重要的部分 onBeforeClose:function(){ //当面板关闭之前触发的事件 if (confirm('窗口正在关闭,请确认您当前的操作已保存.\n 是否继续关闭窗口?')) { $('#w').window('

  • Jquery插件之打造自定义的select标签

    首先看下效果 复制代码 代码如下: <head> <title></title> <link type="text/css" rel="Stylesheet" href="JQSelect.css" /> <script type="text/javascript" src="jquery-1.2.6.js"></script> <

  • jquery trigger伪造a标签的click事件取代window.open方法

    var ohtml='<div class="friend-dialog tac pt15 pb20">'+ '<div class="f-h32">您已经成功发送好友申请.</div>'+ ' <p class="c999">上传真实头像,好友申请更容易被通过哦,赶紧上传头像吧!</p> '+ '<a href="<%=path%>/teacher/edit

  • jQuery UI插件自定义confirm确认框的方法

    本文实例讲述了jQuery UI插件自定义confirm确认框的方法.分享给大家供大家参考.具体分析如下: 这段代码通过jQuery UI自定义了一个confirm的确认对话框效果,通过html代码自定义对话框的显示界面和外观,可以自定义confirm框的按钮,本例中定义了一个confirm确认按钮和一个cancel取消按钮. html代码 <button id="callConfirm">Confirm!</button> <div id="d

随机推荐