《artDialog说明文档》由会员分享，可在线阅读，更多相关《artDialog说明文档（17页珍藏版）》请在金锄头文库上搜索。
1、artDialog 说明文档artDialog 是一个基于 javascript 编写的对话框组件，它拥有精致的界面与友好的接口 自适应内容artDialog 的特殊 UI 框架能够适应内容变化，甚至连外部程序动态插入的内容它仍然能自适应，因此你不必去考虑消息内容尺寸使用它。它的消息容器甚至能够根据宽度让文本居中或居左对齐这一切全是 XHTML+CSS 原生实现。 完善的接口它的接口完善，可以轻易与外部程序配合使用。如异步写入消息、控制位置、尺寸、显示与隐藏、关闭等。 细致的体验如果不是在输入状态，它支持 Esc 快捷键关闭；可指定在元素附近弹出，让操作更便捷；智能给按钮添加焦点；黄金比例垂直
2、居中；超大响应区域特别为 ipad 等触屏设备优化；预先缓存皮肤图片更快响应 跨平台兼容兼容：IE6+、Firefox、Chrome、Safari、Opera 以及 iPad 等移动设备。并且 IE6 下也能支持现代浏览器的静止定位(fixed)、alpha 通道 png 背景。下载地址： http:/ ok, cancel)示例：art.dialog(简单愉悦的接口，强大的表现力，优雅的内部实现, function()alert(yes););art.dialog(“简单愉悦的接口，强大的表现力，优雅的内部实现”);二、使用字面量传参art.dialog(options)示例var dial
3、og = art.dialog(title: 欢迎,content: 欢迎使用 artDialog 对话框组件！,icon: succeed,follow: document.getElementById(btn2),ok: function()this.title(警告).content(请注意 artDialog 两秒后将关闭！).lock().time(2);return false; );三、扩展方法需要对弹出后的对话框操作？artDialog 简单实用的扩展方法可以使这一切变得简单。如在 ajax 异步操作中，我们可以先定义一个变量引用对话框返回的扩展方法：var myDialog
4、= art.dialog();/ 初始化一个带有 loading 图标的空对话框jQuery.ajax(url: http:/ function (data) myDialog.content(data);/ 填充对话框内容);如果需要使用程序控制关闭，可以使用close方法关闭对话框：myDialog.close();插件：框架应用工具artDialog 针对 CMS 类的框架应用提供了专属插件，如穿越框架、iframe、AJAX、跨框架传值操作等。例： 使用 open 方法嵌入页面，并使用 data 方法在各个 iframe 间传递数据：var val = document.getElem
5、entById(demoInput04-3).value;art.dialog.data(test, val);art.dialog.data(homeDemoPath, ./_doc/);/ 此时 iframeA.html 页面可以使用 art.dialog.data(test) 获取到数据，如：/ document.getElementById(aInput).value = art.dialog.data(test);art.dialog.open(./_doc/iframeA.html);jQuery + artDialogartDialog 提供了一个 jQuery 版本，功能与标准
6、版一致，调用只需要把 art 前缀改成jQuery 的命名空间。/ 普通调用$.dialog(content:hello world!);/ 使用选择器方式，此时自动使用绑定了 live click 事件，同时启用 follow 模式$(#main .test).dialog(content: hello world);(最低兼容 jquery1.3.2，但框架应用插件需要 jquery1.4+运行?)配置参数名称 类型 默认值 描述内容title String 消息 标题内容名称 类型 默认值 描述StringcontentHTMLElementloading. 消息内容。1、如果传入的是
7、HTMLElement 类型，如果是隐藏元素会给其设置display:block 以显示该元素，其他属性与绑定的事件都会完整保留，对话框关闭后此元素又将恢复原来的 display 属性，并且重新插入原文档所在位置2、如果没有设定 content 的值则会有loading 的动画按钮Functionok Booleannull 确定按钮回调函数。函数如果返回 false 将阻止对话框关闭；函数 this 指针指向内部 api；如果传入true 表示只显示有关闭功能的按钮FunctioncancelBooleannull 取消按钮回调函数。函数如果返回 false 将阻止对话框关闭；函数 this
8、 指针指向内部 api；如果传入true 表示只显示有关闭功能的按钮对话框标题栏的关闭按钮其实就是取消按钮，只不过视觉不同罢了，点击同样触发cancel 事件okVal String 确定 确定按钮 文字cancelVal String 取消 取消按钮 文字buttonArray null 自定义按钮。配置参数成员： name 按钮名称callback 按下后执行的函数focus 是否聚焦点disabled 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态）示例：参数如：name: 登录, callback: function () , name: 取消 。注意点击按钮默认会触发按
9、钮关闭动作，需要阻止触发关闭请让回调函数返回false名称 类型 默认值 描述尺寸NumberwidthStringauto 设置消息内容宽度，可以带单位。一般不需要设置此，对话框框架会自己适应内容。如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整NumberheightStringauto 设置消息内容高度，可以带单位。不建议设置此，而应该让内容自己撑开高度。如果设置为百分值单位，将会以根据浏览器可视范围作为基准，此时如果浏览器窗口大小被改变其也会进行相应的调整位置fixedBoolean false 开启静止定位。静止定位是 css2
10、.1 的一个属性，它静止在浏览器某个地方不动，也不受滚动条拖动影响。（artDialog支持 IE6 fixed）HTMLElementfollow Stringnull 让对话框依附在指定元素附近。可传入元素 ID 名称，注意 ID 名称需要以“#” 号作为前缀Numberleft String50% 相对于可视区域的 X 轴的坐标。可以使用0% 100%作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整Numbertop String38.2% 相对于可视区域的 Y 轴的坐标。可以使用0% 100%作为相对坐标，如果浏览器窗口大小被改变其也会进行相应的调整视觉lockBoolean
11、 false 开启锁屏。中断用户对话框之外的交互，用于显示非常重要的操作/ 消息，所以不建议频繁使用它，它会让操作变得繁琐background String #000 锁屏遮罩颜色opacity Number 0.7 锁屏遮罩透明度名称 类型 默认值 描述iconString null 定义消息图标。可定义“skins/icons/”目录下的图标名作为参数名（不包含后缀名）padding String 20px 25px 内容与边界填充边距(即 css padding)交互time Number null 设置对话框显示时间。以秒为单位resize Boolean true 是否允许用户调节尺
12、寸drag Boolean true 是否允许用户拖动位置esc Boolean true 是否允许用户按 Esc 键关闭对话框高级Stringid Numbernull 设定对话框唯一标识。用途：1、防止重复弹出2、定义 id 后可以使用art.dialog.listyouID获取扩展方法zIndexNumber 1987 重置全局 zIndex 初始值。用来改变对话框叠加高度。比如有时候配合外部浮动层 UI 组件，但是它们可能默认 zIndex 没有 artDialog 高，导致无法浮动到 artDialog 之上，这个时候你就可以给对话框指定一个较小的 zIndex值。请注意这是一个会影
13、响到全局的配置，后续出现的对话框叠加高度将重新按此累加。init Function null 对话框弹出后执行的函数closeFunction null 对话框关闭前执行的函数。函数如果返回false 将阻止对话框关闭。请注意这不是关闭按钮的回调函数，无论何种方式关闭对话框，close 都将执行。show Boolean true 是否显示对话框扩展方法名称 描述close() 关闭对话框名称 描述show() 显示对话框hide() 隐藏对话框title(value) 写入标题。无参数则返回标题容器元素content(value) 向消息容器中写入内容。参数支持字符串、DOM 对象，无参数则
14、返回内容容器元素button(arguments)插入一个自定义按钮。配置参数成员： name 按钮名称callback 按下后执行的函数focus 是否聚焦点disabled 是否标记按钮为不可用状态（后续可使用扩展方法让其恢复可用状态）示例：button(name: 登录,focus: true,callback: function () , name: 取消)follow(element) 让对话框吸附到指定元素附近position(left, top) 重新定位对话框size(width, height) 重新设定对话框大小lock() 锁屏unlock() 解锁time(val) 定
15、时关闭（单位秒）配置参数演示内容 content1. 传入字符串art.dialog(content: 我支持 HTML);运行 2. 传入 HTMLElement备注：1、元素不是复制而是完整移动到对话框中，所以原有的事件与属性都将会保留 2、如果隐藏元素被传入到对话框，会设置 display:block 属性显示该元素 3、对话框关闭的时候元素将恢复到原来在页面的位置，style display 属性也将恢复art.dialog(content: document.getElementById(demoCode_content_DOM),id: EF893L);运行 标题 titleart.dialog(title: hello world!);运行 确定取消按钮 ok & cancel备注：回调函数 this 指向扩展接口，如果返回 false 将阻止对话框关闭art.dialog(content: 如果定义了回调函数才会出现相应的按钮,ok: function () this.title(3 秒后自动
