转载地址: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. auto与decltype

    今天搜狗笔试的一道选择题,原题给忘了,但记得所考的知识点.知识点很基础,但很容易忽视. 具体内容可参考C++ Primer. auto :变量取auto后,其所对应的类型        auto一般会 ...

  2. POJ 1273 网络流(最大流)模板

    http://poj.org/problem?id=1273 这道题很值得反思,弄了一下午,交上去先是一直编译错误,而在本地运行没有问题, 原因可能是oj的编译器版本老旧不支持这样的写法 G[from ...

  3. net-snmp子代理(SubAgent)编写详述

    net-snmp子代理(SubAgent)编写 net-snmp子代理(SubAgent)编写 Netsnmp_Node_Handler MIB/OID定义 1.头文件test.h的编写 2.test ...

  4. 5.3---找最近的两个数(CC150)

    public static int[] getCloseNumber(int x){ int[] res = new int[2]; int i = 1; int num = oneNumber(x) ...

  5. python编码问题(2)

    先上代码: # -*- coding: utf-8 -*- import sys import urllib2 import re import chardet import sys print sy ...

  6. 【MavenWeb】初探:创建一个Maven Web项目

    第一步:创建一个Simple的Maven项目 直接点下一步,把name上面的几个部分填写好,直接Finish即可. 就可以看到如下的结构: 注意点1:如果按照网上的其他一些做法来创建,你会发现少了sr ...

  7. phpcms新闻详情页上一篇下一篇的实现

    在新闻详情页(show.html或show_*.html) 只需要添加类似如下代码即可: <div>上一篇:<a href="{$previous_page[url]}&q ...

  8. Max Subsequence

    一个sequence,里面都是整数,求最长的subsequence的长度,使得这个subsquence的最大值和最小值相差不超过1. 比如[1,3,2,2,5,2,3,7]最长的subsequence ...

  9. Ubuntu下安装eclipse

    一.eclipse安装环境JDK的安装 1.下载JDK 从官网下载jdk8 jdk-8u5-linux-x64.tar.gz 2.解压$ tar -zxvf jdk-8u5-linux-x64.tar ...

  10. [转载]Python 3.5 协程究竟是个啥

    http://blog.rainy.im/2016/03/10/how-the-heck-does-async-await-work-in-python-3-5/ [译] Python 3.5 协程究 ...