接口
配置参数
- 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设置默认配置
// 设置对话框全局默认配置
(function(){
var d = art.dialog.defaults; // 按需加载要用到的皮肤，数组第一个为默认皮肤
// 如果只使用默认皮肤，可以不填写skin
d.skin = ['default', 'chrome', 'facebook', 'aero']; // 支持拖动
d.drag = true; // 超过此面积大小的对话框使用替身拖动
d.showTemp = 100000;
})();
在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加载内容
|