Js+Flash實(shí)現(xiàn)訪問剪切板操作
更新時(shí)間:2012年11月20日 09:27:17 作者:
最近需要遇到了這個(gè)問題點(diǎn)擊按鈕復(fù)制鏈接的功能果斷度娘谷哥,最后找到得解決方案ZeroClipBoard一款開源得js+Flash實(shí)現(xiàn)得剪切板操作
最近需要遇到了這個(gè)問題點(diǎn)擊按鈕復(fù)制鏈接的功能果斷度娘谷哥。最后找到得解決方案ZeroClipBoard一款開源得js+Flash實(shí)現(xiàn)得剪切板操作
但是搜尋了眾多例子之后發(fā)現(xiàn)大多都是介紹一個(gè)頁面只有一個(gè)固定的復(fù)制操作
而我得需求是這樣
一個(gè)動態(tài)Repeater動態(tài)加載出各個(gè)地址和復(fù)制按鈕。
這個(gè)解決方案得原理是:
拿js動態(tài)加載一個(gè)透明flash.然后遮蓋到你要點(diǎn)擊得按鈕上面,之后在給這個(gè)flash得承載元素上綁定事件動態(tài)把要復(fù)制得值傳遞到flash中,用flash訪問剪切板.
這時(shí)候就出現(xiàn)這么一個(gè)問題多個(gè)按鈕如果每個(gè)按鈕都加栽一遍flash得話會很吃內(nèi)存并且動態(tài)得代碼也不是很好寫
最后得解決方案如下:
<divid="ClipSwf"style="left:-1000px;position:absolute;width:80px;height:25px;"></div>
1.現(xiàn)在Body中放置一個(gè)隱藏得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+","+"復(fù)制成功!");
});
LocalUrlManage.ClipContainer.html(LocalUrlManage.Clip.getHTML(80,25));
}}
2.使用js在頁面加載完成得時(shí)候初始化剪切板的對象并設(shè)置鼠標(biāo)手勢和承載容器然后把flash輸出成html輸出到容器中
onmouseover="LocalUrlManage.SetClipValue(this,'#copyUrlValue<%#Eval("Id")%>')">點(diǎn)擊復(fù)制</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.在各個(gè)復(fù)制按鈕上動態(tài)綁定事件并把響應(yīng)的要復(fù)制得值或者控件傳遞到function中之后設(shè)置隱藏flash容器得left,top邊距讓其漂浮在觸發(fā)該事件得按鈕上并把要復(fù)制的值通過
Clip.setText('text')(插件提供得方法)傳遞給flash這樣就實(shí)現(xiàn)了多個(gè)按鈕復(fù)制得功能
未解決問題,原本按鈕得hovercss切換效果flash遮蓋之后就不太靈活了。用jquery動態(tài)添加樣式效果也不太好。
但是搜尋了眾多例子之后發(fā)現(xiàn)大多都是介紹一個(gè)頁面只有一個(gè)固定的復(fù)制操作

而我得需求是這樣
一個(gè)動態(tài)Repeater動態(tài)加載出各個(gè)地址和復(fù)制按鈕。
這個(gè)解決方案得原理是:
拿js動態(tài)加載一個(gè)透明flash.然后遮蓋到你要點(diǎn)擊得按鈕上面,之后在給這個(gè)flash得承載元素上綁定事件動態(tài)把要復(fù)制得值傳遞到flash中,用flash訪問剪切板.
這時(shí)候就出現(xiàn)這么一個(gè)問題多個(gè)按鈕如果每個(gè)按鈕都加栽一遍flash得話會很吃內(nèi)存并且動態(tài)得代碼也不是很好寫
最后得解決方案如下:
復(fù)制代碼 代碼如下:
<divid="ClipSwf"style="left:-1000px;position:absolute;width:80px;height:25px;"></div>
1.現(xiàn)在Body中放置一個(gè)隱藏得flash容器絕對定位
復(fù)制代碼 代碼如下:
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+","+"復(fù)制成功!");
});
LocalUrlManage.ClipContainer.html(LocalUrlManage.Clip.getHTML(80,25));
}}
2.使用js在頁面加載完成得時(shí)候初始化剪切板的對象并設(shè)置鼠標(biāo)手勢和承載容器然后把flash輸出成html輸出到容器中
復(fù)制代碼 代碼如下:
onmouseover="LocalUrlManage.SetClipValue(this,'#copyUrlValue<%#Eval("Id")%>')">點(diǎn)擊復(fù)制</button>
復(fù)制代碼 代碼如下:
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.在各個(gè)復(fù)制按鈕上動態(tài)綁定事件并把響應(yīng)的要復(fù)制得值或者控件傳遞到function中之后設(shè)置隱藏flash容器得left,top邊距讓其漂浮在觸發(fā)該事件得按鈕上并把要復(fù)制的值通過
Clip.setText('text')(插件提供得方法)傳遞給flash這樣就實(shí)現(xiàn)了多個(gè)按鈕復(fù)制得功能
未解決問題,原本按鈕得hovercss切換效果flash遮蓋之后就不太靈活了。用jquery動態(tài)添加樣式效果也不太好。
您可能感興趣的文章:
- 瀏覽器復(fù)制插件zeroclipboard使用指南
- ZeroClipboard插件實(shí)現(xiàn)多瀏覽器復(fù)制功能(支持firefox、chrome、ie6)
- 使用ZeroClipboard解決跨瀏覽器復(fù)制到剪貼板的問題
- zeroclipboard 單個(gè)復(fù)制按鈕和多個(gè)復(fù)制按鈕的實(shí)現(xiàn)方法
- zeroclipboard復(fù)制到剪切板的flash
- js 剪切板應(yīng)用clipboardData詳細(xì)解析
- js復(fù)制到剪切板的實(shí)例方法
- js 剪切板的用法(clipboardData.setData)與js match函數(shù)介紹
- JS將制定內(nèi)容復(fù)制到剪切板示例代碼
- JavaScript使用ZeroClipboard操作剪切板
相關(guān)文章
from表單多個(gè)按鈕提交用onclick跳轉(zhuǎn)不同action
這篇文章主要介紹了from表單多個(gè)按鈕提交用onclick跳轉(zhuǎn)不同action,需要的朋友可以參考下2014-04-04Bootstrap開關(guān)(switch)控件學(xué)習(xí)筆記分享
這篇文章主要為大家分享了Bootstrap開關(guān)(switch)控件學(xué)習(xí)筆記,介紹了Bootstrap開關(guān)(switch)控件的功能、使用說明,感興趣的小伙伴們可以參考一下2016-05-05layui問題之渲染數(shù)據(jù)表格時(shí),僅出現(xiàn)10條數(shù)據(jù)的解決方法
今天小編就為大家分享一篇layui問題之渲染數(shù)據(jù)表格時(shí),僅出現(xiàn)10條數(shù)據(jù)的解決方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09在JavaScript中實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的實(shí)現(xiàn)
這篇文章主要介紹了在JavaScript中實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12JavaScript截取字符串的2個(gè)函數(shù)介紹
這篇文章主要介紹了JavaScript截取字符串的2個(gè)函數(shù)介紹,它們分別是substring和substr函數(shù),本文用實(shí)例講解了它們的用法,需要的朋友可以參考下2014-08-08