最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jquery.zclip复制内容到剪贴板兼容各浏览器

来源:http://www.erdangjiade.com/ 沐浴春风 2014-12-09 16:48浏览(1514)

在一些网站中,我们会经常会遇到复制页面中的一段代码、URL地址、折扣码等信息,我们可以直接在页面中放置一个复制按钮,点击复制按钮,用户便可以复制内容。本文所需要的Zclip复制插件,是利用一个隐藏的flash文件来完成复制的功能,关键是它兼容当前各主流浏览器。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jquery.zclip复制内容到剪贴板兼容各浏览器
分类:其它特效 > 复制功能 难易:初级
查看演示 下载资源: 122

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

HTML

首先引入jquery.js和zclip插件。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>

接着我们在页面中加入复制按钮和输入框

<textarea id="content">请输入内容

当点击“复制内容”时,调用zclip插件,并提示复制成功,请看代码:

$(function() {
    $('#copy_btn').zclip({
        path: 'js/ZeroClipboard.swf',
        //flash地址
        copy: function() { //复制返回值
            return $('#content').val();
        },
        afterCopy: function() { //复制后操作方法
            $("<span id='tip'/>").insertAfter($('#copy_btn')).text('复制成功,右击粘贴试试').fadeOut(2000);
        }
    });
});

值得一提的是,少数用户可能没有装flash。So我们提供一个判断用户是否安装flash,若是有继续执行上面的操作,若是没有可以提示 ”亲,请您手动复制。。“

function flashChecker() {//返回1 说明已安装falsh
    var hasFlash = 0;//初始化未安装
    if (document.all) { //IE浏览器
        var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
        if (swf) {
            hasFlash = 1; //安装了falsh
        }
    } else { //其他浏览器
        if (navigator.plugins && navigator.plugins.length > 0) {
            var swf = navigator.plugins["Shockwave Flash"];
            if (swf) {
                hasFlash = 1;//安装了falsh
            }
        }
    }
    return hasFlash;//    return {f: hasFlash, v: flashVersion};
}

Zclip参数设置

参数 描述 默认值
path swf调用路径,必须,如js/ZeroClipboard.swf,ZeroClipboard.swf “ZeroClipboard.swf”
copy 复制的内容 null
回调函数

copy: function(){},

afterCopy: function(){},

beforeCopy: function(){}

-
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/15.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2