ZeroClipboard 複製到剪貼板 中文文檔

使用方法

載入 JavaScript 文件

<script src="ZeroClipboard.js"></script>

若是 ZeroClipboard.swf 與頁面不在同一個目錄下，能夠設置路徑

// 全局設置 
ZeroClipboard.setDefaults({ 
    moviePath: '/path/ZeroClipboard.swf' 
}); 
 
// 參數中設置 
var clip=new ZeroClipboard(document.getElementById("copy-button"), { 
    moviePath: '/path/ZeroClipboard.swf' 
}); 

調用

能夠傳遞一個元素或者一個元素數組。（這裏使用 jQuery 獲取元素的方式）

// 直接調用 
var clip=new ZeroClipboard($('#my-button')); 

AMD

若是你使用 RequireJS, curl.js, seajs 等 AMD 規範的模塊加載器，那麼須要設置模塊的 ID 或者路徑的值到 amdModuleId，才能正常使用 ZeroClipboard。例：

define(['path/to/zero-clipboard'], function(ZeroClipboard){ 
    ZeroClipboard.setDefaults({ 
        amdModuleId: 'path/to/zero-clipboard' 
    }); 
});

或者設置路徑，RequireJS 的例子：

requirejs.config({ 
    paths:{ 
        "ZeroClipboard":"path/to/zero-clipboard" 
    } 
}); 
 
define(["ZeroClipboard"],function(ZeroClipboard) { 
    ZeroClipboard.setDefaults({ 
        amdModuleId: 'ZeroClipboard' 
    }); 
});

參數說明

new ZeroClipboard(elements [, options])

options 參數說明

名稱	默認值	說明
swfPath	"ZeroClipboard.swf"	Flash 文件路徑，默認的 swf 文件路徑與 ZeroClipboard.js 相同
trustedDomains	window.location.host ? [window.location.host] : []	可信任的域（字符串或者字符串的數組）
cacheBust	true
forceEnhancedClipboard	false
flashLoadTimeout	30000	加載 Flash 的超時時間，若是不須要，能夠設置爲 0。單位（ms）
autoActivate	true
bubbleEvents	true
containerId	"global-zeroclipboard-html-bridge"
containerClass	"global-zeroclipboard-container"
swfObjectId	"global-zeroclipboard-flash-bridge"
hoverClass	"zeroclipboard-is-hover"	鼠標移上時給元素增長的 Class
activeClass	"zeroclipboard-is-active"	選定是給元素增長的 Class
forceHandCursor	false
title	null
zIndex	999999999

參數 allowScriptAccess 選項的注意事項

1.1.7 及如下的版本，allowScriptAccess 的默認值爲 always。意味着容許 "ZeroClipboard.swf" 文件託管的其餘的域。爲了提升安全性，1.1.7 以後的版本，allowScriptAccess 的默認值爲 sameDomain，只容許 "ZeroClipboard.swf" 在相同域之下。

若是你是從 1.1.7 或更低的版本升級到 1.1.7 以上版本時，須要將 "ZeroClipboard.swf" 保存一份到相同域之下，或者設置 allowScriptAccess 的值爲 always。

關於 allowScriptAccess 的更多信息，能夠參考官方文檔。

Data 屬性

 

名稱	說明
data-clipboard-target	元素ID。查找該元素後，嘗試複製元素的 .value 或 .textContent 或 .innerText 的值
data-clipboard-text	默認複製的內容。

同時設置 data-clipboard-target 和 data-clipboard-text 兩個屬性時，只有在找不到 clipboard-target 的值時纔會選用 clipboard-text

即便獲取到 clipboard-target 的值爲空，也不會選用 clipboard-text

此外，咱們甚至無需經過元素節點的屬性來設置用於複製的文本數據，咱們能夠直接使用 ZeroClipboard 對象的setText()方法來設置文本數據。注意，該方法設置的數據是一次性的，使用該方法設置複製數據後，只在下一次複製操做時生效。以後即便你點擊複製按鈕也再也不執行復制，除非你再次調用setText()方法(你能夠綁定複製("copy")事件來調用該方法，從而實現每次複製操做都設置數據，下面咱們會講到)。

clip.setText("設置用於複製的文本內容");

數據來源的優先級問題：若是咱們同時爲複製載體設置了data-clipboard-text、 data-clipboard-target屬性，並調用了setText()方法，那麼 ZeroClipboard 複製數據的優先級是：setText() > data-clipboard-target > data-clipboard-text。

若是前者沒有文本數據(沒有調用、 沒有屬性或者數據爲空字符串)，則如下一個優先級爲準，若是都沒有文本數據，則不復制。

舉例來講，若是同時設置上述三者。第一次複製：先取setText()設置的數據，若是爲空字符串，則取data-clipboard-target對應元素的數據；若是它也爲空字符串，則取data-clipboard-text屬性的文本數據；若是它也爲空字符串，則不復制。注意，因爲setText()設置的數據是一次性的，下一次複製將以data-clipboard-target屬性爲準(除非再次調用setText()方法)。

數據類型

衆所周知，剪貼板中的數據是有類型的，每一種類型均可以有本身的數據。咱們複製的數據能夠有多種類型，當咱們粘貼的時候，會粘貼當前程序可接受類型的數據。

ZeroClipboard也支持設置多種類型的剪貼板數據。它爲咱們提供了setText()、setHtml、setRichText()方法分別用於設置純文本數據、HTML內容、富文本內容。

// 可同時設置，粘貼時根據接收程序的不一樣，而粘貼出不一樣的內容
clip.setText("CodePlayer");
clip.setHtml("<strong>CodePlayer</strong>");
clip.setRichText("{\\rtf1\\ansi\n{\\b CodePlayer}}");

此外，ZeroClipboard還提供了一個通用的設置方法setData()，用於設置各類類型的數據。

// 可同時設置，粘貼時根據接收程序的不一樣，而粘貼出不一樣的內容
clip.setData("text/plain", "CodePlayer");
clip.seData("text/html", "<strong>CodePlayer</strong>");
clip.setData("application/rtf", "{\\rtf1\\ansi\n{\\b CodePlayer}}");

API 方法

名稱	說明
glue(dom)	綁定到元素
reposition()	調整位置
on("Event",my_load_handler)	綁定事件
off("Event",my_load_handler)	取消已綁定的事件

事件

經過 API 的方法 on() 來綁定

名稱	示例	說明
load	clip.on("load",function(client,args){...});	Flash 加載完成時的事件。args 參數包含如下屬性： flashVersion：當前 Flash 的版本號
mouseover	clip.on("mouseover",function(client,args){...});	鼠標移入時的事件。args 參數包含如下屬性： flashVersion：當前 Flash 的版本號 altKey：是否按住 Alt 鍵 ctrlKey：是否按住 Ctrl 鍵 shiftKey：是否按住 Shift 鍵
mouseout	clip.on("mouseout",function(client,args){...});	鼠標移出時的事件。args 參數包含如下屬性： flashVersion：當前 Flash 的版本號 altKey：是否按住 Alt 鍵 ctrlKey：是否按住 Ctrl 鍵 shiftKey：是否按住 Shift 鍵
mousedown	clip.on("mousedown",function(client,args){...});	鼠標按下時的事件。args 參數包含如下屬性： flashVersion：當前 Flash 的版本號 altKey：是否按住 Alt 鍵 ctrlKey：是否按住 Ctrl 鍵 shiftKey：是否按住 Shift 鍵
mouseup	clip.on("mouseup",function(client,args){...});	鼠標彈起時的事件。args 參數包含如下屬性： flashVersion：當前 Flash 的版本號 altKey：是否按住 Alt 鍵 ctrlKey：是否按住 Ctrl 鍵 shiftKey：是否按住 Shift 鍵
complete	clip.on("complete",function(client,args){...});	成功複製內容時的事件。args 參數包含如下屬性： flashVersion：當前 Flash 的版本號 altKey：是否按住 Alt 鍵 ctrlKey：是否按住 Ctrl 鍵 shiftKey：是否按住 Shift 鍵 text：複製的內容
noflash	clip.on("noflash",function(client,args){...});	沒有檢測到 Flash 時的事件。
wrongflash	clip.on("wrongflash",function(client,args){...});	Flash 版本低於要求版本時的事件。ZeroClipboard 要求 Flash 10.0.0 以上的版本。
dataRequested	clip.on("dataRequested",function(client,args){...});	複製開始時的事件

相關信息