artDialog 弹层

最新推荐文章于 2021-01-08 09:26:45 发布

happyzwh

最新推荐文章于 2021-01-08 09:26:45 发布

阅读量1.2k

点赞数

分类专栏：学习交流文章标签： JavaScript

本文链接：https://blog.csdn.net/happyzwh/article/details/10096921

版权

学习交流专栏收录该内容

50 篇文章 0 订阅

订阅专栏

大家经常在网上看到弹出层，不仅效果很炫而且用户体验度很好！artDialog就是实现弹出框功能的一款国产的优秀插件，基于js编写的。

先来看下面几个弹出层效果：

怎么样，效果不错吧！

artDialog下载地址为：http://code.google.com/p/artdialog/downloads/list，已经到5.0版本了。

artDialog开发者博客：www.planeart.cn（本人看了，很干净的一个博客，不愧是搞前端的人！）

artDialog界面友好，并且兼容各个浏览器，自身功能非常强大。可以不需要jquery库就能应用。

下载的文件里面包含使用教程，那就来看看是怎么应用这款插件的吧！

js教程如下：

(1).首先当然是引入样式和脚本文件了，

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

基本就这么多了，详细用法可以参考教程！

happyzwh

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
artDialog 弹层

大家经常在网上看到弹出层，不仅效果很炫而且用户体验度很好！artDialog就是实现弹出框功能的一款国产的优秀插件，基于js编写的。先来看下面几个弹出层效果：怎么样，效果不错吧！artDialog下载地址为：http://code.google.com/p/artdialog/downloads/list，已经到5.0版本了。artDialog开发者博客：www.plane
复制链接

扫一扫