使用 ZeroClipboard 可以简单的将内容复制到剪贴板,通过 Adobe Flash 和 JavaScript 来实现。“Zero” 意义为这个类库没有界面,界面需要由你来建立。
ZeroClipboard v2.1.6
实例预览 ZeroClipboard 复制到剪贴板 简单示例
<script src="ZeroClipboard.js"></script>
// 全局设置
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'));
如果你使用 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])
名称 | 默认值 | 说明 |
---|---|---|
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 |
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-clipboard-target | 元素ID。查找该元素后,尝试复制元素的 .value 或 .textContent 或 .innerText 的值 |
data-clipboard-text | 默认复制的内容。 |
同时设置 data-clipboard-target 和 data-clipboard-text 两个属性时,只有在找不到 clipboard-target 的值时才会选用 clipboard-text
即使获取到 clipboard-target 的值为空,也不会选用 clipboard-text
名称 | 说明 |
---|---|
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){...}); | 复制开始时的事件 |