ZeroClipboard 复制到剪贴板
编程爱好者联盟 2016-09-14
使用 ;ZeroClipboard ;可以简单的将内容复制到剪贴板，通过 ;Adobe ;Flash ;和 ;JavaScript ;来实现。”Zero ;意义为这个类库没有界面，界面需要由你来建立。
; ;<ul> ; ;<li>版本：</li> ; ;<li> ; ;
ZeroClipboard ;v2.1.6
github地址
; ;</li> ; ;</ul> ; ;
在线实例
; ;实例预览 ZeroClipboard ;复制到剪贴板 ;简单示例
; ;
使用方法
; ;; ;
载入 ;JavaScript ;文件
; ;- <script src="ZeroClipboard.js"></script>
<span ;class="fu"><span ;class="glyphicon ;glyphicon-copy ;margin-r-2">复制</span></span>
; ;
如果 ;ZeroClipboard.swf ;与页面不在同一个目录下，可以设置路径
; ;- // 全局设置
- ZeroClipboard.setDefaults({
- moviePath: '/path/ZeroClipboard.swf'
- });
- // 参数中设置
- var clip=new ZeroClipboard(document.getElementById("copy-button"), {
- moviePath: '/path/ZeroClipboard.swf'
- });
<span ;class="fu"><span ;class="glyphicon ;glyphicon-copy ;margin-r-2">复制</span></span>
; ;
调用
; ;可以传递一个元素或者一个元素数组。（这里使用 ;jQuery ;获取元素的方式）
; ;
- // 直接调用
- var clip=new ZeroClipboard($('#my-button'));
<span ;class="fu"><span ;class="glyphicon ;glyphicon-copy ;margin-r-2">复制</span></span>
; ;
AMD
; ;如果你使用 RequireJS, curl.js, seajs 等 AMD 规范的模块加载器，那么需要设置模块的 ;ID ;或者路径的值到 ;amdModuleId，才能正常使用 ;ZeroClipboard。例：
; ;
- define(['path/to/zero-clipboard'], function(ZeroClipboard){
- ZeroClipboard.setDefaults({
- amdModuleId: 'path/to/zero-clipboard'
- });
- });
<span ;class="fu"><span ;class="glyphicon ;glyphicon-copy ;margin-r-2">复制</span></span>
; ;或者设置路径，RequireJS ;的例子：
- requirejs.config({
- paths:{
- "ZeroClipboard":"path/to/zero-clipboard"
- }
- });
- define(["ZeroClipboard"],function(ZeroClipboard) {
- ZeroClipboard.setDefaults({
- amdModuleId: 'ZeroClipboard'
- });
- });
<span ;class="fu"><span ;class="glyphicon ;glyphicon-copy ;margin-r-2">复制</span></span>
; ;
参数说明
; ;- new ZeroClipboard(elements [, options])
<span ;class="fu"><span ;class="glyphicon ;glyphicon-copy ;margin-r-2">复制</span></span>
; ;
options ;参数说明
; ;<table ;class="table ;table-striped ;table-bordered ;table-condensed"> ; ;<thead> ; ;<tr ;class="firstRow"><th ;width="180">名称</th><th ;width="360">默认值</th><th>说明</th></tr> ; ;</thead> ; ;<tbody> ; ;<tr> ; ;<td>swfPath</td> ; ;<td>"ZeroClipboard.swf"</td> ; ;<td>Flash ;文件路径，默认的 ;swf ;文件路径与 ;ZeroClipboard.js ;相同</td> ; ;</tr> ; ;<tr> ; ;<td>trustedDomains</td> ; ;<td>window.location.host ;? ;[window.location.host] ;: ;[]</td> ; ;<td>可信任的域（字符串或者字符串的数组）</td> ; ;</tr> ; ;<tr> ; ;<td>cacheBust</td> ; ;<td>true</td> ; ;<td> </td> ; ;</tr> ; ;<tr> ; ;<td>forceEnhancedClipboard</td> ; ;<td>false</td> ; ;<td> </td> ; ;</tr> ; ;<tr> ; ;<td>flashLoadTimeout</td> ; ;<td>30000</td> ; ;<td>加载 ;Flash ;的超时时间，如果不需要，可以设置为 ;0。单位（ms）</td> ; ;</tr> ; ;<tr> ; ;<td>autoActivate</td> ; ;<td>true</td> ; ;<td> </td> ; ;</tr> ; ;<tr> ; ;<td>bubbleEvents</td> ; ;<td>true</td> ; ;<td> </td> ; ;</tr> ; ;<tr> ; ;<td>containerId</td> ; ;<td>"global-zeroclipboard-html-bridge"</td> ; ;<td> </td> ; ;</tr> ; ;<tr> ; ;<td>containerClass</td> ; ;<td>"global-zeroclipboard-container"</td> ; ;<td> </td> ; ;</tr> ; ;<tr> ; ;<td>swfObjectId</td> ; ;<td>"global-zeroclipboard-flash-bridge"</td> ; ;<td> </td> ; ;</tr> ; ;<tr> ; ;<td>hoverClass</td> ; ;<td>"zeroclipboard-is-hover"</td> ; ;<td>鼠标移上时给元素增加的 ;Class</td> ; ;</tr> ; ;<tr> ; ;<td>activeClass</td> ; ;<td>"zeroclipboard-is-active"</td> ; ;<td>选定是给元素增加的 ;Class</td> ; ;</tr> ; ;<tr> ; ;<td>forceHandCursor</td> ; ;<td>false</td> ; ;<td> </td> ; ;</tr> ; ;<tr> ; ;<td>title</td> ; ;<td>null</td> ; ;<td> </td> ; ;</tr> ; ;<tr> ; ;<td>zIndex</td> ; ;<td>999999999</td> ; ;<td> </td> ; ;</tr> ; ;</tbody> ; ;</table> ; ;参数 ;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 ;属性
; ;; ;<table ;class="table ;table-striped ;table-bordered ;table-condensed"> ; ;<thead> ; ;<tr ;class="firstRow"><th ;width="200">名称</th><th>说明</th></tr> ; ;</thead> ; ;<tbody> ; ;<tr> ; ;<td>data-clipboard-target</td> ; ;<td>元素ID。查找该元素后，尝试复制元素的 .value 或 .textContent 或 .innerText 的值</td> ; ;</tr> ; ;<tr> ; ;<td>data-clipboard-text</td> ; ;<td>默认复制的内容。</td> ; ;</tr> ; ;</tbody> ; ;</table> ; ;
同时设置 data-clipboard-target 和 data-clipboard-text 两个属性时，只有在找不到 ;clipboard-target ;的值时才会选用 ;clipboard-text
即使获取到 ;clipboard-target ;的值为空，也不会选用 ;clipboard-text
; ;
API ;方法
; ;; ;<table ;class="table ;table-striped ;table-bordered ;table-condensed"> ; ;<thead> ; ;<tr ;class="firstRow"><th ;width="200">名称</th><th>说明</th></tr> ; ;</thead> ; ;<tbody> ; ;<tr> ; ;<td>glue(dom)</td> ; ;<td>绑定到元素</td> ; ;</tr> ; ;<tr> ; ;<td>reposition()</td> ; ;<td>调整位置</td> ; ;</tr> ; ;<tr> ; ;<td>on("Event",my_load_handler)</td> ; ;<td>绑定事件</td> ; ;</tr> ; ;<tr> ; ;<td>off("Event",my_load_handler)</td> ; ;<td>取消已绑定的事件</td> ; ;</tr> ; ;</tbody> ; ;</table> ; ;
; ;
事件
; ;通过 ;API ;的方法 on() 来绑定
; ;<table ;class="table ;table-striped ;table-bordered ;table-condensed"> ; ;<thead> ; ;<tr ;class="firstRow"><th ;width="200">名称</th><th ;width="400">示例</th><th>说明</th></tr> ; ;</thead> ; ;<tbody> ; ;<tr> ; ;<td>load</td> ; ;<td>clip.on("load",function(client,args){...});</td> ; ;<td>Flash ;加载完成时的事件。args ;参数包含以下属性： ; ;
flashVersion：当前 ;Flash ;的版本号
; ;</td> ; ;</tr> ; ;<tr> ; ;<td>mouseover</td> ; ;<td>clip.on("mouseover",function(client,args){...});</td> ; ;<td>鼠标移入时的事件。args ;参数包含以下属性： ; ;
flashVersion：当前 ;Flash ;的版本号
altKey：是否按住 ;Alt ;键
ctrlKey：是否按住 ;Ctrl ;键
shiftKey：是否按住 ;Shift ;键
; ;</td> ; ;</tr> ; ;<tr> ; ;<td>mouseout</td> ; ;<td>clip.on("mouseout",function(client,args){...});</td> ; ;<td>鼠标移出时的事件。args ;参数包含以下属性： ; ;
flashVersion：当前 ;Flash ;的版本号
altKey：是否按住 ;Alt ;键
ctrlKey：是否按住 ;Ctrl ;键
shiftKey：是否按住 ;Shift ;键
; ;</td> ; ;</tr> ; ;<tr> ; ;<td>mousedown</td> ; ;<td>clip.on("mousedown",function(client,args){...});</td> ; ;<td>鼠标按下时的事件。args ;参数包含以下属性： ; ;
flashVersion：当前 ;Flash ;的版本号
altKey：是否按住 ;Alt ;键
ctrlKey：是否按住 ;Ctrl ;键
shiftKey：是否按住 ;Shift ;键
; ;</td> ; ;</tr> ; ;<tr> ; ;<td>mouseup</td> ; ;<td>clip.on("mouseup",function(client,args){...});</td> ; ;<td>鼠标弹起时的事件。args ;参数包含以下属性： ; ;
flashVersion：当前 ;Flash ;的版本号
altKey：是否按住 ;Alt ;键
ctrlKey：是否按住 ;Ctrl ;键
shiftKey：是否按住 ;Shift ;键
; ;</td> ; ;</tr> ; ;<tr> ; ;<td>complete</td> ; ;<td>clip.on("complete",function(client,args){...});</td> ; ;<td>成功复制内容时的事件。args ;参数包含以下属性： ; ;
flashVersion：当前 ;Flash ;的版本号
altKey：是否按住 ;Alt ;键
ctrlKey：是否按住 ;Ctrl ;键
shiftKey：是否按住 ;Shift ;键
text：复制的内容
; ;</td> ; ;</tr> ; ;<tr> ; ;<td>noflash</td> ; ;<td>clip.on("noflash",function(client,args){...});</td> ; ;<td>没有检测到 ;Flash ;时的事件。</td> ; ;</tr> ; ;<tr> ; ;<td>wrongflash</td> ; ;<td>clip.on("wrongflash",function(client,args){...});</td> ; ;<td>Flash ;版本低于要求版本时的事件。ZeroClipboard ;要求 ;Flash ;10.0.0 ;以上的版本。</td> ; ;</tr> ; ;<tr> ; ;<td>dataRequested</td> ; ;<td>clip.on("dataRequested",function(client,args){...});</td> ; ;<td>复制开始时的事件</td> ; ;</tr> ; ;</tbody> ; ;</table> ; ;
<span ;class="glyphicon ;glyphicon-download-alt ;margin-r-2">下载</span>
