程序员人生 网站导航

ZeroClipboard解决跨浏览器复制到剪贴板

栏目:jscript时间:2014-01-30 09:12:41

Zero Clipboard的实现原理
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板。

Zero Clipboard的安装方法
其实也不算安装啦,就是使用前的准备工作。
首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。

Zero Clipboard : [项目主页] [zip下载] [在线演示]

然后把在你要使用复制功能的页面中引入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 。

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐