artdialog学习

转载于百度百科

一、使用传统的参数传值
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'});
[更新列表] ------------------------------------------------------------------------------------------------ v2.1.1 1、修复IE6静止定位的对话框导致页面变长的问题 v2.1.0 1、 增加menuBtn参数, 支持让对话框在指定元素附近弹出(菜单模式) 2、 剔除鸡肋参数'parent',框架相互调用请用javascript原生方法 3、 剔除对话框关闭后回调函数,如果需要使用请使用内置扩展方法 4、 如果有取消按钮回调函数,那关闭按钮的回调函数也将与其相同 5、 增加当出现多个对话框时让顶层的与众不同的特性 6、 让Esc键关闭最高层对话框 7、 锁屏的时候改用js屏蔽页面滚动功能,取消原来CSS隐藏滚动条,防止页面偏移 8、 给确定按钮增加Ctrl + Enter快捷键,锁屏的时候支持tab与方向键切换按钮焦点 9、 锁屏的时候屏蔽了键盘操作刷新、Tab切换(只在对话框中可用)与全选 10、修复Chrome特定情况下出现的iframe错位问题 11、修正2.0.8版本后锁屏不兼容Safari的问题 12、修复Firefox调大对话框拖帧的现象 13、修复拖动对话框时候可能因鼠标置入iframe窗口而导致鼠标被粘住的问题 14、修复了内部$.newId方法的一处错误,特定情况下导致定义了ID的对话框无法弹出 15、删除脚本对IE6 png bug内置支持,之前测试版本自动修复ie6 png皮肤是因为作者偷懒 16、修改aero皮肤CSS、针对IE6单独兼容,减少之前脚本修复png占用过多的客户端资源 17、默认皮肤改为前版的mini,没有使用任何背景图片,完全用css表现 18、修复一处隐秘BUG:当使用Ctrl+回车提交表单并弹出对话框时导致弹出新窗口 (因为此时焦点在对话框关闭链接上,这个快捷键让很多浏览器新建窗口) 19、重新绘制'earo'皮肤,修复毛边的问题 20、修复拖动的时候出现选中文本的现象(自动清除选择) 21、如果对话框高度超过浏览器视口的一半高度则不使用黄金比例垂直居中 22、修复了IE7通过url参数创建的iframe可能出现边框线的小问题 23、为了后续版能够提更多接口(小巧而强大的),想了很久狠心改了调用名:art.dialog(); 24、既然连入口都改了,那再改下配置名(为了后续可能的拓展): 'url'参数名改为'iframe' 25、可以自适应iframe内容的大小(不跨域的前提下) 26、对超过预设面积大小的对话框拖动自动采用替身的方式,以求拖动更流畅 27、新增加一个'data'的接口,它保存了你对话框每次创建的消息对象 (操作iframe消息将更加方便,如提交iframe表单。稍后添加更多的例子..) 28、对于简单的消息可以使用简写: artDialog('hello world') 29、让IE6支持覆盖下拉控件的同时也支持透明皮肤 30、优化锁屏渐变动画 31、修复范围限制函数没有生效的错误 32、修复一处笔误,忘记声明变量导致泄漏出去污染全局 v2.0.9 1、 优化代码结构,弹出后仍可访问内部方法(如关闭),大大增强了灵活性 2、 修正IE7锁屏的时候滚动条没有禁止的问题 3、 让焦点自动附加到确定按钮或者关闭按钮 v2.0.8 1、 修正超大对话框并使用定位时候可能被截取的BUG 2、 修复Opera无法正确处理对话框叠加高度(z-index)的BUG 3、 修复Opera设置坐标时候出现的变形BUG v2.0.7 1、 url参数加载外部页面的时候显示loading动画 2、 预加载皮肤背景图片 3、 优化拖动 v2.0.6 1、 解决页面载入即弹出的情况造成水平对齐不正常的BUG(主要是dom ready事件 绑定) 2、 增加parent参数,支持对话框穿越框架在父页面弹出 v2.0.5 1、 剔除yesClose参数,如果要点击确定或者取消按钮不自动关闭对话框,让回调 函数返回false即可 2、 更改x参数名为left,y为top,为后续版本拓展right与bottom参数需要 3、 修改皮肤aero和chrome的图标布局,让回行消息文本留出图标的宽度 v2.0.4 1、 修改一小处兼容框架样式,防止调用页面body设置了文本对齐导致对话框标题文 本也居中 v2.0.3 1、 增加id参数,可以方便外部脚本控制整个对话框,同时可防止对话框重复弹出 2、 增加yesClose参数,用于阻止对话框点击确定后自动关闭 v2.0.0 ...
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值