转载地址:http://www.cnblogs.com/linjiqin/p/3532451.html

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

1、jQuery-zclip插件官网
ZeroClipboard.swf下载地址

2、jQuery-zclip用法

//引入jQuery-zclip相关js及swf文件
<script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/resources/js/jquery.zclip.min.js"></script>
<script type="text/javascript">
$(function(){
$("#cp-btn").zclip({
path:'<%=path%>/resources/js/ZeroClipboard.swf', //记得把ZeroClipboard.swf引入到项目中
copy:function(){
return $('#inviteUrl').val();
}
});
});
</script> <div class="form-row">
<div class="col-md-5">
<input class="form-control" value="" id="inviteUrl"/>
</div>
<div class="col-md-1">
<a href="javascript:void(0)" id="cp-btn"
class="btn btn-default btn-block btn-clean">复&nbsp;&nbsp;制</a>
</div>
</div>

配置说明
path:swf的路径(复制主要是用flash解决不同浏览器的复制)
copy:待复制的内容, 可以是静态内容, 也可以 return 动态内容
beforeCopy:复制之前要做的function;
afterCopy:复制之后要做的function;

提供了3个方法
show:$(selected).zclip('show');//复制功能有效
hide:$(selected).zclip('hide');//复制功能无效
remove:$(selected).zclip('remove');//完全移除复制功能

3、演示效果
运行成功后,点击复制按钮,会弹出一个提示框,表示复制到剪切板生效了,如下:

弹出框出现“Copied text to clipboard”英文字符,有点不符国人使用习惯,把它改为“成功复制到剪切板”,在jquery.zclip.min.js文件中找到“Copied text to clipboard”替换成“成功复制到剪切板”就可以了,效果如下:

jQuery插件:跨浏览器复制jQuery-zclip(转载)的更多相关文章

  1. jQuery插件:跨浏览器复制jQuery-zclip

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

  2. ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决

    之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...

  3. 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

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

  4. ZeroClipboard跨浏览器复制粘贴

    <!DOCTYPE html> <html> <head> <title>ZeroClipboard跨浏览器复制粘贴</title> < ...

  5. 实用的插件:跨浏览器复制jQuery-zclip

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

  6. 跨浏览器复制神器 ZeroClipboard 2.x快速入门详解

    有些时候,我们希望让用户在网页上完成某个操作就能自动将指定的内容复制到用户计算机的剪贴板中.但是出于安全原因,大多数现代浏览器都未提供通用的剪贴板复制接口(或即便有,也默认被禁用).只有IE浏览器可以 ...

  7. jQuery插件接口的实现,jquery.extend

    http://www.imooc.com/code/3403 如果jQuery没有插件接口的设计,那么他就像个光杆司令没有兵,就是没有手下,只有自己一个封闭的城堡.因此jQuery城堡需要设计一个大门 ...

  8. 编写jQuery插件(二)——jQuery插件类型和机制

    jQuery插件类型 jQuery插件主要有3种类型: 1.封装对象方法的插件 这种插件类型是最常见的一种插件,它将对象方法封装起来,对通过选择器获取的jQuery对象进行操作. 2.封装全局函数的插 ...

  9. 不定义JQuery插件 不要说会JQuery

    二.普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) ...

随机推荐

  1. Laravel 5.1 文档攻略 —— Eloquent:模型关系

    简介 其实大家都知道,数据表之间都是可以关联的,前面讲过了,Eloquent ORM是数据模型操作代替表操作,那么表的关联查询,在Eloquent这里也就是模型间的关联查询,这就是本章的主要内容: E ...

  2. MVPHelper

    在MVP的使用过程中,我们需要反复的去写各种MVP的接口和实现类, 实在是 太麻烦了!!所以抽时间撸了一款插件(只可用于Intellj IDEA 和 Android Studio),用于生成MVP接口 ...

  3. VB .NET周期实现

    这里仅提供一个方案,当然会有比本方案更好的,欢迎提供. 简介 在vb.net实现周期调度的问题时(就是间隔固定的时间做什么事情),我们最先想到的一定是(反正我是)利用timer(定时器)来做这个计时的 ...

  4. BZOJ 4547: Hdu5171 小奇的集合

    Sol 首先,考虑这个要怎么搞...让总和最大的方法就是选出当前集合中最大的两个数相加放入集合中就可以了,证明非常简单,当前集合的和为x,它的和只会一直往后增加,所以只需要找到最大的两个数的和加入便是 ...

  5. GCD-Grand Central Dispatch

    经常要用的,总结分类一下. //获得队列 DISPATCH_QUEUE_PRIORTY 优先级 dispatch_queue_t Queue = dispatch_get_global_queue(D ...

  6. 算法题解之math类题

    Bulb Switcher 灯泡开关 思路:除了平方数以外,其他所有位置的灯泡最终都被开关了偶数次,因此最终都为0.问题等价于求1~n中平方数的个数. public class Solution { ...

  7. Eclipse J2EE LUNA 部署tomcat

  8. 【System】shell 实现 bat 的pause功能

    read -rsp $'Press enter to continue...\n' 参考资料: http://stackoverflow.com/questions/92802/what-is-the ...

  9. 如何查看Git对象

    原文:http://gitbook.liuhui998.com/7_2.html 如果在阅读本文之前,你还不知道git是如何进行存储的,请先阅读<Git是如何存储对象的>. 我们可以使用c ...

  10. 【leetcode】Reverse Linked List II

    Reverse Linked List II Reverse a linked list from position m to n. Do it in-place and in one-pass. F ...