转载于百度百科
一、使用传统的参数传值
一、使用传统的参数传值
art.dialog(String, Function, Function)
art.dialog('artDialog崇尚:简单、强大、优雅', function(){alert('yes');});
运行»
二、使用
字面量传值
art.dialog(Object)
art.dialog({ content: '欢迎使用artDialog对话框组件!', skin: 'aero', icon: 'succeed', follow: 'btn2', yesFn: function(){ this.follow('btn1').time(2); return false; }});
运行»
是不是很简单?接下来将有几个表格列举artDialog的全部功能,你需要的时候可以使用它们。配置参数 [除了content参数其余的都是可选项]
名称
|
类型
|
默认值
|
描述
|
内容
| |||
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
|
对话框关闭前执行的函数
|
上面这些的默认设置都可以统一被改变,如默认标题:art.dialog.defaults.title = '我是标题'
需要对弹出后的对话框操作?下面介绍的就是artDialog的控制接口了。
每次生成一个对话框后,它都会返回控制接口,这个控制接口还可以在
回调函数的"this"指针获取到。
如调用关闭接口,我们可以先定义一个
变量引用对话框返回值:
var testDialog = art.dialog({ id: 'testDialog01', content: '我初始化后会返回控制接口,请注意接收'});然后在可以在其他地方调用"close"方法关闭对话框:
testDialog.close();当然还可以利用重复定义ID让它返回原来API(如果此ID对话框存在):
art.dialog({id: 'testDialog01'}).close();好了,介绍了控制接口的用途,下面就是控制接口列表:
控制接口
名称
|
返回值
|
描述
|
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}
|
定位焦点
|
artDialog还对一些常用的前后端交互方法进行扩展,并且这些对话框生下来就具有穿越
框架的功能。这部分代码是作为插件实现的,你也可以根据自己需要去拓展新的方法(包括与jQuery结合使用),如果不需要也可以从源码中剔除掉:
自带的扩展方法
名称
|
描述
|
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加载内容
|
jQuery + artDialog
如果页面引用了jQuery,将会献身成为jQuery的一个插件,方法与参数同上。例:
// 普通调用 $.dialog({content:'hello world!'});// 使用jQuery强大的选择器让对话框跟随到元素附近 $('#main .test').dialog({content: 'hello world'});