JS+Zero Clipboard swf复制到剪贴板 兼容浏览器(bind事件绑定函数)
转自http://www.ipmtea.net/css_ie_firefox/201107/07_499.html
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>
其他功能：
核心功能
第一步，导入 ZeroClipboard.js 文件：
<script type="text/javascript" src="ZeroClipboard.js"></script>
第二步， 再设置 ZeroClipboard.swf 文件的路径：
ZeroClipboard.setMoviePath( "ZeroClipboard.swf" );
注意：以上 ZeroClipboard.js, ZeroClipboard.swf 两个文件的路径都需要替换为你项目中对应文件的路径。或者也可以是一个绝对路径。
第三步，然后就使用了：
var clip = new ZeroClipboard.Client(); // 新建一个对象 clip.setHandCursor( true ); // 设置鼠标为手型 clip.setText("哈哈"); // 设置要复制的文本。 // 注册一个 button，参数为 id。点击这个 button 就会复制。 //这个 button 不一定要求是一个 input 按钮，也可以是其他 DOM 元素。 clip.glue("copy-botton"); // 和上一句位置不可调换
这样，这样基本功能实现了，点击按钮就可以复制设置好的文本了。你可能注意到了，待复制的文本是固定的，如果想要动态改变的怎么办，比如复制一个输入框中的内容。不用担心，下面会讲到的。
其他函数
Zero Clipboard 还提供了一些其他的函数，其中有一些非常有用。
reposition() 方法
因为按钮上漂浮有一个 Flash 按钮，所以当页面大小发生变化时，Flash 按钮可能会错位，这样就点不着了。 不要紧，Zero Clipboard 提供了一个 reposition() 方法，可以重新计算 Flash 按钮的位置。我们可以将它绑定到 resize 事件上。
bind(window, "resize", function(){ clip.reposition(); });
bind 是一个跨浏览器的事件绑定函数。
这个想必大家都已知道。IE 的事件绑定函数是 attachEvent；而 Firefox, Safari 是 addEventListener；Opera 则两种都支持。下面进行封装。
/************************************ * 添加事件绑定 * @param obj : 要绑定事件的元素 * @param type : 事件名称。不加 "on". 如 : "click" 而不是 "onclick". * @param fn : 事件处理函数 ************************************/ function bind( obj, type, fn ) { if ( obj.attachEvent ) { obj['e'+type+fn] = fn; obj[type+fn] = function(){obj['e'+type+fn]( window.event );} obj.attachEvent( 'on'+type, obj[type+fn] ); } else obj.addEventListener( type, fn, false ); }
例如添加一个页面点击事件：
bind(document, "click", function() { alert("Hello, World!!"); });
hide() 和 show() 方法
这两个方法可以隐藏和显示 Flash 按钮 。其中 show() 方法会调用 reposition() 方法。
setCSSEffects() 方法
当鼠标移到按钮上或点击时，由于有 Flash 按钮的遮挡，所以像 css ":hover", ":active" 等伪类可能会失效。setCSSEffects() 方法就是解决这个问题。首先我们需要将伪类改成类，比如：
- #copy-botton:hover{
- border-color:#FF6633;
- }
- // 可以改成下面的 ":hover" 改成 ".hover"
- #copy-botton.hover{
- border-color:#FF6633;
- }
我们可以调用 clip.setCSSEffects( true ); 这样 Zero Clipboard 会自动为我们处理：将类 .hover 当成伪类 :hover 。
getHTML() 方法
如果你想自己实例一个 Flash ，不用 Zero Clipboard 的附着方法，那么这个方法就可以帮上忙了。它接受两个参数，分别为 Flash 的宽度和高度。返回的是 Flash 对应的 HTML 代码。例如：
- var html = clip.getHTML( 150, 20 );
你可以用 innerHTML 或直接 document.write(); 进行输出。
以下是我测试下输出的 HTML 代码：
- <embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150" height="20" name="ZeroClipboardMovie_1" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=150&height=20" wmode="transparent" />
IE 的 Flash JavaScript 通信接口上有一个 bug 。你必须插入一个 object 标签到一个已存在的 DOM 元素中。并且在写入 innerHTML 之前请确保该元素已经 appendChild 方法插入到 DOM 中。
Zero Clipboard 事件处理
Zero Clipboard 提供了一些事件，你可以自定义函数处理这些事件。Zero Clipboard 事件处理函数为 addEventListener(); 例如当 Flash 完全载入后会触发一个事件 "load" 。
clip.addEventListener( "load", function(client) { alert("Flash 加载完毕！"); });
Zero Clipboard 会将 clip 对象作为参数传入。即上例中的 "client" 。
还有 "load" 也可以写成 "onLoad"，其他的事件也可以这样。
其他事件还包括：
mouseOver 鼠标移上事件
mouseOut 鼠标移出事件
mouseDown 鼠标按下事件
mouseUp 鼠标松开事件
complete 复制成功事件
其中 mouseOver 事件和 complete 事件比较常用。
前面说过，如果需要动态改变待复制的内容，那 mouseOver 事件就可以派上用场了。例如需要动态复制一个 id 为 test 的输入框中的值，我们可以在鼠标 over 的时候重新设置值。
-
clip.addEventListener( "mouseOver", function(client) { var test = document.getElementById("test"); client.setText( test.value ); // 重新设置要复制的值 });
复制成功：
-
clip.addEventListener( "complete", function(){ alert("复制成功！"); });
好了，就介绍到这里吧。赶快自己试验下吧。
