Js+Flash實現訪問剪下板操作

來源:互聯網
上載者:User

最近需要遇到了這個問題點擊按鈕複製連結的功能果斷度娘穀哥。最後找到得解決方案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動態添加樣式效果也不太好。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.