zoukankan      html  css  js  c++  java
  • zClip使用时ZeroClipboard生成的位置不对的问题

    zclip官网:http://steamdev.com/zclip

    我之前在另外一篇博文里面写了一个解决生成的位置不对的问题,请参考:http://www.cnblogs.com/longshiyVip/p/4663870.html,但是最近按照之前的方式发现不管用,于是又开始需求解决方案,就是下面的这个方案。

    zClip是个很好的兼容浏览器的复制到剪贴板的解决方案。zClip在简单干净的页面时工作正常,但放到工作平台的框架里面去以后就不工作了。ZeroClipboard取到的offsetTop和offsetLeft不对。通过firebug调试半天才知道原因。

    在执行初期绑定代码后:

    <script type="text/javascript">
        $(document).ready(function () {
          $("a#copy-dynamic").zclip({
            path: 'js/ZeroClipboard.swf',
            copy: function () { return $('input#dynamic').val(); },
            afterCopy: function () { alert("ok"); }
          });
        });
      </script>

    这段代码会自动在id="copy-dynamic”的控件后生成以下代码:

    <div class="zclip" id="zclip-ZeroClipboardMovie_1" 
    style
    ="position: absolute; left: 10px; top: 33px; 258px; height: 14px; z-index: 99;"> <embed id="ZeroClipboardMovie_1" src="js/ZeroClipboard.swf" loop="false" menu="false"
    quality
    ="best" bgcolor="#ffffff" width="258" height="14" name="ZeroClipboardMovie_1"
    align
    ="middle" allowscriptaccess="always" allowfullscreen="false" type="application/x-shockwave-flash"
    pluginspage
    ="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&amp;width=258&amp;height=14"
    wmode
    ="transparent"></div>

    其本意是会在id="copy-dynamic”的控件上面覆盖“ZeroClipboard.swf”,检查发现这个位置不对,没有覆盖上去。

    修改jquery.zclip.js中的getDOMObjectPosition函数,如下所示:

    getDOMObjectPosition: function (obj, stopObj) {
            // get absolute coordinates for dom element
            var info = {
                left: 0,
                top: 0,
                 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; //修改前
              jpos = $(obj).position(); //修改后
              info.left += jpos.left; //修改后
              info.top += jpos.top; //修改后
            }
    
            return info;
        }

    这里使用了jQuery的position函数。

    重新刷新界面,发现这次生成的位置终于对了,成功覆盖到id="copy-dynamic”的控件上面,成功!

  • 相关阅读:
    定位中方向余弦矩阵(DCM)简介
    前端UI框架小汇总
    前端知识点小结
    overflow兼容iOS
    使用Flexible实现手淘H5页面的终端适配
    获取当前Javascript脚本文件的路径
    Javascript中document.execCommand()的用法 ( 实现浏览器菜单的很多功能 )
    jquery中的map()方法与js中的map()方法
    js判断是否为移动端
    页面制作注意事项
  • 原文地址:https://www.cnblogs.com/longshiyVip/p/4745011.html
Copyright © 2011-2022 走看看