制做剪切板复制功能ZeroClipboard中修改flash覆盖面积大小

ZeroClipboard ：version 1.0.7

通常用法与网上发的博客差很少，今天只对如何修改flash块的大小进行说明。

先贴代码：

ZeroClipboard.setMoviePath("${base}/js/ZeroClipboard/ZeroClipboard.swf");
     var clip=new ZeroClipboard.Client();
     clip.setHandCursor(true);
     clip.reposition();
     clip.glue(document.getElementById("cpurl"),'moduleConferenceContainerPanel');
     //修改div样式;绑定按钮以后修改div，确保div和flash在按钮之上且彻底覆盖按钮【ZeroClipboard:version1.0.7】
     var stylesToAdd = new Array('absolute','1100px','119px','70','20','zIndex');
     clip.div.style.left=stylesToAdd[1];
     clip.div.style.width=stylesToAdd[3]+'px';
     clip.div.style.height=stylesToAdd[4]+'px';
     //修改flash覆盖大小
     clip.div.innerHTML=clip.getHTML(stylesToAdd[3],stylesToAdd[4]);
     clip.addEventListener('mouseDown',function(){
           clip.setText($("#wapurlcp").val());
     });
     clip.addEventListener('complete',function(){
           if($("#wapurlcp").val()==null||$("#wapurlcp").val()==""){
                $.messager.alert("提示","请选择栏目！","info");
           }
           else{
               $.messager.alert("提示","地址已成功复制！","info");
               }
     });

以上代码是要初始化页面的时候就要加载的！把flash按钮覆盖到普通按钮之上，如何设置呢（以下）：

//修改div样式;绑定按钮以后修改div，确保div和flash在按钮之上且彻底覆盖按钮【ZeroClipboard:version1.0.7】
     var stylesToAdd = new Array('absolute','1100px','119px','70','20','zIndex');
     clip.div.style.left=stylesToAdd[1];
     clip.div.style.width=stylesToAdd[3]+'px';
     clip.div.style.height=stylesToAdd[4]+'px';
     //修改flash覆盖大小
     clip.div.innerHTML=clip.getHTML(stylesToAdd[3],stylesToAdd[4]);

前提是要先把flash按钮先弄出来哦！！！还有不要只看我写的，重要的是本身去验证！

若是有兴趣去看ZeroClipboard.js里的方法！

本人第一次写，有错请指正！！！

--------------------------------------------------------------------

注：以上代码有问题，请各位包含哈！主要是把定义flash按钮的大小及套该flash按钮的div的样式修改为固定值了！！！实在........哎！

今天本身又用到该功能了，发现了一个很大的问题：虽然flash按钮大小改变了，但flash按钮的位置却发生了变化（再也不咱们button之上）。缘由分析：页面样式改变，flash按钮定位不到咱们的button了，这时你可能会说用clip.reposition()。的确这个能够重新定位咱们的button，可是有可能flash按钮并无把咱们的button彻底覆盖!因此找到如下方法：

var elem = document.getElementById("cpurl");//咱们定义的button
     var appendElem = 'moduleConferenceContainerPanel';//最外层div，也即body下的第一个div（套住咱们定义的button的div）
     ZeroClipboard.setMoviePath("${base}/js/ZeroClipboard/ZeroClipboard.swf");
     var clip=new ZeroClipboard.Client();
     clip.setHandCursor(true);
     clip.glue(elem,appendElem);
     var box = ZeroClipboard.getDOMObjectPosition(ZeroClipboard.$(elem), ZeroClipboard.$(appendElem));//在ZeroClipboard.js中找的方法，拿到flash按钮处的div样式来源！我本人看来，差很少快从新写glue（）方法了！
     //修改div样式;绑定按钮以后修改div，确保div和flash在按钮之上且彻底覆盖按钮【ZeroClipboard：version1.0.7】
     clip.div.style.left=(box.left-25)+'px';
     clip.div.style.width=(box.width+22)+'px';
     clip.div.style.height=(box.height+8)+'px';
     //修改flash覆盖大小
     clip.div.innerHTML=clip.getHTML(box.width+22,box.height+8);
     clip.addEventListener('mouseDown',function(){
           clip.setText($("#wapurlcp").val());
     });
     clip.addEventListener('complete',function(){
           if($("#wapurlcp").val()==null||$("#wapurlcp").val()==""){
                $.messager.alert("提示","请选择栏目！","info");
           }
           else{
               $.messager.alert("提示","地址已成功复制！","info");
               }
     });

这样好控制flash按钮的大小及套住flash按钮的div的样式！这样咱们就清楚须要修改什么就修改什么！！！若有问题请留言！！！