最近需要遇到了這個問題點擊按鈕複製連結的功能果斷度娘穀哥。最後找到得解決方案ZeroClipBoard一款開源得js+Flash實現得剪下板操作
但是搜尋了眾多例子之後發現大多都是介紹一個頁面只有一個固定的複製操作
而我得需求是這樣
一個動態Repeater動態載入出各個地址和複製按鈕。
這個解決方案得原理是:
拿js動態載入一個透明flash.然後遮蓋到你要點擊得按鈕上面,之後在給這個flash得承載元素上綁定事件動態把要複製得值傳遞到flash中,用flash訪問剪下板.
這時候就出現這麼一個問題多個按鈕如果每個按鈕都加栽一遍flash得話會很吃記憶體並且動態得代碼也不是很好寫
最後得解決方案如下:
複製代碼 代碼如下:
<divid="ClipSwf"style="left:-1000px;position:absolute;width:80px;height:25px;"></div>
1.現在Body中放置一個隱藏得flash容器絕對位置
複製代碼 代碼如下:
varLocalUrlManage={
Clip:null,
ClipContainer:null,
InitClip:function(){
LocalUrlManage.Clip=newZeroClipboard.Client();
LocalUrlManage.ClipContainer=$("#ClipSwf");
LocalUrlManage.Clip.setHandCursor(true);
LocalUrlManage.Clip.setCSSEffects(true);
LocalUrlManage.Clip.addEventListener("complete",function(client,text){
Tip.RightTip("#UrlAdd",text+","+"複製成功!");
});
LocalUrlManage.ClipContainer.html(LocalUrlManage.Clip.getHTML(80,25));
}}
2.使用js在頁面載入完成得時候初始化剪下板的對象並設定滑鼠手勢和承載容器然後把flash輸出成html輸出到容器中
複製代碼 代碼如下:
onmouseover="LocalUrlManage.SetClipValue(this,'#copyUrlValue<%#Eval("Id")%>')">點擊複製</button>
複製代碼 代碼如下:
SetClipValue:function(obj,SelectorEl){
//BrowserClip.IEClip($(SelectorEl).val());
varoffset=$(obj).offset();
LocalUrlManage.ClipContainer.offset({left:offset.left,top:offset.top});
LocalUrlManage.Clip.setText($(SelectorEl).val());
}.
3.在各個複製按鈕上動態綁定事件並把響應的要複製得值或者控制項傳遞到function中之後設定隱藏flash容器得left,top邊距讓其漂浮在觸發該事件得按鈕上並把要複製的值通過
Clip.setText('text')(外掛程式提供得方法)傳遞給flash這樣就實現了多個按鈕複製得功能
未解決問題,原本按鈕得hovercss轉場效果flash遮蓋之後就不太靈活了。用jquery動態添加樣式效果也不太好。