大家经常在网上看到弹出层,不仅效果很炫而且用户体验度很好!artDialog就是实现弹出框功能的一款国产的优秀插件,基于js编写的。
先来看下面几个弹出层效果:
怎么样,效果不错吧!
artDialog下载地址为:http://code.google.com/p/artdialog/downloads/list,已经到5.0版本了。
artDialog开发者博客:www.planeart.cn(本人看了,很干净的一个博客,不愧是搞前端的人!)
artDialog界面友好,并且兼容各个浏览器,自身功能非常强大。可以不需要jquery库就能应用。
下载的文件里面包含使用教程,那就来看看是怎么应用这款插件的吧!
js教程如下:
(1).首先当然是引入样式和脚本文件了,
<link href="./artDialog/skins/chrome.css" rel="stylesheet" />
<script src="./artDialog/artDialog.min.js"></script>
(2).进行调用。
(I)使用参数调用
art.dialog(content, [ok], [cancel])
js代码:
以上js实例运行结果:
(II)字面量进行传值。
art.dialog(Object)
js代码:
以上js实例运行结果:
artDialog参数说明:
内容设置:
title是弹出层的标题,
content是弹出层的内容
按钮设置:
ok,cancel 回调函数 this 指向 art.dialog 对象,执行完毕默认关闭对话框
okValue确定按钮文本
cancelValue取消按钮文本
button(自定义按钮)
{按钮参数:value按钮显示文本
callback(可选) 按钮点击后的回调函数。回调函数 this 指向 art.dialog 对象,执行完毕默认关闭对话框,若返回 false 则阻止关闭
focus(默认值: true) 是否聚焦
width(可选) 设置按钮 CSS width 值
disabled(默认值: false) 是否禁用
id(默认值: 与 value 一致) 唯一标识}
尺寸设置:
width:对话框的宽度
height:对话框的高度
位置设置:
fixed:固定定位,不受滚动条的影响
follow:让对话框在指定元素附近
视觉设置:
lock:是否锁屏遮罩
padding:置消息内容与消息容器的填充边距
其他高级设置:
id设定对话框唯一标识。
initialize对话框初始化完成后执行的函数
beforeunload对话框关闭前执行的函数
visible(默认值: true) 是否显示对话框
time设置对话框显示时间,超过时间自动关闭 (单位:毫秒)
esc(默认值: false) 是否允许用户按 Esc 键关闭对话框
focus(默认值: true) 是否支持对话框按钮自动聚焦
接口
art.dialog.get(id)根据 id 获取 art.dialog 对象。注意:这是一个静态方法
closed对话框是否已经关闭。注意:这是一个属性,对话框若关闭其值为 true
close()关闭对话框
visible()把隐藏的对话框显示
hidden()隐藏对话框
title(value)设置对话框标题
content(value)设置消息内容
button(button, [button], ..)添加或者修改一个或者多个按钮
follow(element)让对话框依附在指定元素附近
size(width, height)指定对话框内容尺寸
lock()开启锁屏遮罩
unlock()关闭锁屏遮罩
time(value)设置对话框显示时间,超过时间自动关闭 (单位:毫秒)