DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Js+Flash實現訪問剪切板操作
Js+Flash實現訪問剪切板操作
編輯:關於JavaScript     
最近需要遇到了這個問題點擊按鈕復制鏈接的功能果斷度娘谷哥。最後找到得解決方案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動態添加樣式效果也不太好。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved