製作剪下板複製功能ZeroClipboard中修改flash覆蓋面積大小
阿新 • • 發佈:2018-12-06
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]);
如果有興趣去看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");
}
});