标题：artdialog
简介
例子(1张)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');});
运行&raquo;
二、使用字面量传值
art.dialog(Object)
art.dialog({ content: '欢迎使用artDialog对话框组件！', skin: 'aero', icon: 'succeed', follow: 'btn2', yesFn: function(){ this.follow('btn1').time(2); return false; }});
运行&raquo;
是不是很简单？接下来将有几个表格列举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.parentopen方法创建的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'});
应用到你的项目
一、在页面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;})();</script>