您的位置：首页 > 其它

artDialog弹出层插件详细教程

2015-12-07 20:05 429 查看

大家经常在网上看到弹出层，不仅效果很炫而且用户体验度很好！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代码：

art.dialog('这是php点点通的教程', function () {alert('你点击确定了')},function(){alert('你点击取消了');});

以上js实例运行结果：

(II)字面量进行传值。

art.dialog(Object)

js代码：

<html>
<head>
<title> jquery </title>
<meta charset="utf-8">
<link href="./artDialog/skins/chrome.css" rel="stylesheet" />
<script src="./artDialog/artDialog.min.js"></script>
<script>
function test(){
art.dialog({
width:300,
height:100,
id: 'shake-demo',
title: '用户注册',
content: '帐号：<input type="text" value="" /><br />'
+ '密码：<input id="login-pw" type="text" value="" />',
lock: true,
fixed: true,
ok: function () {
var pw = document.getElementById('login-pw');
pw.select();
pw.focus();
return false;
},
okValue: '提交',
cancelValue:'取消',
cancel: function () {
alert('取消注册');
}
});
}
</script>
</head>
<body>
<input type="button" value="注册" onclick="test()">
</div>
</body>
</html>

以上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)设置对话框显示时间，超过时间自动关闭 (单位：毫秒)

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航