jQuery ZeroClipboard支持在多种浏览器中复制内容到剪贴板，IE、Firefox、Chrome等等都不在话下。其本身作为jQuery的一个插件封装了Zero Clioborad，其实现原理就是在要点击的按钮或链接上覆盖一个透明的Flash，实际上用户点击的是Flash，复制到剪贴板也是通过此Flash实现的。
大家用的很Happy，但是我用的时候发现点击按钮没有反应，后来发现是Flash出现的位置不对，可能原作者写的时候没有在复杂的样式环境下测试过。Flash的位置是动态设定的，找到其源码查看，发现一处可能有问题的地方：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
getDOMObjectPosition: function (obj, stopObj) { // get absolute coordinates for dom element var info = { left: 0, top: 0, width: obj.width ? obj.width : obj.offsetWidth, height: obj.height ? obj.height : obj.offsetHeight }; if (obj && (obj != stopObj)) { info.left += obj.offsetLeft; info.top += obj.offsetTop; } return info; }, |
注意下边这两句：
|
1 2 |
info.left += obj.offsetLeft; info.top += obj.offsetTop; |
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素；obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。实际测试获取到的是相对于上层控件的位置。
但是在创建浮动层的时候，定位方式使用了absolute，同时设置top，left为上边的值：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// create floating DIV above element this.div = document.createElement('div'); this.div.className = "zclip"; this.div.id = "zclip-" + this.movieId; jQuery(this.domElement).data('zclipId', 'zclip-' + this.movieId); var style = this.div.style; style.position = 'absolute'; style.left = '' + box.left + 'px'; style.top = '' + box.top + 'px'; style.width = '' + box.width + 'px'; style.height = '' + box.height + 'px'; style.zIndex = zIndex; |
实际测试是到页面上方和左侧的距离。这样就是将相对于上层控件的位置应用为了相对于整个页面的位置，所以Flash没有出现在按钮的位置。
既然明确了这个问题，那获取按钮位置的时候我们就换一种方法，因为使用了jQuery，直接上Jquery的方法既可以了：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
getDOMObjectPosition: function (obj, stopObj) { // get absolute coordinates for dom element var info = { left: 0, top: 0, width: obj.width ? obj.width : obj.offsetWidth, height: obj.height ? obj.height : obj.offsetHeight }; if (obj && (obj != stopObj)) { // 修改了这里 //info.left += obj.offsetLeft; //info.top += obj.offsetTop; info.left += $(obj).offset().left; info.top += $(obj).offset().top; } return info; }, |
对于浏览器对CSS的解析不是很了解，此方案仅适合遇到这个问题的朋友尝试下，可能最终原因还不是这个，因为貌似大家一直用的挺好。
最后附上插件地址：https://github.com/patricklodder/jquery-zclip
关键字: jquery ZeroClioborad
发表评论
相关文章
热门标签
.net core activex asp.net Cassandra code first excel Flex GridView iis JAVA jquery jsp mvc mysql PowerDesigner rabbitmq Silverlight VPN webservice WordPress XML 图片滚动 垂直滚动 多线程 导出excel 微信分享 排序算法 插件 界面原型设计 自定义控件文章分类
最新评论