From 885c14b5c5da903272afaedd1986435a106ed29e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=94=90=E6=96=8C?= <1987.tangbin@gmail.com> Date: Thu, 21 Feb 2013 10:34:54 +0800 Subject: [PATCH 1/6] v5.0.3 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 支持信息无障碍(ARIA): 内容描述、键盘操作(焦点管理) 2. 锁屏可限制焦点元素保持在对话框内 --- README.md | 156 ++++++++++++++++++++++++++++++++---- artDialog.min.js | 9 ++- index.html | 120 ++++++++++++++------------- jquery.artDialog.min.js | 9 ++- skins/aero.css | 6 +- skins/black.css | 6 +- skins/blue.css | 6 +- skins/chrome.css | 6 +- skins/default.css | 6 +- skins/green.css | 6 +- skins/idialog.css | 6 +- skins/opera.css | 6 +- skins/simple.css | 6 +- skins/twitter.css | 6 +- source/artDialog.js | 103 +++++++++++------------- source/artDialog.plugins.js | 10 +-- source/jquery.artDialog.js | 100 +++++++++++------------ 17 files changed, 341 insertions(+), 226 deletions(-) diff --git a/README.md b/README.md index 1d0cd85..16ea18a 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,13 @@ -artDialog +# artDialog ========= 优雅的web对话框控件 -artDialog 是一个精心设计的对话框控件,它拥有精致的界面与易用的编程接口。 +artDialog 是一个精心设计的对话框控件,它拥有精致的界面与易用的编程接口。 + +**演示与文档:** + +http://aui.github.com/artDialog/ ## 概述 @@ -11,29 +15,36 @@ artDialog 是一个精心设计的 web 对话框控件,它继承与延伸了 ## 特点 -#### 自适应内容尺寸 +#### 1. 自适应内容尺寸 对话框采用特殊UI结构,无论使用AJAX异步填充内容还是类似tabs等控件导致内容变化,对话框均可自动自适应内容尺寸。 -#### 智能文本对齐 +#### 2. 智能文本对齐 如果设置了对话框宽度(包括用户通过调节把柄改变了尺寸),对话框中的文本会自动居中或者居左对齐,这些都是使用用CSS实现的。 -#### 黄金比例垂直居中 +#### 3. 黄金比例垂直居中 对话框默认会采用黄金比例垂直居中弹出,正如网页中重要的内容会被安排在垂直黄金区域一样,这样更舒适。 -#### 可吸附式弹出 +#### 4. 可吸附式弹出 宽屏笔记本用户已经逐渐成为主流,很多时候大幅度的移动鼠标操作也是一个麻烦的事情(尤其是使用触控板),artDialog支持设置在onclick事件触发源弹出,以让用户操作更加便捷。 -#### 支持快捷键与默认焦点 +#### 5. 支持快捷键与默认焦点 * ESC快捷键默认触发对话框关闭(除非在输入状态)。 -* 若有确定按钮,焦点默认停留在确定按钮上,否则停留在右上角关闭按钮上,这样用户可以通过回车键进行操作。 +* 若有确定按钮,焦点默认停留在确定按钮上,否则停留在右上角关闭按钮上,这样用户可以通过回车键进行操作。 + +* 对话框关闭后焦点将被恢复(只支持jquery版) + +### 6. 支持信息无障碍(ARIA) + +支持读屏器操作,让盲人能够平等的获取信息 + -### 友好的API +### 7. 友好的API 在保持小巧的程序体积之外,artDialog提供了丰富的可选配置与方法。它的API风格统一,简单易用,稍微阅读文档一个示例即可举一反三。 @@ -43,8 +54,125 @@ artDialog 是一个精心设计的 web 对话框控件,它继承与延伸了 * 盛大 * 中国移动 * 中国电信 -* ... - -## 演示 - -http://aui.github.com/artDialog/ \ No newline at end of file +* ... + +## 更新记录 + +### 5.0.3 + +1. **支持信息无障碍(ARIA): 内容描述、键盘操作(焦点管理)** +2. 锁屏可限制焦点元素保持在对话框内 + +### 5.0.2 + +1. 修复居中可能导致左边框显示不出的问题 +2. 取消点击遮罩对话框恢复居中的特性 + +### 5.0.1 + +1. 修正重复调用 close 方法出现的错误 +2. 修正设定了follow后再使用content()方法导致其居中的问题 + +### 5.0.0 + +[重新回到当初的理念:简单、优雅] + +1. follow 不再支持 String 类型 +2. button 参数只支持 Array 类型 +3. button name 成员改成 value +4. button 增加 id 成员 +5. okVal 参数更名为 okValue, 默认值由 '确定' 改为 'ok' +6. cancelVal 参数更名为 cancelValue, 默认值由 '取消' 改为 'cancel' +6. close 参数更名为 beforeunload +7. init 参数更名为 initialize +8. title 参数默认值由 '消息' 改为 'message' +9. time 参数与方法参数单位由秒改为毫秒 +10. hide 参数方法更名为 hidden +11. 内部为皮肤增加动态样式 d-state-visible 类 +12. 给遮罩增添样式 d-mask 类 +13. background 参数被取消, 由 CSS 文件定义 +14. opacity 参数被取消, 由 CSS 文件定义 +15. **取消拖动特性,改由插件支持** +16. 取消 left 与 top 参数 +17. 取消对 ie6 提供 fixed 支持,自动转换为 absolute +18. 取消对 ie6 提供 alpha png 支持 +19. 取消对 ie6 提供 select 标签遮盖支持 +20. 增加 focus 参数 +21. 取消 position 方法 +22. 取消对 的支持 +23. **取消对 iframe 的支持** +24. title 方法不支持空参数 +25. content 方法不支持空参数 +26. button 方法的参数不支持数组类型 +27. 判断 DOCTYPE, 对 xhtml1.0 以下的页面报告错误 +28. 修复 IE8 动态等新内容时没有撑开对话框高度,特意为 ie8 取消 .d-content { display:inline-block } +29. show 参数与方法更名为 visible + +### 4.0.0 + +[严谨的跨浏览器支持、对框架应用提供强大的api支持] + +源码:http://code.google.com/p/artdialog/ + +1. 修复刷新框架后脚本报错的问题 +2. 修复异步加载 artDialog.js 导致锁屏无法使用的问题 +3. 双击遮罩不再直接关闭,而是等同于关闭按钮与取消按钮 +4. 修复 IE6 在特殊情况下可能因为 fixed 定位出现 body 背景图片异常 +5. 修复部分皮肤在 firefox7.0 版下,标题栏出现省略号的问题 +6. 修复 v4.0.5 之后版本在浏览器窗口调节的时候可能出现对话框变形问题 +7. top 参数黄金比例不再采用单独的关键字,可使用 '38.2%' 表示 +8. **新增 content 扩展方法写入消息后,让对话框以自身为中心放大的特性** +9. 增加高亮按钮的样式:确定按钮默认高亮(自定义按钮可使用focus参数高亮) +10. 解决IE浏览器按钮字体模糊问题 +11. jQuery版本最低兼容jQuery 1.3.2 +12. 新增artDialog 基本版本;它只拥有核心功能,文件只有常规版本的一半大小,可被客户端快速载入 +13. 精简内嵌事件系统,进一步减少体积(压缩版比上一版本少近了3kb) +14. iframeTools: open方法默认不再强制锁屏 +15. 增强icon参数自由度,不再依赖对话框样式文件定义。可存入任意图标到“skins/icons/”并使用它们 +16. iframeTools: 拖拽操作增加透明遮罩,防止鼠标指针落入框架而导致监听失败,提高拖拽流畅性 +17. iframeTools: 对open方法增加一个私有的iframe扩展方法,用来引用其创建的iframe对象 +18. 新增点击内容部分也可以如点击标题一样置顶对话框的特性 +19. iframeTools: 增加父页面刷新与关闭后子对话框也将关闭的特性。(由于iframe注销后其产生的对象会被大多数浏览器在内存中移除,增加此特性可以有效的解决对话框报错) +20. **DOM底层api兼容jQuery api,同步发行jQuery版本** +21. **消息内容支持传入DOM元素** +22. 增加title标题接口 +23. 增加button自定义按钮接口 +24. 增加lock与unlock接口 +25. 新增data方法用来在iframe之间共享数据 +26. 重定义zIndex配置参数 +27. 重新支持调节对话框大小 +28. 支持用第三方框架加载自身 +29. **配置参数全部为可选,如果没有content,它将出现loading动画** +30. left与top关键字用百分比代替,同时增加width与height传递百分比参数 +31. 更好的支持iframe +32. 修复若干BUG + +### 3.0.0 + +[初次支持框架] + +1. 修复iPad或iPhone下使用锁屏焦点自动弹出的问题 +2. 修复移动设备使用手势缩放页面带来的漂移问题 +3. 修复fixed在移动设备中支持不完整的问题 +4. 修复window.top是框架集(frameset)页面可能会带来无限循环递归的问题 +5. 增加art.dialog.get()方法获取指定ID对话框API +6. 修复框架集(frameset)页面不能植入artDialog而产生js报错的问题,并增加了其支持 +7. 公开默认配置的读写 +8. 重写IE6 fixed实现 + +### 2.0.0 + +[进一步封装] + +1. **支持多对话框共存** +2. 支持返回扩展方法关闭对话框 +3. 解决v1已知的一些BUG + +### 1.0.0 + +[诞生] + +1. **高度与宽度支持原生自适应内容,自适应文本对齐** +2. 支持拖动、Esc关闭对话框、坐标定位 +3. **支持自适应位置** +4. **支持IE6无抖动静止定位** \ No newline at end of file diff --git a/artDialog.min.js b/artDialog.min.js index 3eb4296..0a2fbf8 100644 --- a/artDialog.min.js +++ b/artDialog.min.js @@ -1,9 +1,10 @@ /*! -* artDialog 5.0.2 -* Date: 2012-11-11 +* artDialog 5.0.3 +* Date: 2013-02-20 * https://github.com/aui/artDialog -* (c) 2009-2012 TangBin, http://www.planeArt.cn +* (c) 2009-2013 TangBin, http://www.planeArt.cn * * This is licensed under the GNU LGPL, version 2.1 or later. * For details, see: http://creativecommons.org/licenses/LGPL/2.1/ -*/(function(e,t){function s(e,t,n){t=t||document,n=n||"*";var r=0,i=0,s=[],o=t.getElementsByTagName(n),u=o.length,a=new RegExp("(^|\\s)"+e+"(\\s|$)");for(;r)[^>]*$|#([\w\-]+)$)/,i=/[\n\t]/g;return e.$===t&&(e.$=n),n.fn=n.prototype={constructor:function(e,t){var n,i;t=t||document;if(!e)return this;if(e.nodeType)return this[0]=e,this;if(typeof e=="string"){n=r.exec(e);if(n&&n[2])return i=t.getElementById(n[2]),i&&i.parentNode&&(this[0]=i),this}return this[0]=e,this},hasClass:function(e){var t=" "+e+" ";return(" "+this[0].className+" ").replace(i," ").indexOf(t)>-1?!0:!1},addClass:function(e){return this.hasClass(e)||(this[0].className+=" "+e),this},removeClass:function(e){var t=this[0];return e?this.hasClass(e)&&(t.className=t.className.replace(e," ")):t.className="",this},css:function(e,r){var i,s=this[0],o=arguments[0];if(typeof e=="string"){if(r===t)return n.css(s,e);s.style[e]=r}else for(i in o)s.style[i]=o[i];return this},show:function(){return this.css("display","block")},hide:function(){return this.css("display","none")},offset:function(){var e=this[0],t=e.getBoundingClientRect(),n=e.ownerDocument,r=n.body,i=n.documentElement,s=i.clientTop||r.clientTop||0,o=i.clientLeft||r.clientLeft||0,u=t.top+(self.pageYOffset||i.scrollTop)-s,a=t.left+(self.pageXOffset||i.scrollLeft)-o;return{left:a,top:u}},html:function(e){var r=this[0];return e===t?r.innerHTML:(n.cleanData(r.getElementsByTagName("*")),r.innerHTML=e,this)},remove:function(){var e=this[0];return n.cleanData(e.getElementsByTagName("*")),n.cleanData([e]),e.parentNode.removeChild(e),this},bind:function(e,t){return n.event.add(this[0],e,t),this},unbind:function(e,t){return n.event.remove(this[0],e,t),this}},n.fn.constructor.prototype=n.fn,n.isWindow=function(e){return e&&typeof e=="object"&&"setInterval"in e},n.fn.find=function(e){var t,r=this[0],i=e.split(".")[1];return i?document.getElementsByClassName?t=r.getElementsByClassName(i):t=s(i,r):t=r.getElementsByTagName(e),n(t[0])},n.each=function(e,n){var r,i=0,s=e.length,o=s===t;if(o){for(r in e)if(n.call(e[r],r,e[r])===!1)break}else for(var u=e[0];il&&g-E>N?g-E+v:x,T=T+S>c+C&&y-S>C?y-S:T,w.left=parseInt(x)+"px",w.top=parseInt(T)+"px",this._follow&&this._follow.removeAttribute(s),this._follow=t,t[s]=r.id,this},button:function(){var t=this.dom,n=t.buttons,r=n[0],i="d-state-highlight",s=this._listeners=this._listeners||{},u=[].slice.call(arguments),a=0,f,l,c,h,p;for(;aloading..',title:"message",button:null,ok:null,cancel:null,initialize:null,beforeunload:null,okValue:"ok",cancelValue:"cancel",width:"auto",height:"auto",padding:"20px 25px",skin:null,time:null,esc:!0,focus:!0,visible:!0,follow:null,lock:!1,fixed:!1,zIndex:1987},this.artDialog=e.dialog=e.artDialog=l}(this.art||this.jQuery,this) \ No newline at end of file +*/ +(function(e,t){function s(e,t,n){t=t||document,n=n||"*";var r=0,i=0,s=[],o=t.getElementsByTagName(n),u=o.length,a=new RegExp("(^|\\s)"+e+"(\\s|$)");for(;r)[^>]*$|#([\w\-]+)$)/,i=/[\n\t]/g;return e.$===t&&(e.$=n),n.fn=n.prototype={constructor:function(e,t){var n,i;t=t||document;if(!e)return this;if(e.nodeType)return this[0]=e,this;if(typeof e=="string"){n=r.exec(e);if(n&&n[2])return i=t.getElementById(n[2]),i&&i.parentNode&&(this[0]=i),this}return this[0]=e,this},hasClass:function(e){var t=" "+e+" ";return(" "+this[0].className+" ").replace(i," ").indexOf(t)>-1?!0:!1},addClass:function(e){return this.hasClass(e)||(this[0].className+=" "+e),this},removeClass:function(e){var t=this[0];return e?this.hasClass(e)&&(t.className=t.className.replace(e," ")):t.className="",this},css:function(e,r){var i,s=this[0],o=arguments[0];if(typeof e=="string"){if(r===t)return n.css(s,e);s.style[e]=r}else for(i in o)s.style[i]=o[i];return this},show:function(){return this.css("display","block")},hide:function(){return this.css("display","none")},offset:function(){var e=this[0],t=e.getBoundingClientRect(),n=e.ownerDocument,r=n.body,i=n.documentElement,s=i.clientTop||r.clientTop||0,o=i.clientLeft||r.clientLeft||0,u=t.top+(self.pageYOffset||i.scrollTop)-s,a=t.left+(self.pageXOffset||i.scrollLeft)-o;return{left:a,top:u}},html:function(e){var r=this[0];return e===t?r.innerHTML:(n.cleanData(r.getElementsByTagName("*")),r.innerHTML=e,this)},remove:function(){var e=this[0];return n.cleanData(e.getElementsByTagName("*")),n.cleanData([e]),e.parentNode.removeChild(e),this},bind:function(e,t){return n.event.add(this[0],e,t),this},unbind:function(e,t){return n.event.remove(this[0],e,t),this}},n.fn.constructor.prototype=n.fn,n.isWindow=function(e){return e&&typeof e=="object"&&"setInterval"in e},n.fn.find=function(e){var t,r=this[0],i=e.split(".")[1];return i?document.getElementsByClassName?t=r.getElementsByClassName(i):t=s(i,r):t=r.getElementsByTagName(e),n(t[0])},n.each=function(e,n){var r,i=0,s=e.length,o=s===t;if(o){for(r in e)if(n.call(e[r],r,e[r])===!1)break}else for(var u=e[0];il&&g-E>N?g-E+v:x,T=T+S>c+C&&y-S>C?y-S:T,w.left=parseInt(x)+"px",w.top=parseInt(T)+"px",this._follow&&this._follow.removeAttribute(s),this._follow=t,t[s]=r.id,this},button:function(){var t=this.dom,n=t.buttons,r=n[0],i="d-state-highlight",s=this._listeners=this._listeners||{},o=[].slice.call(arguments),a=0,f,l,c,h,p;for(;aloading..',title:"message",button:null,ok:null,cancel:null,initialize:null,beforeunload:null,okValue:"ok",cancelValue:"cancel",width:"auto",height:"auto",padding:"20px 25px",skin:null,time:null,esc:!0,focus:!0,visible:!0,follow:null,lock:!1,fixed:!1,zIndex:1987},this.artDialog=e.dialog=e.artDialog=c}(this.art||this.jQuery,this) \ No newline at end of file diff --git a/index.html b/index.html index ad5879c..f65323b 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,12 @@ artDialog - + + + + 的支持 -23. 取消对 iframe 的支持 -24. title 方法不支持空参数 -25. content 方法不支持空参数 -26. button 方法的参数不支持数组类型 -27. 判断 DOCTYPE, 对 xhtml1.0 以下的页面报告错误 -28. 修复 IE8 动态等新内容时没有撑开对话框高度,特意为 ie8 取消 .d-content { display:inline-block } -29. show 参数与方法更名为 visible -30. 修正重复调用 close 方法出现的错误 -31. 修正设定了follow后再使用content()方法导致其居中的问题 -32. 修复居中可能导致左边框显示不出的问题 - -*/ - diff --git a/source/artDialog.plugins.js b/source/artDialog.plugins.js index e9ca1cb..57f1c66 100644 --- a/source/artDialog.plugins.js +++ b/source/artDialog.plugins.js @@ -157,8 +157,8 @@ DragEvent.prototype = { .bind('mousemove', this.over) .bind('mouseup', this.end); - this._sClientX = event.clientX; - this._sClientY = event.clientY; + this.x = event.clientX; + this.y = event.clientY; this.onstart(event.clientX, event.clientY); return false; @@ -167,11 +167,9 @@ DragEvent.prototype = { // 正在拖拽 // onover: function () {}, over: function (event) { - this._mClientX = event.clientX; - this._mClientY = event.clientY; this.onover( - event.clientX - this._sClientX, - event.clientY - this._sClientY + event.clientX - this.x, + event.clientY - this.y ); return false; diff --git a/source/jquery.artDialog.js b/source/jquery.artDialog.js index 7e353b1..3acb995 100644 --- a/source/jquery.artDialog.js +++ b/source/jquery.artDialog.js @@ -1,13 +1,14 @@ /*! -* artDialog 5.0.2 -* Date: 2012-11-11 +* artDialog 5.0.3 +* Date: 2013-02-20 * https://github.com/aui/artDialog -* (c) 2009-2012 TangBin, http://www.planeArt.cn +* (c) 2009-2013 TangBin, http://www.planeArt.cn * * This is licensed under the GNU LGPL, version 2.1 or later. * For details, see: http://creativecommons.org/licenses/LGPL/2.1/ */ + ;(function ($, window, undefined) { // artDialog 只支持 xhtml 1.0 或者以上的 DOCTYPE 声明 @@ -17,8 +18,9 @@ if (document.compatMode === 'BackCompat') { var _singleton, _count = 0, + _activeElement = document.activeElement, _root = $(document.getElementsByTagName('html')[0]), - _expando = 'artDialog' + + new Date, + _expando = 'artDialog' + (+ new Date), _isIE6 = window.VBArray && !window.XMLHttpRequest, _isMobile = 'createTouch' in document && !('onmousemove' in document) || /(iPhone|iPad|iPod)/i.test(navigator.userAgent), @@ -57,12 +59,13 @@ var artDialog = function (config, ok, cancel) { api.follow(elem) }; api.zIndex().focus(); + _activeElement = document.activeElement; return api; }; - // 目前主流移动设备对fixed支持不好 + // 目前主流移动设备对fixed支持不好,禁用此特性 if (!_isFixed) { config.fixed = false; }; @@ -117,10 +120,12 @@ artDialog.fn = artDialog.prototype = { /** @inner */ constructor: function (config) { var dom; + + _activeElement = document.activeElement; this.closed = false; this.config = config; - this.dom = dom = this.dom || this._getDom(); + this.dom = dom = this.dom || this._innerHTML(config); config.skin && dom.wrap.addClass(config.skin); @@ -520,6 +525,11 @@ artDialog.fn = artDialog.prototype = { this.hidden(); }; + + // 恢复焦点,照顾键盘操作的用户 + if (_activeElement) { + _activeElement.focus(); + } this.closed = true; return this; @@ -652,7 +662,7 @@ artDialog.fn = artDialog.prototype = { // 获取元素 - _getDom: function () { + _innerHTML: function (data) { var body = document.body; @@ -663,7 +673,13 @@ artDialog.fn = artDialog.prototype = { var wrap = document.createElement('div'); wrap.style.cssText = 'position:absolute;left:0;top:0'; - wrap.innerHTML = artDialog._templates; + + wrap.innerHTML = artDialog._templates + .replace(/{([^}]+)}/g, function ($0, $1) { + var value = data[$1]; + return typeof value === 'string' ? value : ''; + }); + body.insertBefore(wrap, body.firstChild); var name, @@ -797,6 +813,22 @@ $(document).bind('keydown', function (event) { }); +// 锁屏限制tab +function focusin (event) { + var api = artDialog.focus; + if (api && api._isLock && !api.dom.wrap[0].contains(event.target)) { + event.stopPropagation(); + api.focus(); + } +} + +if ($.fn.live) { + $('body').live('focus', focusin); +}/* else if (document.addEventListener) { + document.addEventListener('focus', focusin, true); +}*/ + + // 浏览器窗口改变后重置对话框位置 $(window).bind('resize', function () { @@ -812,7 +844,7 @@ $(window).bind('resize', function () { // 使用 uglifyjs 压缩能够预先处理"+"号合并字符串 // @see http://marijnhaverbeke.nl/uglifyjs artDialog._templates = -'
' +'',m.defaults={content:'
loading..
',title:"message",button:null,ok:null,cancel:null,initialize:null,beforeunload:null,okValue:"ok",cancelValue:"cancel",width:"auto",height:"auto",padding:"20px 25px",skin:null,time:null,visible:!0,follow:null,lock:!1,fixed:!1,zIndex:1987},this.artDialog=a.dialog=a.artDialog=m}(this.art||this.jQuery,this); \ No newline at end of file diff --git a/jquery.artDialog.min.js b/jquery.artDialog.min.js index 0a94de5..542a44b 100644 --- a/jquery.artDialog.min.js +++ b/jquery.artDialog.min.js @@ -1,10 +1,9 @@ /*! -* artDialog 5.0.3 -* Date: 2013-02-20 +* artDialog 5.0.4 +* Date: 2013-07-31 * https://github.com/aui/artDialog * (c) 2009-2013 TangBin, http://www.planeArt.cn * * This is licensed under the GNU LGPL, version 2.1 or later. * For details, see: http://creativecommons.org/licenses/LGPL/2.1/ -*/ -(function(e,t,n){function h(e){var t=c.focus;t&&t._isLock&&!t.dom.wrap[0].contains(e.target)&&(e.stopPropagation(),t.focus())}if(document.compatMode==="BackCompat")throw new Error("artDialog: Document types require more than xhtml1.0");var r,i=0,s=document.activeElement,o=e(document.getElementsByTagName("html")[0]),u="artDialog"+ +(new Date),a=t.VBArray&&!t.XMLHttpRequest,f="createTouch"in document&&!("onmousemove"in document)||/(iPhone|iPad|iPod)/i.test(navigator.userAgent),l=!a&&!f,c=function(e,t,o){e=e||{};if(typeof e=="string"||e.nodeType===1)e={content:e,fixed:!f};var a,h=c.defaults,p=e.follow=this.nodeType===1&&this||e.follow;for(var d in h)e[d]===n&&(e[d]=h[d]);e.id=p&&p[u+"follow"]||e.id||u+i,a=c.list[e.id];if(a)return p&&a.follow(p),a.zIndex().focus(),s=document.activeElement,a;l||(e.fixed=!1);if(!e.button||!e.button.push)e.button=[];return t!==n&&(e.ok=t),e.ok&&e.button.push({id:"ok",value:e.okValue,callback:e.ok,focus:!0}),o!==n&&(e.cancel=o),e.cancel&&e.button.push({id:"cancel",value:e.cancelValue,callback:e.cancel}),c.defaults.zIndex=e.zIndex,i++,c.list[e.id]=r?r.constructor(e):new c.fn.constructor(e)};c.version="5.0.3",c.fn=c.prototype={constructor:function(e){var t;return s=document.activeElement,this.closed=!1,this.config=e,this.dom=t=this.dom||this._innerHTML(e),e.skin&&t.wrap.addClass(e.skin),t.wrap.css("position",e.fixed?"fixed":"absolute"),t.close[e.cancel===!1?"hide":"show"](),t.content.css("padding",e.padding),this.button.apply(this,e.button),this.title(e.title).content(e.content).size(e.width,e.height).time(e.time),this._reset(),this.zIndex(),e.lock&&this.lock(),this._addEvent(),this[e.visible?"visible":"hidden"]().focus(),r=null,e.initialize&&e.initialize.call(this),this},content:function(t){var n,r,i,s,o=this,u=this.dom.content,a=u[0];return this._elemBack&&(this._elemBack(),delete this._elemBack),typeof t=="string"?u.html(t):t&&t.nodeType===1&&(s=t.style.display,n=t.previousSibling,r=t.nextSibling,i=t.parentNode,this._elemBack=function(){n&&n.parentNode?n.parentNode.insertBefore(t,n.nextSibling):r&&r.parentNode?r.parentNode.insertBefore(t,r):i&&i.appendChild(t),t.style.display=s,o._elemBack=null},u.html(""),a.appendChild(t),e(t).show()),this._reset(),this},title:function(e){var t=this.dom,n=t.outer,r=t.title,i="d-state-noTitle";return e===!1?(r.hide().html(""),n.addClass(i)):(r.show().html(e),n.removeClass(i)),this},position:function(){var e=this.dom,t=e.wrap[0],n=e.window,r=e.document,i=this.config.fixed,s=i?0:r.scrollLeft(),o=i?0:r.scrollTop(),a=n.width(),f=n.height(),l=t.offsetWidth,c=t.offsetHeight,h=(a-l)/2+s,p=(f-c)*382/1e3+o,d=t.style;return d.left=Math.max(parseInt(h),s)+"px",d.top=Math.max(parseInt(p),o)+"px",this._follow&&(this._follow.removeAttribute(u+"follow"),this._follow=null),this},size:function(e,t){var n=this.dom.main[0].style;return typeof e=="number"&&(e+="px"),typeof t=="number"&&(t+="px"),n.width=e,n.height=t,this},follow:function(t){var n=e(t),r=this.config;if(!t||!t.offsetWidth&&!t.offsetHeight)return this.position(this._left,this._top);var i=r.fixed,s=u+"follow",o=this.dom,a=o.window,f=o.document,l=a.width(),c=a.height(),h=f.scrollLeft(),p=f.scrollTop(),d=n.offset(),v=t.offsetWidth,m=t.offsetHeight,g=i?d.left-h:d.left,y=i?d.top-p:d.top,b=this.dom.wrap[0],w=b.style,E=b.offsetWidth,S=b.offsetHeight,x=g-(E-v)/2,T=y+m,N=i?0:h,C=i?0:p;return x=xl&&g-E>N?g-E+v:x,T=T+S>c+C&&y-S>C?y-S:T,w.left=parseInt(x)+"px",w.top=parseInt(T)+"px",this._follow&&this._follow.removeAttribute(s),this._follow=t,t[s]=r.id,this},button:function(){var t=this.dom,n=t.buttons,r=n[0],i="d-state-highlight",s=this._listeners=this._listeners||{},o=[].slice.call(arguments),a=0,f,l,c,h,p;for(;aloading..
',title:"message",button:null,ok:null,cancel:null,initialize:null,beforeunload:null,okValue:"ok",cancelValue:"cancel",width:"auto",height:"auto",padding:"20px 25px",skin:null,time:null,esc:!0,focus:!0,visible:!0,follow:null,lock:!1,fixed:!1,zIndex:1987},this.artDialog=e.dialog=e.artDialog=c})(this.art||this.jQuery,this) \ No newline at end of file +*/!function(a,b,c){function n(a){var b=m.focus;b&&b._isLock&&!b.dom.wrap[0].contains(a.target)&&(a.stopPropagation(),b.dom.outer[0].focus())}if("BackCompat"===document.compatMode)throw new Error("artDialog: Document types require more than xhtml1.0");var d,e=0,g=(a(document.getElementsByTagName("html")[0]),"artDialog"+ +new Date),h=b.VBArray&&!b.XMLHttpRequest,i="createTouch"in document&&!("onmousemove"in document)||/(iPhone|iPad|iPod)/i.test(navigator.userAgent),j=!h&&!i,k=function(){try{return document.activeElement}catch(a){}},l=k(),m=function(a,b,f){a=a||{},("string"==typeof a||1===a.nodeType)&&(a={content:a,fixed:!i});var h,k=m.defaults,l=a.follow=1===this.nodeType&&this||a.follow;for(var n in k)a[n]===c&&(a[n]=k[n]);return a.id=l&&l[g+"follow"]||a.id||g+e,(h=m.list[a.id])?(l&&h.follow(l),h.zIndex().focus(),h):(j||(a.fixed=!1),a.button&&a.button.push||(a.button=[]),b!==c&&(a.ok=b),a.ok&&a.button.push({id:"ok",value:a.okValue,callback:a.ok,focus:!0}),f!==c&&(a.cancel=f),a.cancel&&a.button.push({id:"cancel",value:a.cancelValue,callback:a.cancel}),m.defaults.zIndex=a.zIndex,e++,m.list[a.id]=d?d._create(a):new m.fn._create(a))};m.version="5.0.4",m.fn=m.prototype={_create:function(a){var b;return this.closed=!1,this.config=a,this.dom=b=this.dom||this._innerHTML(a),a.skin&&b.wrap.addClass(a.skin),b.wrap.css("position",a.fixed?"fixed":"absolute"),b.close[a.cancel===!1?"hide":"show"](),b.content.css("padding",a.padding),this.button.apply(this,a.button),this.title(a.title).content(a.content).size(a.width,a.height).time(a.time),this._reset(),this.zIndex(),a.lock&&this.lock(),this._addEvent(),this[a.visible?"visible":"hidden"]().focus(),d=null,a.initialize&&a.initialize.call(this),this},content:function(b){var c,d,e,f,g=this,h=this.dom.content,i=h[0];return this._elemBack&&(this._elemBack(),delete this._elemBack),"string"==typeof b?h.html(b):b&&1===b.nodeType&&(f=b.style.display,c=b.previousSibling,d=b.nextSibling,e=b.parentNode,this._elemBack=function(){c&&c.parentNode?c.parentNode.insertBefore(b,c.nextSibling):d&&d.parentNode?d.parentNode.insertBefore(b,d):e&&e.appendChild(b),b.style.display=f,g._elemBack=null},h.html(""),i.appendChild(b),a(b).show()),this._reset(),this},title:function(a){var b=this.dom,c=b.outer,d=b.title,e="d-state-noTitle";return a===!1?(d.hide().html(""),c.addClass(e)):(d.show().html(a),c.removeClass(e)),this},position:function(){var a=this.dom,b=a.wrap[0],c=a.window,d=a.document,e=this.config.fixed,f=e?0:d.scrollLeft(),h=e?0:d.scrollTop(),i=c.width(),j=c.height(),k=b.offsetWidth,l=b.offsetHeight,m=(i-k)/2+f,n=382*(j-l)/1e3+h,o=b.style;return o.left=Math.max(parseInt(m),f)+"px",o.top=Math.max(parseInt(n),h)+"px",this._follow&&(this._follow.removeAttribute(g+"follow"),this._follow=null),this},size:function(a,b){var c=this.dom.main[0].style;return"number"==typeof a&&(a+="px"),"number"==typeof b&&(b+="px"),c.width=a,c.height=b,this},follow:function(b){var c=a(b),d=this.config;if(!b||!b.offsetWidth&&!b.offsetHeight)return this.position(this._left,this._top);var e=d.fixed,f=g+"follow",h=this.dom,i=h.window,j=h.document,k=i.width(),l=i.height(),m=j.scrollLeft(),n=j.scrollTop(),o=c.offset(),p=b.offsetWidth,q=b.offsetHeight,r=e?o.left-m:o.left,s=e?o.top-n:o.top,t=this.dom.wrap[0],u=t.style,v=t.offsetWidth,w=t.offsetHeight,x=r-(v-p)/2,y=s+q,z=e?0:m,A=e?0:n;return x=z>x?r:x+v>k&&r-v>z?r-v+p:x,y=y+w>l+A&&s-w>A?s-w:y,u.left=parseInt(x)+"px",u.top=parseInt(y)+"px",this._follow&&this._follow.removeAttribute(f),this._follow=b,b[f]=d.id,this},button:function(){for(var j,k,l,m,n,b=this.dom,c=b.buttons,d=c[0],e="d-state-highlight",f=this._listeners=this._listeners||{},h=[].slice.call(arguments),i=0;ig;g++)f=i[g].className.split("d-")[1],f&&(h[f]=a(i[g]));return h.window=a(b),h.document=a(document),h.wrap=a(e),h},_click:function(a){var b=this._listeners[a]&&this._listeners[a].callback;return"function"!=typeof b||b.call(this)!==!1?this.close():this},_reset:function(){var a=this.config.follow||this._follow;a?this.follow(a):this.position()},_addEvent:function(){var a=this,b=this.dom;b.wrap.bind("click",function(c){var e,d=c.target;return d.disabled?!1:d===b.close[0]?(a._click("cancel"),!1):(e=d[g+"callback"],e&&a._click(e),void 0)}).bind("mousedown",function(){a.zIndex()})},_removeEvent:function(){this.dom.wrap.unbind()}},m.fn._create.prototype=m.fn,a.fn.dialog=a.fn.artDialog=function(){var a=arguments;return this[this.live?"live":"bind"]("click",function(){return m.apply(this,a),!1}),this},m.focus=null,m.get=function(a){return a===c?m.list:m.list[a]},m.list={},a(document).bind("keydown",function(a){var b=a.target,c=b.nodeName,d=/^input|textarea$/i,e=m.focus,f=a.keyCode;!e||d.test(c)&&"button"!==b.type||27===f&&e._click("cancel")}),a.fn.live?a("body").live("focus",n):document.addEventListener?document.addEventListener("focus",n,!0):a(document).bind("focusin",n),a(b).bind("resize",function(){var a=m.list;for(var b in a)a[b]._reset()}),m._templates='',m.defaults={content:'
loading..
',title:"message",button:null,ok:null,cancel:null,initialize:null,beforeunload:null,okValue:"ok",cancelValue:"cancel",width:"auto",height:"auto",padding:"20px 25px",skin:null,time:null,visible:!0,follow:null,lock:!1,fixed:!1,zIndex:1987},this.artDialog=a.dialog=a.artDialog=m}(this.art||this.jQuery,this); \ No newline at end of file diff --git a/source/artDialog.js b/source/artDialog.js index 9a8add5..3d52798 100644 --- a/source/artDialog.js +++ b/source/artDialog.js @@ -1,6 +1,6 @@ /*! * artDialog 5.0.4 -* Date: 2013-02-24 +* Date: 2013-07-31 * https://github.com/aui/artDialog * (c) 2009-2013 TangBin, http://www.planeArt.cn * @@ -572,15 +572,24 @@ if (document.compatMode === 'BackCompat') { throw new Error('artDialog: Document types require more than xhtml1.0'); }; + + var _singleton, _count = 0, - _activeElement = document.activeElement, _root = $(document.getElementsByTagName('html')[0]), _expando = 'artDialog' + (+ new Date), _isIE6 = window.VBArray && !window.XMLHttpRequest, _isMobile = 'createTouch' in document && !('onmousemove' in document) || /(iPhone|iPad|iPod)/i.test(navigator.userAgent), - _isFixed = !_isIE6 && !_isMobile; + _isFixed = !_isIE6 && !_isMobile, + _getActive = function () { + try { + // bug: ie8~9, iframe #26 + return document.activeElement; + } catch (e) { + } + }, + _activeElement = _getActive(); var artDialog = function (config, ok, cancel) { @@ -1115,11 +1124,12 @@ artDialog.fn = artDialog.prototype = { var that = this, isFocus = function () { - return that.dom.wrap[0].contains(document.activeElement); + var activeElement = _getActive(); + return activeElement && that.dom.wrap[0].contains(activeElement); }; if (!isFocus()) { - _activeElement = document.activeElement; + _activeElement = _getActive(); } setTimeout(function () { @@ -1427,7 +1437,7 @@ artDialog._templates = + '' + '
' + '
' -+ '×' ++ '×' + '
' + '' + '' diff --git a/source/jquery.artDialog.js b/source/jquery.artDialog.js index 66cd756..c3f9b03 100644 --- a/source/jquery.artDialog.js +++ b/source/jquery.artDialog.js @@ -1,6 +1,6 @@ /*! -* artDialog 5.0.3 -* Date: 2013-02-20 +* artDialog 5.0.4 +* Date: 2013-07-31 * https://github.com/aui/artDialog * (c) 2009-2013 TangBin, http://www.planeArt.cn * @@ -8,7 +8,6 @@ * For details, see: http://creativecommons.org/licenses/LGPL/2.1/ */ - ;(function ($, window, undefined) { // artDialog 只支持 xhtml 1.0 或者以上的 DOCTYPE 声明 @@ -16,15 +15,24 @@ if (document.compatMode === 'BackCompat') { throw new Error('artDialog: Document types require more than xhtml1.0'); }; + + var _singleton, _count = 0, - _activeElement = document.activeElement, _root = $(document.getElementsByTagName('html')[0]), _expando = 'artDialog' + (+ new Date), _isIE6 = window.VBArray && !window.XMLHttpRequest, _isMobile = 'createTouch' in document && !('onmousemove' in document) || /(iPhone|iPad|iPod)/i.test(navigator.userAgent), - _isFixed = !_isIE6 && !_isMobile; + _isFixed = !_isIE6 && !_isMobile, + _getActive = function () { + try { + // bug: ie8~9, iframe #26 + return document.activeElement; + } catch (e) { + } + }, + _activeElement = _getActive(); var artDialog = function (config, ok, cancel) { @@ -59,7 +67,6 @@ var artDialog = function (config, ok, cancel) { api.follow(elem) }; api.zIndex().focus(); - _activeElement = document.activeElement; return api; }; @@ -110,18 +117,16 @@ var artDialog = function (config, ok, cancel) { _count ++; return artDialog.list[config.id] = _singleton ? - _singleton.constructor(config) : new artDialog.fn.constructor(config); + _singleton._create(config) : new artDialog.fn._create(config); }; -artDialog.version = '5.0.3'; +artDialog.version = '5.0.4'; artDialog.fn = artDialog.prototype = { - /** @inner */ - constructor: function (config) { - var dom; - _activeElement = document.activeElement; + _create: function (config) { + var dom; this.closed = false; this.config = config; @@ -560,16 +565,26 @@ artDialog.fn = artDialog.prototype = { /** @inner 设置焦点 */ focus: function () { - if (this.config.focus) { - //setTimeout(function () { + var that = this, + isFocus = function () { + var activeElement = _getActive(); + return activeElement && that.dom.wrap[0].contains(activeElement); + }; + + if (!isFocus()) { + _activeElement = _getActive(); + } + + setTimeout(function () { + if (!isFocus()) { try { - var elem = this._focus && this._focus[0] || this.dom.close[0]; - elem && elem.focus(); + var elem = that._focus || that.dom.close || taht.dom.wrap; + elem[0].focus(); // IE对不可见元素设置焦点会报错 } catch (e) {}; - //}, 0); - }; - + } + }, 16); + return this; }, @@ -761,10 +776,11 @@ artDialog.fn = artDialog.prototype = { }; -artDialog.fn.constructor.prototype = artDialog.fn; +artDialog.fn._create.prototype = artDialog.fn; +// 快捷方式绑定触发元素 $.fn.dialog = $.fn.artDialog = function () { var config = arguments; this[this.live ? 'live' : 'bind']('click', function () { @@ -804,7 +820,7 @@ $(document).bind('keydown', function (event) { api = artDialog.focus, keyCode = event.keyCode; - if (!api || !api.config.esc || rinput.test(nodeName) && target.type !== 'button') { + if (!api || rinput.test(nodeName) && target.type !== 'button') { return; }; @@ -818,15 +834,17 @@ function focusin (event) { var api = artDialog.focus; if (api && api._isLock && !api.dom.wrap[0].contains(event.target)) { event.stopPropagation(); - api.focus(); + api.dom.outer[0].focus(); } } if ($.fn.live) { $('body').live('focus', focusin); -}/* else if (document.addEventListener) { +} else if (document.addEventListener) { document.addEventListener('focus', focusin, true); -}*/ +} else { + $(document).bind('focusin', focusin); +} @@ -862,7 +880,7 @@ artDialog._templates = + '' + '
' + '
' -+ '×' ++ '×' + '
' + '' + '' @@ -937,15 +955,9 @@ artDialog.defaults = { // 皮肤名(多皮肤共存预留接口) skin: null, - // 自动关闭时间 + // 自动关闭时间(毫秒) time: null, - - // 是否支持Esc键关闭 - esc: true, - - // 是否支持对话框按钮自动聚焦 - focus: true, - + // 初始化后是否显示对话框 visible: true,