Zero Clipboard的完成原理

Zero Clipboard 利用全透明的Flash让其飘浮在复制按键以上,那样实际上点一下的并不是按键只是 Flash ,那样将必须的內容传入Flash,再根据Flash的复制作用把传入的內容复制到剪贴板

Zero Clipboard的安装方法

最先必须下载 Zero Clipboard的压缩文件,缓解压力后把文件夹名称中2个文档:ZeroClipboard.js 和 ZeroClipboard.swf 放进到你的新项目中。

随后把在你需要应用复制作用的网页页面中引入Zero Clipboard的js文件:ZeroClipboard.js
以下编码:

复制编码 编码以下:
<script type="text/javascript" src="ZeroClipboard.js"></script>

留意:之上 ZeroClipboard.js, ZeroClipboard.swf必须放到同一途径下。假如没有同一途径,可应用ZeroClipboard.setMoviePath( “Flash途径” );来设定ZeroClipboard.swf 详细地址

复制编码 编码以下:
Zero Clipboard完成简易跨电脑浏览器复制
var clip = new ZeroClipboard.Client(); // 在建一个目标
clip.setHandCursor( true ); // 设定电脑鼠标为手形
clip.setText("嘿嘿"); // 设定要复制的文字。
// 申请注册一个 button,主要参数为 id。点一下这一 button 便会复制。
//这一 button 不一定规定是一个 input 按键,还可以是别的 DOM 原素。
clip.glue("copy-botton"); // 和上一句部位不能替换

那样,那样基本要素完成了,点一下按键就可以复制设定好的文字了。你很有可能留意来到,待复制的文字是固定不动的,假如要想动态性更改的该怎么办,例如复制一个文本框中的內容。不必担心,下边会提到的。

Zero Clipboard的高級作用

1、reposition() 方式

由于按键上飘浮有一个 Flash 按键,因此当网页页面尺寸产生变化时,Flash 按键很有可能会移位,那样就打不着了。 没事儿,Zero Clipboard 出示了一个 reposition() 方式 ,能够再次测算 Flash 按键的部位。我们可以将它关联到 resize 恶性事件上。如下边编码是在jQuery下完成的resize恶性事件再次设定按键部位:

复制编码 编码以下:
$(window).resize(function(){
   clip.reposition();
});

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 的粘附方式 ,那麼这一方式 就可以帮上忙了。它接纳2个主要参数,各自为 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("复制取得成功!");
});