本节介绍dialog组件的参数、方法及事件。
DOM方式初始化dialog的,推荐使用集合属性
data-options
定义参数,如果使用data属性
定义参数,注意转换成对应的名称,参见data属性一节。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
id | string | dialog | [必选] 弹窗的ID,如果指定重复,将覆盖现有的ID相同弹窗。 |
title | string | New Dialog | [可选] 弹窗打开后显示的名称,可从data-title属性获取或直接获取触发DOM的text值。 |
url | string | undefined | [可选] url参数或target参数必选一项 D-Url 请求数据的url,a链接触发时可以将url定义在href属性。 |
type | string | GET | [可选] Http请求方式,可选‘GET/POST’。 |
data | object | {} | [可选] 请求url时,需要发送的data数据。 |
loadingmask | boolean | true | [可选] ajax请求时是否显示数据加载遮罩。 |
width | int | 500 | [可选] 弹窗的宽度。 |
height | int | 300 | [可选] 弹窗的高度。 |
max | boolean | false | [可选] 打开弹窗时直接最大化。 |
mask | boolean | false | [可选] 是否模态窗口。 |
resizable | boolean | true | [可选] 可以调整弹窗的大小。 |
drawable | boolean | true | [可选] 可以拖动弹窗。 |
maxable | boolean | true | [可选] 是否显示最大化按钮。 |
minable | boolean | true | [可选] 是否显示最小化按钮(模态弹窗无效)。 |
target | selector | null | [可选] 从指定的jQuery容器中加载内容到dialog,请为该容器添加属性data-noinit="true" 以阻止容器中的内容提前初始化,为容器添加Class[hide ]以隐藏待加载内容。 |
fresh | boolean | false | [可选] 是否保持该dialog的新生状态,表现在重复打开该dialog时,是否重新载入内容。 |
reloadWarn | string | null | [可选] 当准备在已存在的dialog上加载内容时的确认提示信息。 |
onLoad | function($dialog) | null | [可选] dialog加载完成后的事件回调,回调函数的参数$dialog 为该dialog的jQuery对象。 |
beforeClose | function($dialog) | null | [可选] 返回值: boolean。 dialog关闭前的事件回调,返回true则关闭,返回false不关闭。 |
onClose | function() | null | [可选] dialog关闭后的事件回调。 |
方法名 | 参数类型 | 参数说明 | 描述 |
---|---|---|---|
switchDialog(id) | string | dialog ID | 切换到某个弹窗(模态弹窗无效)。 |
refresh(id) | string | dialog ID | 刷新某个弹窗。 |
reloadFlag(tabids) | string | 一个或多个标签ID,多个ID以, 分隔 |
为某(几)个标签设定重载标记(当切换到该标签时重新载入)。 |
reload(options) | object | 同dialog默认参数 | 重新载入某个弹窗,如果未指定ID,则默认重载入当前弹窗。 |
close(id) | string | dialog ID | 关闭某个弹窗。 |
closeCurrent() | -- | -- | 关闭当前弹窗。 |
事件名称 | 中文说明 | 描述 |
---|---|---|
bjui.beforeLoadDialog | 载入dialog内容前事件 | 监听该事件,可以在载入dialog内容前进行相关操作。 |
bjui.beforeCloseDialog | 关闭dialog前事件 | 监听该事件,可以在关闭dialog前进行相关操作。 |
这样监听dialog的事件:
$(document).on('bjui.beforeLoadDialog', function(e) { var $dialog = $(e.target) // do something... })