1- 引用檔案。下載下傳後會得到兩個核心檔案ZeroClipboard.js和ZeroClipboard.swf,在項目中引用其中一個就可以。
<script type="text/javascript" src="http://www.cnblogs.com/Scripts/ZeroClipboard/ZeroClipboard.js"></script>
2- 加載ZeroClipboard對象,并實作複制功能。
代碼如下:
//設定flash檔案引用路徑。
ZeroClipboard.setMoviePath('http://www.cnblogs.com/Scripts/ZeroClipboard/ZeroClipboard.swf');
//建立ZeroClipboard對象
clip = new ZeroClipboard.Client();
clip.setHandCursor(true);
//加載事件,在mouseOver事件中将需要複制的内容傳到flahs檔案中儲存
clip.addEventListener('mouseOver', function(client) {
clip.setText($('#IndInfo').val());
});
//複制成功後彈出對話框
clip.addEventListener('complete', function(client, text) {
alert("Copied text to clipboard:\n\n" + text);
});
//指定實作複制功能對象
clip.glue('Copy');
更多内容請參考下面的:
引用來自:http://twohuo.com/zeroclipboard.html
1、首先到ZeroClipboard官方網站 去下載下傳需要的檔案,将其中的ZeroClipboard.js 和ZeroClipboard10.swf 上傳到您的網站。
2、根據提示修改好以下代碼,然後添加到你的網頁代碼的<head></head>之間。
02 | < script type = "text/javascript" src = "ZeroClipboard.js" ></ script > <!--替換為正确的ZeroClipboard.js路徑 --> |
03 | < script type = "text/javascript" > |
04 | ZeroClipboard.setMoviePath( 'ZeroClipboard10.swf' ); <!--替換為正确的ZeroClipboard10.swf路徑--> |
06 | <!--btn_id,btn_id2用于定位flash,test_str為傳入的文本,isId為0或者控件ID--> |
07 | function copy_code(btn_id,btn_id2,test_str,isId) { |
08 | clip = new ZeroClipboard.Client(); |
09 | clip.setHandCursor(true); |
10 | clip.addEventListener('mouseOver', function (client) { |
11 | <!-- update the text on mouse over--> |
12 | <!--傳入ID時,用ID的value替換文本。--> |
14 | test_str = document.getElementByIdx_x(isId).value; |
16 | clip.setText(test_str); |
18 | clip.addEventListener('complete', function (client, text) { |
19 | alert("複制成功,你可以使用Ctrl+V 粘貼。"); |
22 | clip.glue(btn_id,btn_id2); |
3、使用的時候,先用一個style="position:relative;"的div來定位,然後在頁面控件中使用onmouseover事件來調用copy_code()函數,如下是參考示例:
<!-- 下面這個div必須。。。否則可能導緻定位不準。 --> |
< div id = "d_clip_container" style = "position:relative;" > |
< input type = "button" id = "btn_copy" value = "複制" onmouseover = "copy_code(this.id,'d_clip_container'," http://twohuo.com/",0);" /> |
<!-- 參數4說明:傳入id時,使用該id的值重新設定參數3;傳入0時則不改變參數3. --> |