Js+Flash實現(xiàn)訪問剪切板操作

更新時間：2012年11月20日 09:27:17 作者：

最近需要遇到了這個問題點擊按鈕復制鏈接的功能果斷度娘谷哥,最后找到得解決方案ZeroClipBoard一款開源得js+Flash實現(xiàn)得剪切板操作

最近需要遇到了這個問題點擊按鈕復制鏈接的功能果斷度娘谷哥。最后找到得解決方案ZeroClipBoard一款開源得js+Flash實現(xiàn)得剪切板操作
但是搜尋了眾多例子之后發(fā)現(xiàn)大多都是介紹一個頁面只有一個固定的復制操作

而我得需求是這樣
一個動態(tài)Repeater動態(tài)加載出各個地址和復制按鈕。
這個解決方案得原理是：
拿js動態(tài)加載一個透明flash.然后遮蓋到你要點擊得按鈕上面,之后在給這個flash得承載元素上綁定事件動態(tài)把要復制得值傳遞到flash中,用flash訪問剪切板.
這時候就出現(xiàn)這么一個問題多個按鈕如果每個按鈕都加栽一遍flash得話會很吃內(nèi)存并且動態(tài)得代碼也不是很好寫
最后得解決方案如下:

復制代碼代碼如下:

 
<divid="ClipSwf"style="left:-1000px;position:absolute;width:80px;height:25px;"></div> 

1.現(xiàn)在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.在各個復制按鈕上動態(tài)綁定事件并把響應的要復制得值或者控件傳遞到function中之后設置隱藏flash容器得left,top邊距讓其漂浮在觸發(fā)該事件得按鈕上并把要復制的值通過
Clip.setText('text')(插件提供得方法)傳遞給flash這樣就實現(xiàn)了多個按鈕復制得功能
未解決問題,原本按鈕得hovercss切換效果flash遮蓋之后就不太靈活了。用jquery動態(tài)添加樣式效果也不太好。

您可能感興趣的文章: