jQuery ZeroClipboard中Flash定位不准确的解决方案
转自波斯马,原文地址《jQuery ZeroClipboard中Flash定位不准确的解决方案》
jQuery ZeroClipboard支持在多种浏览器中复制内容到剪贴板,IE、Firefox、Chrome等等都不在话下。其本身作为jQuery的一个插件封装了Zero Clioborad,其实现原理就是在要点击的按钮或链接上覆盖一个透明的Flash,实际上用户点击的是Flash,复制到剪贴板也是通过此Flash实现的。
大家用的很Happy,但是我用的时候发现点击按钮没有反应,后来发现是Flash出现的位置不对,可能原作者写的时候没有在复杂的样式环境下测试过。Flash的位置是动态设定的,找到其源码查看,发现一处可能有问题的地方:
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;
},
注意下边这两句:
info.left += obj.offsetLeft;
info.top += obj.offsetTop;
obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素;obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。实际测试获取到的是相对于上层控件的位置。
但是在创建浮动层的时候,定位方式使用了absolute,同时设置top,left为上边的值:
// 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的方法既可以了:
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 ZeroClipboard中Flash定位不准确的解决方案的更多相关文章
- jquery ZeroClipboard实现黏贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- IOS中GPS定位偏移纠正(适用于Google地图)
在这个神奇的国度里,我们总得学习一些有中国特色的东东,例如“火星坐标”.也许有人还不知道这是什么玩意,我就简要介绍一下吧. 如果你有带GPS模块的智能手机,打开定位功能,然后访问Google ...
- 详细解读-this-关键字在全局、函数、对象、jQuery等中的基础用法!
一.前言 1. Javascript是一门基于对象的动态语言,也就是说,所有东西都是对象,一个很典型的例子就是函数也被视为普通的对象.Javascript可以通过一定的设计模式来实现面向对象的编程,其 ...
- css中的定位属性position(转)
css中的定位属性position 同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...
- jQuery插件中的this指的是什么
在jQuery插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 但是在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素.这常常会导致开发者误将 ...
- 详解jquery插件中;(function ( $, window, document, undefined )的作用
在jquery插件中我们经常看到以下这段代码 1 2 3 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, wi ...
- JQuery mobile中按钮自定义属性的改变
1..ui-mobile-viewport是jquery mobile默认给body加的class,这样的话包含选择符优先级高一点 <style> .ui-mobile-viewport ...
- 物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载)
物联网应用中实时定位与轨迹回放的解决方案 – Redis的典型运用(转载) 2015年11月14日| by: nbboy| Category: 系统设计, 缓存设计, 高性能系统 摘要 ...
- jQuery Mobile 中创建按钮
在 jQuery Mobile 中创建按钮 jQuery Mobile 中的按钮可通过三种方法创建: 使用 <button> 元素 使用 <input> 元素 使用 data- ...
随机推荐
- 从Android Handler内部类到WeakReference的知识关联
Handler: 普通使用方法: Handler用于处理和从队列MessageQueue中得到Message.一般我们要重写Handler的handleMessage(Message msg){}方法 ...
- 由于jsp include 很多文件后导致java类大小超过65535 bytes 的解决方法(转载)
昨天,我遇到了一個讓我很頭疼的問題. 我做了一個共通的jsp,單只測它是ok的,可是,放在別的jsp中include它,就會報錯如標題所示:The code of method _jspService ...
- Struts2 实战经验 之 入门
Struts2以WebWork为核心,采用拦截器机制处理用户请求,这样的设计使业务逻辑控制器能够与Servlet API完全脱离开,降低了藕联性. Part 1. 安装与配置 下载struts-2.3 ...
- HDU 5728 - PowMod
HDU 5728 - PowMod 题意: 定义: k = ∑(i=1,m) φ(i∗n) mod 1000000007 给出: n,m,p ,且 n 无平方因子 求: ans= k^(k^(k ...
- CDZSC_2015寒假新人(1)——基础 d
Description These days, I am thinking about a question, how can I get a problem as easy as A+B? It i ...
- Mysql查询高速缓存区
为了提高查询速度,Mysql会维护一个内存区域(官方文档指出,大小至少41984B)对查询结果进行缓存,当查询时发现缓存区里有数据则直接返回结果而不用去执行sql语句. 查询命中的条件 每个缓存查询至 ...
- golang illegal base64 data at input byte
//one reason is whitespace ciphertext = strings.Replace(ciphertext, " ", "", -1) ...
- 竹林蹊径-深入浅出Windows内核开发作者的博客
http://blog.csdn.net/blog_index http://blog.csdn.net/blog_index/article/details/6012054 http://downl ...
- emacs使用指南
上大学的时候使用过几个简单的命令,用上windows后除了dos很少用命令行处理问题.现在MBP在手不用用emacs多可惜啊. 我上午搜索了下资料,都说emacs是神器,但是神不神看个人啦.这东西也不 ...
- OpenLayers实现覆盖物选择信息提示
var map; function init() { map = new OpenLayers.Map("map",{projection:"EPSG:3857" ...