jquery.zclip—复制剪贴板（兼容各大浏览器）

开始前说两句

WEB开发中，要让用户复制页面中的一段代码、URL地址等信息，为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错，我们可以直接在页面中放置一个复制按钮，只需要轻轻一点这个复制按钮，内容将会被复制，然后用户可以粘贴到想粘贴的地方。

jQuery-zclip是一个复制内容到剪贴板的jQuery插件，使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。jQuery-zclip插件需要Flash的支持，使用时记得安装Adobe Flash Player。

用法-参数：

$(function () {
     $('#clip').zclip({
            path: 'ZeroClipboard.swf',//flash路径
            copy: null,//copy的文本，可以是字符串，也可以使回调函数function(){return ""}
            beforeCopy: null,//复制前处理要做些什么(会在鼠标点击时触发)，function(){}
            afterCopy: null,//复杂成功之后做些什么（如果不设置此参数，插件会有个默认的alert()，超过500个字符会被截取显示）
            clickAfter: true,//不是很清楚，有知道的评论下。我理解的是添加  点击事件，默认的是鼠标 mouseenter mouseleave mousedown
            setHandCursor: true,//设置是否显示鼠标手势光标
            setCSSEffects: true //设置是否添加class,对点击DOM容器的影响（默认会在DOM容器添加class='hover'）
      });
　　　//另外三个方法
　　　$('#clip').zclip('show');//复制功能有效,就是把flash显示，调用的jquery-show方法
     $('#clip').zclip('hide');//复制功能无效，就是把flash隐藏，调用的jquery-hide方法
     $('#clip').zclip('remove');//完全移除复制功能，就是把flash移除，调用的jquery-remove方法
});

完整的代码：

<html>
<head>
    <meta charset="UTF-8">
    <title>jquery.zclip.js复制</title>
</head>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.zclip.min.js"></script>
<script>
    $(function () {
        $('#clip').zclip({
            path:'ZeroClipboard.swf',
            copy: function () { 
                return $("#clipTxt").html(); 
            } 
        });
    });
</script>
<body>
<div id="clip">点击拷贝</div>
<p id="clipTxt">拷贝abc</p>
</body>
</html>

 

 默认弹窗效果：

注意点

1.弹出框出现“Copied text to clipboard”英文字符，有点不符国人使用习惯，把它改为“成功复制到剪切板”，在jquery.zclip.min.js文件中找到“Copied text to clipboard”替换成你想要的文字就可以了，\n是换行，后面的"g"，是你复制的字符串；默认的弹窗是会截取字符串的，超过500个字符后面的字符会以省略号代替

2.设置afterCopy之后，默认的弹窗就不会出现了

 

demo下载：zclip-复制剪贴板.zip

 

posted @ 2016-11-05 15:58  羯瑞  阅读(579)  评论(0)  编辑  收藏  举报