artDialog学习之旅(一)

接口

配置参数

• 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加载内容