zClip 轻量级 Web 网页复制到剪贴板的 jQuery 插件

Question

zClip 是一个轻量级的 jQuery 复制到剪贴板插件，采用了时下流行的剪贴板库。此插件使用一个隐藏的 Adobe 的 Flash 文件实现复制，是完全兼容 Flash Player 10 及 10 以下版本。

zeroclipboard 实现多浏览器复制到粘贴板功能（单个复制按钮和多个复制按钮） 为了更好的用户体验，现在很多网站中文本框的内容只需要点击复制按钮这样就能把内容复制到粘贴板了。

出于兼容性的考虑，基本上都是通过 zeroclipboard 来实现。首先要下载 zeroclipboard，解压后把 ZeroClipboard.js 和 ZeroClipboard.swf、ZeroClipboard10.swf（针对 Flash 10）放到项目中，可以通过 ZeroClipboard.setMoviePath('/ZeroClipboard.swf') 方法来加载 SWF 文件。

使用方法

添加 jQuery 和 zClip 到您的网页文档中

<script src="js/jquery.js"></script>
<script src="js/jquery.zclip.js"></script>

将下面代码复制搭配 <script> 标签里面，附加的 zClip 元素，这将成为你的复制按钮

$(document).ready(function(){
    $('a#copy-description').zclip({
        path:'js/ZeroClipboard.swf',
        copy:$('p#description').text()
    });
    // The link with ID "copy-description" will copy
    // the text of the paragraph with ID "description"
    $('a#copy-dynamic').zclip({
        path:'js/ZeroClipboard.swf',
        copy:function(){return $('input#dynamic').val();}
    });
    // The link with ID "copy-dynamic" will copy the current value
    // of a dynamically changing input with the ID "dynamic"
});

提供自定义的回调函数

$(document).ready(function(){
    $("a#copy-callbacks").zclip({
         path:'js/ZeroClipboard.swf',
         copy:$('#callback-paragraph').text(),
         beforeCopy:function(){
         $('#callback-paragraph').css('background','yellow');
         $(this).css('color','orange');
     },afterCopy:function(){
         $('#callback-paragraph').css('background','green');
         $(this).css('color','purple');
         $(this).next('.check').show();
     }
 });

参数和默认值

设置
变量	默认值	可用的值
path *	ZeroClipboard.swf	path/to/ZeroClipboard.swf
copy *	null	any string, or any javascript expression or function that returns a string
afterCopy	null	specify a function to call after text is copied.(your afterCopy function will overwrite the default alert box.)
beforeCopy	null	specify a function to call before text is copied.
clickAfter	true	true false
setHandCursor	true	true false
setCSSEffects	true	true false
*为必填项

实例讲解

单个复制按钮

<input type="text" value="text" id="copy_txt"/><a href="javascirpt:;" id="copy_btn">复制</a>
<script>
//和html不在同一目录需设置setMoviePath
ZeroClipboard.setMoviePath('ZeroClipboard.swf');
ZeroClipboard.setMoviePath('ZeroClipboard10.swf');
var clip = new ZeroClipboard.Client();
//创建新的Zero Clipboard对象
// will be set later on mouseDown
//清空剪贴板
clip.setText('');
//设置鼠标移到复制框时的形状
clip.setHandCursor(true);
//启用css
clip.setCSSEffects(true);
//复制完成后的监听事件
clip.addEventListener('complete', function(client, text){
    alert("aa")      
    // 复制一次后，hide()使复制按钮失效，防止重复计算使用次数
    clip.hide();
});
clip.addEventListener('mouseDown', function(client){
    clip.setText(document.getElementById('copy_txt').value);
});
clip.glue('copy_btn');
</script>

多个复制按钮

<input type="text" value="text" id="copy_txt0"/><a href="javascirpt:;" id="copy_btn0" data='0' class="copyBtn">复制</a>
<input type="text" value="text" id="copy_txt1"/><a href="javascirpt:;" id="copy_btn1" data='1' class="copyBtn">复制</a>
<input type="text" value="text" id="copy_txt2"/><a href="javascirpt:;" id="copy_btn2" data='2' class="copyBtn">复制</a>
<script>
$(".copyBtn").each(function(i){
    var id = $(this).attr('data');
    var clip=null;
    clip = new ZeroClipboard.Client();
    //和html不在同一目录需设置setMoviePath
    ZeroClipboard.setMoviePath('ZeroClipboard.swf');
    ZeroClipboard.setMoviePath('ZeroClipboard10.swf');
    clip.setHandCursor(true);
    clip.setText($("#copy_txt"+id).val());
    clip.addEventListener('complete', function(client, text){
        alert("恭喜复制成功");
    });
    clip.glue('copy_btn'+id);
});
</script>

项目地址： https://github.com/wenjiangs/jquery-zclip