artDialog v7使用说明及API文档

教程分享

>

Java教程

(4030)

2023-03-28 11:29:14

artDialog具有bootstrap风格的弹窗组件

首页 > 文档与示例

artDialog —— 经典、优雅的网页对话框控件。

支持普通与 12 方向气泡状对话框

完善的焦点处理，自动焦点附加与回退

支持 ARIA 标准

面向未来：基于 HTML5 Dialog 的 API

支持标准与模态对话框

丰富且友好的编程接口

能自适应内容尺寸

引入 artDialog

1.直接引用

2.作为 Webpack、RequireJS 或 SeaJS 的模块引入

使用 Npm 安装 art-dialog

npm install --save-dev art-dialog

var dialog = require('art-dialog');

**注意：**内部依赖全局模块require('jquery')，请注意全局模块配置是否正确

如果需要支持 iframe 内容与拖拽，请引用加强版 dialog-plus.js

jquery 最低要求版本为1.7+

快速参考

普通对话框

var d = dialog({

title: '欢迎',

content: '欢迎使用 artDialog 对话框组件！'

});

d.show();

运行

模态对话框

var d = dialog({

title: 'message',

content: ''

});

d.showModal();

运行

气泡浮层

var d = dialog({

content: 'Hello World!',

quickClose: true// 点击空白处快速关闭

});

d.show(document.getElementById('quickref-bubble'));

运行

12 个方向定位演示

添加按钮

1.确定与取消按钮：

var d = dialog({

title: '提示',

content: '按钮回调函数返回 false 则不许关闭',

okValue: '确定',

ok: function () {

this.title('提交中…');

return false;

},

cancelValue: '取消',

cancel: function () {}

});

d.show();

运行

2.指定更多按钮：

请参考 button 方法或参数。

控制对话框关闭

var d = dialog({

content: '对话框将在两秒内关闭'

});

d.show();

setTimeout(function () {

d.close().remove();

}, 2000);

运行

给对话框左下角添加复选框

var d = dialog({

title: '欢迎',

content: '欢迎使用 artDialog 对话框组件！',

ok: function () {},

statusbar: ''

});

d.show();

运行

点按钮不关闭对话框

按钮事件返回 false 则不会触发关闭。

var d = dialog({

title: '欢迎',

content: '欢迎使用 artDialog 对话框组件！',

ok: function () {

var that = this;

this.title('正在提交..');

setTimeout(function () {

that.close().remove();

}, 2000);

return false;

},

cancel: function () {

alert('不许关闭');

return false;

}

});

d.show();

运行

不显示关闭按钮

var d = dialog({

title: '欢迎',

content: '欢迎使用 artDialog 对话框组件！',

cancel: false,

ok: function () {}

});

d.show();

运行

创建 iframe 内容

artDialog 提供了一个增强版用来支持复杂的 iframe 套嵌的页面，可以在顶层页面创建一个可供 iframe 访问的对话框创建方法，例如：

require(['art-dialog/dist/dialog-plus'], function (dialog) {

window.dialog = dialog;

});

然后子页面就可以通过top.dialog控制对话框了。

打开示例页面

小提示：增强版的选项比标准版多了url、oniframeload这几个字段。

方法

若无特别说明，方法均支持链式调用。

show([anchor])

显示对话框。

默认居中显示，支持传入元素节点或者事件对象。

参数类型为HTMLElement：可吸附到元素上，同时对话框将呈现气泡样式。

参数类型为Event Object：根据event.pageX与event.pageY定位。

示例

var d = dialog();

d.content('hello world');

d.show(document.getElementById('api-show'));

运行

var d = dialog({

id: 'api-show-dialog',

quickClose: true,

content: '右键菜单'

});

$(document).on('contextmenu', function (event) {

d.show(event);

return d.destroyed;

});

运行

showModal([anchor])

显示一个模态对话框。

其余特性与参数可参见show([anchor])方法。

示例

var d = dialog({

title: 'message',

content: ''

});

d.showModal();

运行

close([result])

关闭（隐藏）对话框。

可接收一个返回值，可以参见 returnValue。

注意：close()方法只隐藏对话框，不会在 DOM 中删除，删除请使用remove()方法。

remove()

销毁对话框。

注意：不同于close([result])方法，remove()方法会从 DOM 中移出对话框相关节点，销毁后的对话框无法再次使用。

对话框按钮点击后默认会依次触发 close()、remove() 方法。如果想手动控制对话框关闭可以如下操作：

var d = dialog();

// [..]

d.close().remove();

运行

content(html)

写入对话框内容。

html参数支持String、HTMLElement类型。

示例

传入字符串：

var d = dialog();

d.content('hello world');

d.show();

运行

传入元素节点：

var elem = document.getElementById('test');

dialog({

content: elem,

id: 'EF893L'

}).show();

v6.0.4 更新：隐藏元素将会自动显示，并且对话框卸载的时候会放回到body中

title(text)

写入对话框标题。

示例

var d = dialog();

d.title('hello world');

d.show();

运行

width(value)

设置对话框宽度。

示例

dialog({

content: 'hello world'

})

.width(320)

.show();

运行

height(value)

设置对话框高度。

示例

dialog({

content: 'hello world'

})

.height(320)

.show();

运行

reset()

手动刷新对话框位置。

通常动态改变了内容尺寸后需要刷新对话框位置。

button(args)

自定义按钮。

参数请参考 选项button；同时支持传入 HTML 字符串填充按钮区域。

focus()

聚焦对话框（置顶）。

blur()

让对话框失去焦点。

addEventListener(type, callback)

添加事件。

支持的事件有：show、close、beforeremove、remove、reset、focus、blur

removeEventListener(type, callback)

删除事件。

dialog.get(id)

根据获取打开的对话框实例。

注意：这是一个静态方法。

dialog.getCurrent()

获取当前（置顶）对话框实例。

注意：这是一个静态方法。

配置参数

content

设置消息内容。

类型

String, HTMLElement

示例

传入字符串：

dialog({

content: 'hello world!'

}).show();

运行

传入元素节点：

var elem = document.getElementById('test');

dialog({

content: elem,

id: 'EF893L'

}).show();

title

标题内容。

类型

String

示例

dialog({

title: 'hello world!'

}).show();

运行

statusbar

状态栏区域 HTML 代码。

可以实现类似“不再提示”的复选框。注意：必须有按钮才会显示。

类型

String

示例

var d = dialog({

title: '欢迎',

content: '欢迎使用 artDialog 对话框组件！',

ok: function () {},

statusbar: ''

});

d.show();

运行

ok

确定按钮。

回调函数this指向dialog对象，执行完毕默认关闭对话框，若返回 false 则阻止关闭。

类型

Function

示例

dialog({

ok: function () {

this

.title('消息')

.content('hello world!')

.width(130);

return false;

}

}).show();

运行

okValue

(默认值: "ok") 确定按钮文本。

类型

String

示例

dialog({

okValue: '猛击我',

ok: function () {

this.content('hello world!');

return false;

}

}).show();

运行

cancel

取消按钮。

取消按钮也等同于标题栏的关闭按钮，若值为false则不显示关闭按钮。回调函数this指向dialog对象，执行完毕默认关闭对话框，若返回false则阻止关闭。

类型

Function, Boolean

示例

dialog({

title: '消息',

ok: function () {},

cancel: function () {

alert('取消');

}

}).show();

运行

dialog({

title: '消息',

content: '不显示关闭按钮',

ok: function () {},

cancel: false

}).show();

运行

cancelValue

(默认值: "cancel") 取消按钮文本。

类型

String

示例

dialog({

cancelValue: '取消我',

cancel: function () {

alert('关闭');

}

}).show();

运行

cancelDisplay

(默认值: true) 是否显示取消按钮。

类型

Boolean

示例

dialog({

title: '提示',

content: '这是一个禁止关闭的对话框，并且没有取消按钮',

cancel: function () {

alert('禁止关闭');

return false;

},

cancelDisplay: false

}).show();

运行

button

自定义按钮组。

类型

Array

选项

名称

类型

描述

value

String

按钮显示文本

callback

Function

(可选) 回调函数this指向dialog对象，执行完毕默认关闭与销毁对话框（依次执行close()与remove()），若返回false则阻止关闭与销毁

autofocus

Boolean

(默认值:false) 是否自动聚焦

disabled

Boolean

(默认值: false) 是否禁用

示例

dialog({

button: [

{

value: '同意',

callback: function () {

this

.content('你同意了');

return false;

},

autofocus: true

},

{

value: '不同意',

callback: function () {

alert('你不同意')

}

},

{

id: 'button-disabled',

value: '无效按钮',

disabled: true

},

{

value: '关闭我'

}

]

}).show();

运行

width

设置对话框 内容 宽度。

类型

String, Number

示例

dialog({

width: 460

}).show();

运行

dialog({

width: '20em'

}).show();

运行

height

设置对话框 内容 高度。

类型

String, Number

示例

dialog({

height: 460

}).show();

运行

dialog({

height: '20em'

}).show();

运行

skin

设置对话框额外的className参数。

多个className请使用空格隔开。

类型

String

示例

dialog({

skin: 'min-dialog tips'

}).show();

padding

(默认值: 继承 css 文件设置) 设置消息内容与消息容器的填充边距，即 style padding属性

类型

String

示例

dialog({

content: 'hello world',

padding: 0

}).show();

运行

fixed

(默认值: false) 开启固定定位。

固定定位是 css2.1 position的一个属性，它能固定在浏览器某个地方，也不受滚动条拖动影响。IE6 与部分移动浏览器对其支持不好，内部会转成绝对定位。

类型

Boolean

示例

dialog({

fixed: true,

title: '消息',

content: '请拖动滚动条查看'

}).show();

运行

align

(默认值: "bottom left") 设置对话框与其他元素的对齐方式。

如果show(elem)与showModal(elem)传入元素，align参数方可生效，支持如下对齐方式：

"top left"

"top"

"top right"

"right top"

"right"

"right bottom"

"bottom right"

"bottom"

"bottom left"

"left bottom"

"left"

"left top"

类型

String

示例

var d = dialog({

align: 'left',

content: 'Hello World!',

quickClose: true

});

d.show(document.getElementById('option-align'));

运行

12 个方向定位演示

autofocus

(默认值: true) 是否支持自动聚焦。

类型

Boolean

quickClose

(默认值: false) 是否点击空白出快速关闭。

类型

Boolean

示例

var d = dialog({

content: '点击空白处快速关闭',

quickClose: true

});

d.show(document.getElementById('option-quickClose'));

运行

zIndex

(默认值: 1024) 重置全局zIndex初始值，用来改变对话框叠加高度。

比如有时候配合外部浮动层 UI 组件，但是它们可能默认zIndex没有对话框高，导致无法浮动到对话框之上，这个时候你就可以给对话框指定一个较小的zIndex值。

请注意这是一个会影响到全局的配置，后续出现的对话框叠加高度将重新按此累加。

类型

Number

示例

dialog({

zIndex: 87

}).show();

运行

onshow

对话框打开的事件。

回调函数this指向dialog对象。

类型

Function

示例

var d = dialog({

content: 'loading..',

onshow: function () {

this.content('dialog ready');

}

});

d.show();

运行

onclose

对话框关闭后执行的事件。

回调函数this指向dialog对象。

类型

Function

示例

var d = dialog({

onclose: function () {

alert('对话框已经关闭');

},

ok: function () {}

});

d.show();

运行

onbeforeremove

对话框销毁之前事件。

回调函数this指向dialog对象。

类型

Function

onremove

对话框销毁事件。

回调函数this指向dialog对象。

类型

Function

示例

var d = dialog({

onclose: function () {

alert('对话框已经关闭');

},

onremove: function () {

alert('对话框已经销毁');

},

ok: function () {}

});

d.show();

运行

onfocus

对话框获取焦点事件。

回调函数this指向dialog对象。

类型

Function

onblur

对话框失去焦点事件。

回调函数this指向dialog对象。

类型

Function

onreset

对话框位置重置事件。

回调函数this指向dialog对象。

类型

Function

id

设定对话框唯一标识。

可防止重复 ID 对话框弹出。

支持使用dialog.get(id)获取某个对话框的接口。

类型

String

示例

dialog({

id: 'id-demo',

content: '再次点击运行看看'

}).show();

dialog.get('id-demo').title('8888888888');

运行

属性

open

判断对话框是否被打开。

returnValue

对话框返回值。

示例

var d = dialog({

title: '消息',

content: '',

ok: function () {

var value = $('#property-returnValue-demo').val();

this.close(value);

this.remove();

}

});

d.addEventListener('close', function () {

alert(this.returnValue);

});

d.show();

运行

artDialog

JavaScript对话框

https://www.leftso.com/article/210.html