关于jquery的jquery.zclip.js在使用时隐藏元素失效讨论
来源:互联网 发布:php企业站 编辑:程序博客网 时间:2024/06/09 13:47
今天在做一个粘贴功能时,想在元素加载dom节点的时候也就是 $(function() {})的时候 对一个隐藏元素绑定 jquery.zclip.js 的zclip方法
$("#copyBt").zclip({
path:'http://static.zqgame.com/js/ZeroClipboard.swf',
copy:function(){
var copyText = $(this).prev().val();
if(!copyText || " " == copyText){
return null;
}
return copyText;
},
afterCopy:function(){
alert("已经成功复制到您的剪贴板!");
}
});
但是发现绑定的click按钮始终不能复制成功,纠结了一天,调试了一天也没有解决。后来把上面这段代码放在隐藏元素显示之后去绑定按钮发现 复制功能能成功使用。然后去寻找原因发现
在jquery.zclip.js的源码中 其实有这样的判断
if (o.is(':visible') && (typeof settings.copy == 'string' || $.isFunction(settings.copy))) {
ZeroClipboard.setMoviePath(settings.path);
var clip = new ZeroClipboard.Client();
if ($.isFunction(settings.copy)) {
o.bind('zClip_copy', settings.copy);
}
if ($.isFunction(settings.beforeCopy)) {
o.bind('zClip_beforeCopy', settings.beforeCopy);
}
if ($.isFunction(settings.afterCopy)) {
o.bind('zClip_afterCopy', settings.afterCopy);
}
发现其实作者在一开始就判断元素是否是visible的如果是可见的才给元素绑定zClip_copy这些的功能
在后面的代码中
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)) {
alert($(obj).val());
info.left += obj.offsetLeft;
info.top += obj.offsetTop;
}
return info;
},
它会调用元素的offsetLeft方法获取他的位置,如果隐藏元素是会返回为0,Zclip复制的原理是给元素上面覆盖一层SWF的层所以如果找不到元素的位置也就不会给元素覆盖一层SWF了 所以作者一开始就 判断了VISIBLE
终于找到原因了,弄懂原理还是很激动
1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏,载入页面后,在没有通过js设置样式使元素显示的前提下,使用js代码会无法正确获得该元素的一些属性,比如offSetTop,offSetLeft等,返回的值会为0,通过js设置style.display来使元素显示后才能正确获得这些值。
- 关于jquery的jquery.zclip.js在使用时隐藏元素失效讨论
- jquery.zclip的例子
- jquery zclip 复制插件的使用
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
- Easyui中使用jquery或js动态添加元素时出现的样式失效的解决方法
- 【jQuery】使用jQuery.Actual.js插件获取隐藏元素的高和宽
- EasyUI中,使用jquery或者js动态添加元素,验证失效的解决办法
- 关于jquery和zepto.js判断元素的可见性并显示或隐藏总结
- js/jquery关于元素坐标的总结
- JS加jquery实现标签元素的显示或隐藏
- jquery的选择器$('')在IE6下对JS动态生成(比如ajax生成的)的元素失效的解决办法
- 1、input hidden change事件失效2、html通过js追加的元素jquery事件失效
- jquery-zclip插件
- jquery-zclip插件
- jquery-zclip插件
- jquery-zclip插件
- jquery-zclip插件
- 求无向图的割点 (poj 1144 Network)
- 分类精度评价方法
- 使用Android Studio打包含带有源码的AAR包
- jsp编码
- android 将数据读写到SD卡
- 关于jquery的jquery.zclip.js在使用时隐藏元素失效讨论
- 这个错误是由于强制要求应用程序按照多国语言的模式开发,避免死的字符串。
- Project Euler Problem 16
- IOS点击空白处隐藏键盘的几种方法
- Android ViewGroup触摸事件拦截详解
- Hadoop SequcenceFile 处理多个小文件
- POJ1703 Find them,Catch them
- WCF实现消息推送(单向操作/观察者模式)
- LoadRunner函数详解之web_reg_find