製做剪切板複製功能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的樣式！這樣咱們就清楚須要修改什麼就修改什麼！！！若有問題請留言！！！