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è)頁(yè)面只有一個(gè)固定的復(fù)制操作
而我得需求是這樣
一個(gè)動(dòng)態(tài)Repeater動(dòng)態(tài)加載出各個(gè)地址和復(fù)制按鈕。
這個(gè)解決方案得原理是：
拿js動(dòng)態(tài)加載一個(gè)透明flash.然后遮蓋到你要點(diǎn)擊得按鈕上面,之后在給這個(gè)flash得承載元素上綁定事件動(dòng)態(tài)把要復(fù)制得值傳遞到flash中,用flash訪問剪切板.
這時(shí)候就出現(xiàn)這么一個(gè)問題多個(gè)按鈕如果每個(gè)按鈕都加栽一遍flash得話會(huì)很吃內(nèi)存并且動(dòng)態(tài)得代碼也不是很好寫
最后得解決方案如下:
<divid="ClipSwf"style="left:-1000px;position:absolute;width:80px;height:25px;"></div>
1.現(xiàn)在Body中放置一個(gè)隱藏得flash容器絕對(duì)定位
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在頁(yè)面加載完成得時(shí)候初始化剪切板的對(duì)象并設(shè)置鼠標(biāo)手勢(shì)和承載容器然后把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ù)制按鈕上動(dòng)態(tài)綁定事件并把響應(yīng)的要復(fù)制得值或者控件傳遞到function中之后設(shè)置隱藏flash容器得left,top邊距讓其漂浮在觸發(fā)該事件得按鈕上并把要復(fù)制的值通過(guò)
Clip.setText('text')(插件提供得方法)傳遞給flash這樣就實(shí)現(xiàn)了多個(gè)按鈕復(fù)制得功能
未解決問題,原本按鈕得hovercss切換效果flash遮蓋之后就不太靈活了。用jquery動(dòng)態(tài)添加樣式效果也不太好。
但是搜尋了眾多例子之后發(fā)現(xiàn)大多都是介紹一個(gè)頁(yè)面只有一個(gè)固定的復(fù)制操作
而我得需求是這樣
一個(gè)動(dòng)態(tài)Repeater動(dòng)態(tài)加載出各個(gè)地址和復(fù)制按鈕。
這個(gè)解決方案得原理是：
拿js動(dòng)態(tài)加載一個(gè)透明flash.然后遮蓋到你要點(diǎn)擊得按鈕上面,之后在給這個(gè)flash得承載元素上綁定事件動(dòng)態(tài)把要復(fù)制得值傳遞到flash中,用flash訪問剪切板.
這時(shí)候就出現(xiàn)這么一個(gè)問題多個(gè)按鈕如果每個(gè)按鈕都加栽一遍flash得話會(huì)很吃內(nèi)存并且動(dòng)態(tài)得代碼也不是很好寫
最后得解決方案如下:
復(fù)制代碼 代碼如下:
<divid="ClipSwf"style="left:-1000px;position:absolute;width:80px;height:25px;"></div>
1.現(xiàn)在Body中放置一個(gè)隱藏得flash容器絕對(duì)定位
復(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在頁(yè)面加載完成得時(shí)候初始化剪切板的對(duì)象并設(shè)置鼠標(biāo)手勢(shì)和承載容器然后把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ù)制按鈕上動(dòng)態(tài)綁定事件并把響應(yīng)的要復(fù)制得值或者控件傳遞到function中之后設(shè)置隱藏flash容器得left,top邊距讓其漂浮在觸發(fā)該事件得按鈕上并把要復(fù)制的值通過(guò)
Clip.setText('text')(插件提供得方法)傳遞給flash這樣就實(shí)現(xiàn)了多個(gè)按鈕復(fù)制得功能
未解決問題,原本按鈕得hovercss切換效果flash遮蓋之后就不太靈活了。用jquery動(dòng)態(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)文章
JavaScript中輕松獲取頁(yè)面參數(shù)值的N種方法(含代碼示例)
本文旨在深入淺出地揭示如何在JavaScript中巧妙提取那些隱藏在URL背后的寶貴信息,從基礎(chǔ)方法到高級(jí)技巧,一網(wǎng)打盡,無(wú)論你是編程界的菜鳥還是久經(jīng)沙場(chǎng)的老將,這里都有值得你品鑒的“珍饈”,需要的朋友可以參考下2024-06-06
微信小程序?qū)W習(xí)筆記之獲取位置信息操作圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之獲取位置信息操作,結(jié)合實(shí)例形式分析了微信小程序獲取位置信息的原理、步驟及相關(guān)操作注意事項(xiàng),并結(jié)合圖文形式予以說(shuō)明,需要的朋友可以參考下2019-03-03
HTML顏色選擇器實(shí)現(xiàn)代碼需要的朋友可以參考下。2010-11-11
關(guān)于laydate.js加載laydate.css路徑錯(cuò)誤問題解決
日期時(shí)間選擇插件 laydate.js相信對(duì)大家來(lái)說(shuō)都不陌生，這篇文章主要給大家介紹了關(guān)于laydate.js加載laydate.css路徑錯(cuò)誤問題解決的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-12-12
JavaScript模擬文件拖選框樣式v1.0的實(shí)例
下面小編就為大家?guī)?lái)一篇JavaScript模擬文件拖選框樣式v1.0的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
javascript實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲
本文很簡(jiǎn)單，給大家分享了一段使用javascript實(shí)現(xiàn)簡(jiǎn)單的貪吃蛇游戲的代碼，算是對(duì)自己學(xué)習(xí)javascript的一次小小的總結(jié)，代碼參考了網(wǎng)友的部分內(nèi)容，推薦給大家，希望對(duì)大家能夠有所幫助。2015-03-03
JavaScript Accessor實(shí)現(xiàn)說(shuō)明
關(guān)于Getter與Setter大家一定不會(huì)陌生,下面簡(jiǎn)單介紹幾種我所知道的在JavaScript中實(shí)現(xiàn)G/S的方法.2010-12-12
本文給大家分享的是使用javascript實(shí)現(xiàn)的圖片左右輪播的代碼，已經(jīng)封裝完畢，使用方法非常簡(jiǎn)單，參考示例，有需要的小伙伴可以參考下。2015-07-07
JavaScript 調(diào)試器其實(shí)有很多。當(dāng)然這些僅僅是調(diào)試器而已，與流行的 Java IDE 是沒有辦法相提并論的。2009-02-02
微信公眾號(hào)服務(wù)器驗(yàn)證Token步驟圖解
這篇文章主要介紹了微信公眾號(hào)服務(wù)器驗(yàn)證Token步驟圖解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12