今天介绍的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;
});
});
//弹出窗口容器
需要的朋友可以参考下。