我要评论zero clipboard的实现原理
zero clipboard 利用透明的flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 flash ，这样将需要的内容传入flash，再通过flash的复制功能把传入的内容复制到剪贴板
zero clipboard的安装方法
首先需要下载 zero clipboard的压缩包，解压后把文件夹中两个文件：zeroclipboard.js 和 zeroclipboard.swf 放入到你的项目中。
然后把在你要使用复制功能的页面中引入zero clipboard的js文件：zeroclipboard.js
如下代码：
注意：以上 zeroclipboard.js, zeroclipboard.swf需要放在同一路径下。如果不在同一路径，可使用zeroclipboard.setmoviepath( “flash路径” );来设置zeroclipboard.swf 地址
这样，这样基本功能实现了，点击按钮就可以复制设置好的文本了。你可能注意到了，待复制的文本是固定的，如果想要动态改变的怎么办，比如复制一个输入框中的内容。不用担心，下面会讲到的。
zero clipboard的高级功能
1、reposition() 方法
因为按钮上漂浮有一个 flash 按钮，所以当页面大小发生变化时，flash 按钮可能会错位，这样就点不着了。 不要紧，zero clipboard 提供了一个 reposition() 方法，可以重新计算 flash 按钮的位置。我们可以将它绑定到 resize 事件上。如下面代码是在jquery下实现的resize事件重新设置按钮位置：
2、hide() 和 show() 方法
这两个方法可以隐藏和显示 flash 按钮 。其中 show() 方法会调用 reposition() 方法。
3、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 。
4、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 的时候重新设置值。
发表评论