欢迎!
artDialog是一个精巧的web对话框组件,压缩后只有十多KB,并且不依赖其他框架。
能够自适应内容
artDialog的特殊布局结构能够原生的适应内容变化,你不必像以前一样去考虑消息内容大小,她能自己去适应内容。当然她仍然可以接受一个固定高宽的参数,她能够防止内容溢出或截断,同时也不会产生难看的滚动条,甚至能够自动处理文本对齐方式。
优雅灵活的接口
artDialog很用心的设计了她的接口,她拥有丰富的配置参数控制初始化状态,并且每次调用后还会返回一些实用的内部控制接口,你可以先用变量把它保存起来,需要的时候在其他地方自由控制对话框。
精心设计的UI机制
artDialog采用九宫格的XHTML结构,CSS类钩子比较丰富,可以定制类似桌面软件般精致的皮肤。她支持多皮肤共存,这些皮肤的背景图片在页面载入时就会被缓存好,调用时几乎感觉不到延时。展示皮肤
细致的用户体验
她支持Esc快捷键关闭;如果对话框内容有输入控件她将支持Ctrl+Enter提交;智能给按钮添加焦点;小对话框自动采用黄金比例垂直居中;超过指定面积大小的对话框拖动自动采用替身挪动;自动计算边界防止超出可操作范围……
跨浏览器兼容
兼容:IE6+、Firefox、Chrome、Safari、Opera,浏览器版本越高体验越好。并且IE6下也能支持现代浏览器的静止定位(fixed),支持覆盖下拉控件。
与jQuery协作
artDialog所有功能是不需要其他库就可以使用的,但是如果页面引入了jQuery,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();
或者使用art.dialog.get
()方法获取控制接口:
art.dialog.get('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加载内容 | ||
art.dialog.get(id, win) | 获取指定ID对话框的API. 第一个参数为ID,第二个默认当前window |
jQuery + artDialog
如果页面引用了jQuery,artDialog将会献身成为jQuery的一个插件,方法与参数同上。例:
// 普通调用
$.dialog({content:'hello world!'});
// 使用jQuery强大的选择器让对话框跟随到元素附近
$('#main .test').dialog({content: 'hello world'});
演示
常规配置参数使用演示:doc/api.html
跨框架下常用方法演示:doc/iframeTop.html
下载
下载:http://code.google.com/p/artdialog/downloads/list
Code license:
GNU Lesser General Public License
应用到你的项目
一、在页面head引入一个js文件。
<script src="artDialog.min.js"></script>
二、在页面head设置默认配置(可选)。
<script>
// 设置对话框全局默认配置
(function(){
var d = art.dialog.defaults;
// 按需加载要用到的皮肤,数组第一个为默认皮肤
// 如果只使用默认皮肤,可以不填写skin
d.skin = ['default', 'chrome', 'facebook', 'aero'];
// 支持拖动
d.drag = true;
// 超过此面积大小的对话框使用替身拖动
d.showTemp = 100000;
})();
</script>
(更多可用可用默认设置请查看源文件)
主要的更新
-
3.0.6
- 仅修复load模块无法载入远程数据问题
-
3.0.5
- 修复iPad或iPhone下使用锁屏焦点自动弹出的问题
- 修复移动设备使用手势缩放页面带来的漂移问题
- 修复fixed在移动设备中支持不完整的问题
- 修复window.top是框架集(frameset)页面可能会带来无限循环递归的问题
-
3.0.4
- 修复closeFn参数在open与load方法执行出错
- 修复closeFn参数可能执行的问题
- 修复输入过程中按Esc意外关闭对话框的问题
- 增加art.dialog.get()方法获取指定ID对话框API
-
3.0.3
- 修复锁屏的时候对话框内容无法使用退格键的BUG
- 修复框架集(frameset)页面不能植入artDialog而产生js报错的问题,并增加了其支持
- art.dialog.open()产生的iframe其内部增加art.dialog.parent获取来源页window对象
-
3.0.2
- 对art.dialog.open()产生的iframe可直接用art.dialog.clsoe()方法关闭
- 改善与jQuery的配合:ajax将由强大的jQuery.ajax驱动
- 为了保持命名风格,原来的art.dialog.get()换成art.dialog.load()
- 修复用jQuery.ready()在页面载入时直接调用对话框导致left参数失效的BUG
- 修复若干细小的BUG
-
3.0.1
- 修复IE8可能重复执行的问题
-
3.0
- 重写架构,DOM底层与应用层分离,代码重用
- 修复v2版几个严重的BUG
- 大幅度提高在IE浏览器下的性能
- 支持多皮肤共存,支持动画
- 简化框架应用下的穿越与对象传递操作
- 公开默认配置的读写
- 重写IE6 fixed实现
-
2.0
- 重写代码,支持多对话框共存
- 支持返回控制接口关闭对话框
- 解决v1已知的一些BUG
-
1.0
- 高度与宽度支持原生自适应内容,自适应文本对齐
- 支持拖动、Esc关闭对话框、坐标定位
- 支持自适应位置
- 支持IE6无抖动静止定位