在浏览网页时可以看到复制功能,如:在看一个带有源码的demo时,可以点击复制,把源码复制到剪切板,然后粘贴到本地review,ie浏览器可以使用浏览器内置对象(window.clipboradData)的setData方法,但无法兼容其他浏览器,下面介绍ZeroClipboard:一、原理ZeroClipboard利用透明的flash让其漂浮在复制按钮之上,将需要复制的内容传入flash,在通过flash的复制功能把传入的内容复制到剪切板。二、结构1、ZeroClipboard其实是国外的一个js类库,源码结构如:
var ZeroClipboard = { //这里是属性和方法..... }; ZeroClipboard.Client.prototype = { //扩展方法 };
2、创建对象,如:
var clip = new ZeroClipboard.Client(); //调用扩展方法
点击这里下载文件,查看github源码,百度文库。三、简单配置下载下来的ZeroClipboard文件有一个js和swf文件,在js文件中需要正确配置moviePath路径,可以配置相对和绝对路径,也可以调用实例对象的moviePath()设置正确的路径;另一个需要注意的地方是本地测试时,需要Apache服务器。四、domo实例CSS:
.box { width: 300px; height: 100px; margin: 100px auto; }
HTML:
<div class="box"> <textarea id="J_share_text" class="share-text"></textarea> <input class="btn" id="J_copy_clipboard_data" type="button" value="复制"> </div>
JavaScript:
(function() { $(function() { var clip = new ZeroClipboard.Client(); clip.setHandCursor(true); clip.glue('J_copy_clipboard_data'); clip.addEventListener('mouseDown',function() { clip.setText(ZeroClipboard.$('#J_share_text').val()); }); }); })()
完整demo:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>ZeroClipboard demo实例</title> <link href="http://a.tbcdn.cn/apps/e/tms/120951/bootstrap.css" rel="stylesheet"> <style> .box { width: 300px; height: 100px; margin: 100px auto; } </style> </head> <div class="box"> <textarea id="J_share_text" class="share-text"></textarea> <input class="btn" id="J_copy_clipboard_data" type="button" value="复制"> </div> <body> <script src="http://a.tbcdn.cn/apps/e/tms/120951/zeroclipboard.js"></script> <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script> <script src="http://a.tbcdn.cn/apps/e/tms/120951/bootstrap.js"></script> <script> (function() { $(function() { var clip = new ZeroClipboard.Client(); clip.setHandCursor(true); clip.glue('J_copy_clipboard_data'); clip.addEventListener('mouseDown',function() { clip.setText($('#J_share_text').val()); }); }); })() </script> </body> </html>
来源:https://www.cnblogs.com/yangjunhua/archive/2012/09/10/2678817.html