jquery.zclip.js jquery剪贴板插件

最近在做公司的粉丝节活动开发,开发中涉及到了一个复制邀请码到剪切板的小功能,看起来挺简单的一个小模块,在IE下实现也确实比较简单。但因js兼容性问题要想做到跨浏览器比较困难了,最后找到一个叫Zero Clipboard 的插件,兼容IE,FF , Chrome, Safari等,搜狗和QQ、Opera未作测试,它是通过Flash复制的,想必都是兼容的。 当然万事不是完美的,它也有缺点,比如在移动设备上,或者浏览器不支持flash时可能就悲催了,这些极端情况下需要作特殊处理~!

Zero Clipboard 的实现原理是利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了。 使用也比较简单,下载 Zero Clipboard ,并解压缩。其中需要三个文件:Jquery.zclip.min.js 和 ZeroClipboard.swf ,还有Jquery.js,将这三个文件放入到项目中后就可以开始编码工作了,参考:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>

$(function(){
    $("#复制按钮Id").zclip({
        path: "ZeroClipboard.swf",//Flash文件路径
        copy: function(){
            //复制内容
            return $("#被复制内容容器Id").val();
        },
        afterCopy: function(){
            //复制成功,
            //如果不设置这个回调函数,那么复制成功会默认alert一个提示,设置这个函数了,就不走插件默认的alert了
            //当然提示文案是英格力士,可以自行在jquery.zclip.min.js中修改,注意编码
            $("#提示语容器").html("复制成功!");
        }
    });
});

以上path和copy是必填项,类似afterCopy的还有beforeCopy,clickAfter,setHandCursor,setCSSEffects几个,反正我没用上。也没去研究。需要自行查文档

You may also like

4条评论

    1. 不影响的吧,我查了下,原文是“如果Flash内容出现网页上,Chrome将自动检测并播放最重要的内容,比如出现的视频播放器,而暂停播放其它所有的Flash。用户仍然可以播放其它的内容,但是需要手动去选择要播放的内容。这个举措将影响到世面上非常多的那些仍在使用Adobe技术的网页”

发表评论

电子邮件地址不会被公开。 必填项已用*标注

You must enable javascript to see captcha here!