一切福田,不離方寸,從心而覓,感無不通。

artDialog文档

artDialog —— 经典的网页对话框组件,内外皆用心雕琢。

  1. 支持普通与 12 方向气泡状对话框
  2. 完善的焦点处理,自动焦点附加与回退
  3. 支持 ARIA 标准
  4. 面向未来:基于 HTML5 Dialog 的 API
  5. 支持标准与模态对话框
  6. 丰富且友好的编程接口
  7. 能自适应内容尺寸
  8. 仅 4kb (gzip)

文档导航

引入 artDialog

1.直接引用

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

注意:内部依赖全局模块require('jquery'),请注意全局模块配置是否正确。seajs加载示例

  • 如果需要支持 iframe 内容与拖拽,请引用加强版 dialog-plus.js
  • jquery 最低要求版本为1.7+

快速参考

普通对话框

模态对话框

气泡浮层

12 个方向定位演示

添加按钮

1.确定与取消按钮:

2.指定更多按钮:

请参考 button 方法或参数。

控制对话框关闭

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

阻止对话框关闭

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

不显示关闭按钮

创建 iframe 内容

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

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

打开示例页面

小提示:增强版的选项比标准版多了urloniframeload这几个字段。

方法

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

show([anchor])

显示对话框。

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

  • 参数类型为HTMLElement:可吸附到元素上,同时对话框将呈现气泡样式。
  • 参数类型为Event Object:根据event.pageXevent.pageY定位。

示例

showModal([anchor])

显示一个模态对话框。

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

示例

close([result])

关闭(隐藏)对话框。

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

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

remove()

销毁对话框。

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

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

content(html)

写入对话框内容。

html参数支持StringHTMLElement类型。

示例

传入字符串:

传入元素节点:

title(text)

写入对话框标题。

示例

width(value)

设置对话框宽度。

示例

height(value)

设置对话框高度。

示例

reset()

手动刷新对话框位置。

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

button(args)

自定义按钮。

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

focus()

聚焦对话框(置顶)。

blur()

让对话框失去焦点。

addEventListener(type, callback)

添加事件。

支持的事件有:showclosebeforeremoveremoveresetfocusblur

removeEventListener(type, callback)

删除事件。

dialog.get(id)

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

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

dialog.getCurrent()

获取当前(置顶)对话框实例。

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

配置参数

content

设置消息内容。

类型

String, HTMLElement

示例

传入字符串:

传入元素节点:

title

标题内容。

类型

String

示例

statusbar

状态栏区域 HTML 代码。

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

类型

String

示例

ok

确定按钮。

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

类型

Function

示例

okValue

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

类型

String

示例

cancel

取消按钮。

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

类型

Function, Boolean

示例

cancelValue

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

类型

String

示例

cancelDisplay

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

类型

Boolean

示例

button

自定义按钮组。

类型

Array

选项

名称 类型 描述
value String 按钮显示文本
callback Function (可选) 回调函数this指向dialog对象,执行完毕默认关闭与销毁对话框(依次执行close()remove()),若返回false则阻止关闭与销毁
autofocus Boolean (默认值:false) 是否自动聚焦
disabled Boolean (默认值: false) 是否禁用

示例

width

设置对话框 内容 宽度。

类型

String, Number

示例

height

设置对话框 内容 高度。

类型

String, Number

示例

skin

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

多个className请使用空格隔开。

类型

String

示例

padding

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

类型

String

示例

fixed

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

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

类型

Boolean

示例

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

示例

12 个方向定位演示

autofocus

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

类型

Boolean

quickClose

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

类型

Boolean

示例

zIndex

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

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

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

类型

Number

示例

onshow

对话框打开的事件。

回调函数this指向dialog对象。

类型

Function

示例

onclose

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

回调函数this指向dialog对象。

类型

Function

示例

onbeforeremove

对话框销毁之前事件。

回调函数this指向dialog对象。

类型

Function

onremove

对话框销毁事件。

回调函数this指向dialog对象。

类型

Function

示例

onfocus

对话框获取焦点事件。

回调函数this指向dialog对象。

类型

Function

onblur

对话框失去焦点事件。

回调函数this指向dialog对象。

类型

Function

onreset

对话框位置重置事件。

回调函数this指向dialog对象。

类型

Function

id

设定对话框唯一标识。

  1. 可防止重复 ID 对话框弹出。
  2. 支持使用dialog.get(id)获取某个对话框的接口。

类型

String

示例

属性

open

判断对话框是否被打开。

returnValue

对话框返回值。

示例

其他

自定义样式

打开配置文件: src/dialog-config.js,其中cssUir字段是 css 文件的路径,innerHTML字段则是 artDialog 的模板。修改这两个字段即可很方便的设计属于自己的皮肤。

一套皮肤可以添加不同的className实现多种状态,可参考 skin 选项。

源码构建

使用GruntJS在 artDialog 源码根目录执行即可。

artDialog v5 升级 v6 参考

https://github.com/aui/artDialog/wiki/artDialog-v5%E5%8D%87%E7%BA%A7v6%E5%8F%82%E8%80%83

支持

artDialog 是基于 LGPL 协议免费开源的程序,问题反馈可在 Github issues 上进行(为了保证效率,请务必描述清楚你的问题,例如包含 artDialog 版本号、浏览器版本等必要信息,有 demo 甚佳。不合格问题将可能会被关闭)。