配置参数
- content: {消息内容,支持HTML}
- title: {标题.默认:'提示'}
- lock: {是否锁定屏幕. 默认:false}
- width: {宽度,支持em等单位. 默认:'auto'}
- height: {高度,支持em等单位. 默认:'auto'}
- url: {iframe地址,存在content参数时候,此参数无效}
- x: {x坐标,可以使用关键字,如:left/right/center. 默认:'center'}
- y: {y坐标,可以使用关键字,如:top/bottom/center. 默认:'center'(并非绝对垂直居中，而是使用的黄 金比例)}
- fixed: {是否启用静止定位. 默认:false}
- time: {多少秒自动关闭}
- style: {对话框风格扩展参数,写入自定义className,详情见皮肤css文件的定义,多个用空格隔开}
- yesText: {确定按钮文本. 默认:'确定'}
- noText: {取消按钮文本. 默认:'取消'}
- yesClose: {点击确定按钮是否同时关闭对话框. 默认:true}
- id: {给对话框定义id,对话框未关闭就不再会有同名对话框弹出. 例如定义id为'my2'，则内容容器id为'my2Content'}
形式
artDialog({ 配置参数 }, function(){ 确定按钮回调函数 }, function(){ 取消按钮回调函数 }, function(){ 对话框关闭回调函数 })
如:
artDialog(
{
content:'欢迎你来到对话框世界！',
lock:true,
style:'succeed noClose'
},
function(){
alert('你点了确定');
},
function(){
alert('你点了取消');
}
);弹出页面事例
$.dialog.open('export/packingInfo/list?id=' + id, {
esc : false,
lock : true,
title : 'Carton List - Edit',
width : '900px',
height : '500px',
close : function() {
window.location.reload();
}
});在页面head设置默认配置
$.dialog.open('export/packingInfo/list?id=' + id, {
esc : false,
lock : true,
title : 'Carton List - Edit',
width : '900px',
height : '500px',
close : function() {
window.location.reload();
}
});在js函数里面使用
function test(){
art.dialog({
lock: true,
content: '中断用户在对话框以外的交互，展示重要操作与消息',
yesFn: function(){
art.dialog({content: '再来一个锁屏', lock: true});
return false;
},
noFn: true
}API 文档
| 名称 | 类型 | 默认值 | 描述 |
| 内容 | |||
| title | 字符串 | '提示' | 标题内容。为false不显示标题栏（需要皮肤文件支持） |
| 布尔 | |||
| content | 字符串 | null | 消息内容，如果传入的是一个JSON，还需要与tmpl参数配合解析模板 |
| 对象 | |||
| 按钮 | |||
| yesFn | 函数 | null | 确定按钮回调函数。 函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮；传入的第一个参数为对话框所在页面window对象（这个在穿越框架后有用） |
| 布尔 | |||
| noFn | 函数 | null | 取消按钮回调函数。 函数如果返回false将阻止对话框关闭；函数this指针指向内部api；如果传入true表示只显示有关闭功能的按钮；传入的第一个参数为对话框所在页面window对象（这个在穿越框架后有用） |
| 布尔 | |||
| yesText | 字符串 | '确定' | "确定按钮"文字 |
| noText | 字符串 | '取消' | "取消按钮"文字 |
| 尺寸 | |||
| width | 数值 | 'auto' | 设置内容固定宽度，可以指定单位。没有则对话框自动适配 |
| 字符串 | |||
| height | 数值 | 'auto' | 设置内容固定高度，可以指定单位。没有则对话框自动适配 |
| 字符串 | |||
| 位置 | |||
| fixed | 布尔 | false | 开启静止定位 |
| follow | 元素 | null | 让对话框依附在指定元素附近。如果是字符串则表示使用ID获取元素 |
| 字符串 | |||
| left | 数值 | 'center' | X轴的坐标。如果开启了fixed则原点以浏览器视口为基准。可以使用'left'、'center'、'right'这些关键字 |
| 字符串 | |||
| top | 数值 | 'center' | Y轴的坐标。如果开启了fixed则原点以浏览器视口为基准。可以使用'top'、'center'、'bottom'这些关键字 |
| 字符串 | |||
| 界面 | |||
| lock | 布尔 | false | 开启锁屏。中断用户对话框之外的交互，用于显示非常重要的操作/消息 |
| skin | 字符串 | 'default' | 自定义风格 |
| border | 布尔 | true | 是否显示边框。（需要皮肤文件支持） |
| icon | 字符串 | null | 定义消息图标。（需要皮肤文件支持） |
| 高级 | |||
| id | 字符串 | 自定义对话框ID属性。用途：1、防止重复弹出 2、返回已存在ID对话框的API接口 | |
| time | 数值 | null | 设置对话框显示时间。以秒为单位 |
| drag | 布尔 | true | 是否允许用户拖动对话框 |
| limit | 布尔 | true | 是否限制挪动与定位范围 |
| focus | 布尔 | true | 定位焦点到对话框中指定元素，默认定位到按钮上。如果传入字符串则使用ID获取元素 |
| 字符串 | |||
| 元素 | |||
| effect | 布尔 | true | 是否开启动画特效 |
| show | 布尔 | true | 是否显示。为false表示不显示对话框，后面可以通过控制接口show()恢复显示 |
| tmpl | 字符串 | null | 启用模板引擎拼接消息内容，还需要与content参数传入JSON才能生效 |
| esc | 布尔 | true | 是否允许Esc键关闭对话框 |
| window | 字符串 | 'self' | 指定窗口弹出对话框，可使用'top'、'parent'、'self'等关键字或者指定其他window对象。如果是'top'则表示让对话框在顶级页面弹出 |
| 对象 | |||
| initFn | 函数 | null | 对话框弹出后执行的函数 |
| closeFn | 函数 | null | 对话框关闭前执行的函数 |
控制接口
| 名称 | 返回值 | 描述 |
| close() | null | 关闭对话框 |
| show() | {Object} | 显示对话框 |
| hide() | {Object} | 隐藏对话框 |
| content() | {HTMLElement} | 获取消息内容容器对象 |
| content(value) | {Object} | 向消息容器中写入内容(innerHTML) |
| follow(element) | {Object} | 让对话框吸附到指定元素附近。（可传入对象的ID名称） |
| position(left, top) | {Object} | 重新定位对话框。无参数则居中定位 |
| size(width, height) | {Object} | 重新设定对话框大小。注意此时参数类型必须为数值 |
| focus(element) | {Object} | 定位焦点 |
自带的扩展方法
| 名称 | 描述 |
| art.dialog.alert(content) | 警告 |
| art.dialog.confirm(content, yesFn, noFn) | 确认 |
| art.dialog.prompt(content, yesFn, value) | 提问 |
| art.dialog.open(url, options) | 弹窗（iframe） |
| art.dialog.close() | open方法创建的iframe里可用此关闭对话框 |
| art.dialog.parent | open方法创建的iframe里可用此获取来源窗口的window对象 |
| art.dialog.tips(content, time) | 短暂提示 |
| art.dialog.load(url, options, cache) | Ajax加载内容
|