diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..ed25130 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 1d0cd85..ccbfeac 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,13 @@ -artDialog -========= +# artDialog +=========== -优雅的web对话框控件 +###### 优雅的web对话框控件 -artDialog 是一个精心设计的对话框控件,它拥有精致的界面与易用的编程接口。 +artDialog 是一个精心设计的对话框控件,它拥有精致的界面与易用的编程接口。 + +**演示与文档:** + + ## 概述 @@ -11,31 +15,38 @@ artDialog 是一个精心设计的 web 对话框控件,它继承与延伸了 ## 特点 -#### 自适应内容尺寸 +#### 1. 自适应内容尺寸 -对话框采用特殊UI结构,无论使用AJAX异步填充内容还是类似tabs等控件导致内容变化,对话框均可自动自适应内容尺寸。 +> 对话框采用特殊UI结构,无论使用AJAX异步填充内容还是类似tabs等控件导致内容变化,对话框均可自动自适应内容尺寸。 -#### 智能文本对齐 +#### 2. 智能文本对齐 -如果设置了对话框宽度(包括用户通过调节把柄改变了尺寸),对话框中的文本会自动居中或者居左对齐,这些都是使用用CSS实现的。 +> 如果设置了对话框宽度(包括用户通过调节把柄改变了尺寸),对话框中的文本会自动居中或者居左对齐,这些都是使用用CSS实现的。 -#### 黄金比例垂直居中 +#### 3. 黄金比例垂直居中 -对话框默认会采用黄金比例垂直居中弹出,正如网页中重要的内容会被安排在垂直黄金区域一样,这样更舒适。 +> 对话框默认会采用黄金比例垂直居中弹出,正如网页中重要的内容会被安排在垂直黄金区域一样,这样更舒适。 -#### 可吸附式弹出 +#### 4. 可定位到元素附近 -宽屏笔记本用户已经逐渐成为主流,很多时候大幅度的移动鼠标操作也是一个麻烦的事情(尤其是使用触控板),artDialog支持设置在onclick事件触发源弹出,以让用户操作更加便捷。 +> 宽屏笔记本用户已经逐渐成为主流,很多时候大幅度的移动鼠标操作也是一个麻烦的事情(尤其是使用触控板),artDialog支持设置在onclick事件触发源弹出,以让用户操作更加便捷。 -#### 支持快捷键与默认焦点 +#### 5. 支持键盘操作 -* ESC快捷键默认触发对话框关闭(除非在输入状态)。 +> * ESC键可关闭对话框。 -* 若有确定按钮,焦点默认停留在确定按钮上,否则停留在右上角关闭按钮上,这样用户可以通过回车键进行操作。 +> * 若有确定按钮,焦点默认停留在确定按钮上,否则停留在右上角关闭按钮上。 + +> * 对话框关闭后焦点将恢复至原来的元素。 + +### 6. 支持信息无障碍(ARIA) + +> 支持读屏器操作,让盲人能够平等的获取信息。 + -### 友好的API +### 7. 友好的API -在保持小巧的程序体积之外,artDialog提供了丰富的可选配置与方法。它的API风格统一,简单易用,稍微阅读文档一个示例即可举一反三。 +> 在保持小巧的程序体积之外,artDialog提供了丰富的可选配置与方法。它的API风格统一,简单易用,稍微阅读文档一个示例即可举一反三。 ## 用户 @@ -43,8 +54,133 @@ artDialog 是一个精心设计的 web 对话框控件,它继承与延伸了 * 盛大 * 中国移动 * 中国电信 -* ... - -## 演示 - -http://aui.github.com/artDialog/ \ No newline at end of file +* ... + +## 更新记录 + +### 5.0.4 + +1. 取消 focus 参数,对话框能自动处理 +2. 取消鸡肋的 esc 参数 +3. 给关闭按钮增加 title,以便让读屏器正常发音(感谢 @杨永全 老师的建议) +4. 解决 iframe 页面中上一版报错问题(ie8,9)#26 #21 + +### 5.0.3 + +1. **支持信息无障碍(ARIA)** +2. 锁屏可限制焦点元素保持在对话框内 +3. 对话框关闭后焦点将恢复至原来的元素 + +### 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支持] + +源码: + +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..de573c8 100644 --- a/artDialog.min.js +++ b/artDialog.min.js @@ -1,9 +1,9 @@ /*! -* artDialog 5.0.2 -* Date: 2012-11-11 +* artDialog 5.0.4 +* Date: 2013-07-31 * 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(a,b){function f(a,b,c){b=b||document,c=c||"*";for(var d=0,e=0,f=[],g=b.getElementsByTagName(c),h=g.length,i=new RegExp("(^|\\s)"+a+"(\\s|$)");h>d;d++)i.test(g[d].className)&&(f[e]=g[d],e++);return f}function g(d){var e=c.expando,f=d===a?0:d[e];return f===b&&(d[e]=f=++c.uuid),f}function h(a){return c.isWindow(a)?a:9===a.nodeType?a.defaultView||a.parentWindow:!1}var c=a.art=function(a,b){return new c.fn.constructor(a,b)},d=/^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]+)$)/,e=/[\n\t]/g;return a.$===b&&(a.$=c),c.fn=c.prototype={constructor:function(a,b){var c,e;return b=b||document,a?a.nodeType?(this[0]=a,this):"string"==typeof a&&(c=d.exec(a),c&&c[2])?(e=b.getElementById(c[2]),e&&e.parentNode&&(this[0]=e),this):(this[0]=a,this):this},hasClass:function(a){var b=" "+a+" ";return(" "+this[0].className+" ").replace(e," ").indexOf(b)>-1?!0:!1},addClass:function(a){return this.hasClass(a)||(this[0].className+=" "+a),this},removeClass:function(a){var b=this[0];return a?this.hasClass(a)&&(b.className=b.className.replace(a," ")):b.className="",this},css:function(a,d){var e,f=this[0],g=arguments[0];if("string"==typeof a){if(d===b)return c.css(f,a);f.style[a]=d}else for(e in g)f.style[e]=g[e];return this},show:function(){return this.css("display","block")},hide:function(){return this.css("display","none")},offset:function(){var a=this[0],b=a.getBoundingClientRect(),c=a.ownerDocument,d=c.body,e=c.documentElement,f=e.clientTop||d.clientTop||0,g=e.clientLeft||d.clientLeft||0,h=b.top+(self.pageYOffset||e.scrollTop)-f,i=b.left+(self.pageXOffset||e.scrollLeft)-g;return{left:i,top:h}},html:function(a){var d=this[0];return a===b?d.innerHTML:(c.cleanData(d.getElementsByTagName("*")),d.innerHTML=a,this)},remove:function(){var a=this[0];return c.cleanData(a.getElementsByTagName("*")),c.cleanData([a]),a.parentNode.removeChild(a),this},bind:function(a,b){return c.event.add(this[0],a,b),this},unbind:function(a,b){return c.event.remove(this[0],a,b),this}},c.fn.constructor.prototype=c.fn,c.isWindow=function(a){return a&&"object"==typeof a&&"setInterval"in a},c.fn.find=function(a){var b,d=this[0],e=a.split(".")[1];return b=e?document.getElementsByClassName?d.getElementsByClassName(e):f(e,d):d.getElementsByTagName(a),c(b[0])},c.each=function(a,c){var d,e=0,f=a.length,g=f===b;if(g){for(d in a)if(c.call(a[d],d,a[d])===!1)break}else for(var h=a[0];f>e&&c.call(h,e,h)!==!1;h=a[++e]);return a},c.data=function(a,d,e){var f=c.cache,h=g(a);return d===b?f[h]:(f[h]||(f[h]={}),e!==b&&(f[h][d]=e),f[h][d])},c.removeData=function(a,b){var d=!0,e=c.expando,f=c.cache,h=g(a),i=h&&f[h];if(i)if(b){delete i[b];for(var j in i)d=!1;d&&delete c.cache[h]}else delete f[h],a.removeAttribute?a.removeAttribute(e):a[e]=null},c.uuid=0,c.cache={},c.expando="@cache"+ +new Date,c.event={add:function(a,b,d){var e,f,g=c.event,h=c.data(a,"@events")||c.data(a,"@events",{});e=h[b]=h[b]||{},f=e.listeners=e.listeners||[],f.push(d),e.handler||(e.elem=a,e.handler=g.handler(e),a.addEventListener?a.addEventListener(b,e.handler,!1):a.attachEvent("on"+b,e.handler))},remove:function(a,b,d){var e,f,g,h=c.event,i=!0,j=c.data(a,"@events");if(j)if(b){if(f=j[b]){if(g=f.listeners,d)for(e=0;eb;b++)d=a[b],f(d),g(d)},c.css="defaultView"in document&&"getComputedStyle"in document.defaultView?function(a,b){return document.defaultView.getComputedStyle(a,!1)[b]}:function(a,b){return a.currentStyle[b]||""},c.each(["Left","Top"],function(a,b){var d="scroll"+b;c.fn[d]=function(){var c,b=this[0];return c=h(b),c?"pageXOffset"in c?c[a?"pageYOffset":"pageXOffset"]:c.document.documentElement[d]||c.document.body[d]:b[d]}}),c.each(["Height","Width"],function(a,b){var d=b.toLowerCase();c.fn[d]=function(a){var d=this[0];return d?c.isWindow(d)?d.document.documentElement["client"+b]||d.document.body["client"+b]:9===d.nodeType?Math.max(d.documentElement["client"+b],d.body["scroll"+b],d.documentElement["scroll"+b],d.body["offset"+b],d.documentElement["offset"+b]):null:null==a?null:this}}),c}(window),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/index.html b/index.html index ad5879c..c218b79 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..c3f9b03 100644 --- a/source/jquery.artDialog.js +++ b/source/jquery.artDialog.js @@ -1,8 +1,8 @@ /*! -* artDialog 5.0.2 -* Date: 2012-11-11 +* artDialog 5.0.4 +* Date: 2013-07-31 * 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/ @@ -15,14 +15,24 @@ if (document.compatMode === 'BackCompat') { throw new Error('artDialog: Document types require more than xhtml1.0'); }; + + var _singleton, _count = 0, _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), - _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) { @@ -62,7 +72,7 @@ var artDialog = function (config, ok, cancel) { - // 目前主流移动设备对fixed支持不好 + // 目前主流移动设备对fixed支持不好,禁用此特性 if (!_isFixed) { config.fixed = false; }; @@ -107,20 +117,20 @@ 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.2'; +artDialog.version = '5.0.4'; artDialog.fn = artDialog.prototype = { - /** @inner */ - constructor: function (config) { + + _create: function (config) { var dom; 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 +530,11 @@ artDialog.fn = artDialog.prototype = { this.hidden(); }; + + // 恢复焦点,照顾键盘操作的用户 + if (_activeElement) { + _activeElement.focus(); + } this.closed = true; return this; @@ -550,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; }, @@ -652,7 +677,7 @@ artDialog.fn = artDialog.prototype = { // 获取元素 - _getDom: function () { + _innerHTML: function (data) { var body = document.body; @@ -663,7 +688,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, @@ -745,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 () { @@ -788,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; }; @@ -797,6 +829,24 @@ $(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.dom.outer[0].focus(); + } +} + +if ($.fn.live) { + $('body').live('focus', focusin); +} else if (document.addEventListener) { + document.addEventListener('focus', focusin, true); +} else { + $(document).bind('focusin', focusin); +} + + // 浏览器窗口改变后重置对话框位置 $(window).bind('resize', function () { @@ -812,7 +862,7 @@ $(window).bind('resize', function () { // 使用 uglifyjs 压缩能够预先处理"+"号合并字符串 // @see http://marijnhaverbeke.nl/uglifyjs artDialog._templates = -'
' +'