ZeroClipboard 複製到剪貼板

使用 ZeroClipboard 能夠簡單的將內容複製到剪貼板，經過 Adobe Flash 和 JavaScript 來實現。「Zero」 意義爲這個類庫沒有界面，界面須要由你來創建。

• 版本：

• ZeroClipboard v2.1.6

• github地址

在線實例

實例預覽 ZeroClipboard 複製到剪貼板 簡單示例

使用方法

載入 JavaScript 文件

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

複製

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

1. // 全局設置 
2. ZeroClipboard.setDefaults({ 
3.   moviePath: '/path/ZeroClipboard.swf' 
4. }); 
5.  
6. // 參數中設置 
7. var clip=new ZeroClipboard(document.getElementById("copy-button"), { 
8.   moviePath: '/path/ZeroClipboard.swf' 
9. }); 

複製

調用

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

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

複製

AMD

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

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

複製

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

1. requirejs.config({ 
2.   paths:{ 
3.     "ZeroClipboard":"path/to/zero-clipboard" 
4.   } 
5. }); 
6.  
7. define(["ZeroClipboard"],function(ZeroClipboard) { 
8.   ZeroClipboard.setDefaults({ 
9.     amdModuleId: 'ZeroClipboard' 
10.   }); 
11. }); 

複製

參數說明

1. 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

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){...});	複製開始時的事件

---

下載