Query-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-zclip的更多相关文章

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

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

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

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

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

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

  4. ZeroClipboard跨浏览器复制粘贴

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

  5. 兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是 ...

  6. jQuery插件:跨浏览器复制jQuery-zclip(转载)

    转载地址:http://www.cnblogs.com/linjiqin/p/3532451.html jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和 ...

  7. 【转载】兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能

    文章转载自 代码家园 http://www.daimajiayuan.com/ 原文链接:http://www.daimajiayuan.com/sitejs-17973-1.html原文摘要: 相信 ...

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

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

  9. js跨浏览器复制: ZeroClipboard

    实例结构: demo.html <script type="text/javascript" src='http://code.jquery.com/jquery.js'&g ...

随机推荐

  1. topsort | | jzoj[1226] | | NOIP2003神经网络

    今天终于通过了那道永远都看不懂题目的神经网络... 所谓拓扑排序,就是在有向无环图中,根据已经有的点和点之间的关系进行排序 引用jzyz教材上的栗子:比如说奶牛比较食量大小,我现在拿到的是cow[i] ...

  2. 初入Cocos2d-x 2.2

    下载2.2,用迅雷离线下载很快搞定. 解压后,打开cocos2d-win32.vc2012.sln,编译,超慢,20分钟才完事. 然后想创建一个新项目,需要用到python,用python3.3运行脚 ...

  3. Failed to execute goal on project MakeFriends: Could not resolve dependencie The POM for .chengpai.jtd:jtd-service-api:jar:1.0-SNAPSHOT is missing, no dependency information available

    本笔者在学习maven的基础,然后建立了一个maven的项目,然后想对其进行依赖操作,pom.xml进行依赖操作时候出现了这样的错误,说是找不到这个依赖的包,但是事实上已经导入了这个包. 同时,也在m ...

  4. JDBC学习笔记(1)

    说明:本系列学习笔记主要是学习传智播客的李勇老师的教学课程和一本英文电子书<JDBC Recipes A Problem-Solution Approach>所作的笔记. 1,什么是JDB ...

  5. SQL 修改列名

    exec sp_rename 'student.Ssex','Sex','column'; 执行后就可达到目的. 即是运用了 exec sp_rename '表明.原列名','新列名','column ...

  6. ElasticSearch学习笔记-01 简介、安装、配置与核心概念

    一.简介 ElasticSearch是一个基于Lucene构建的开源,分布式,RESTful搜索引擎.设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便.支持通过HTTP使用JSON进 ...

  7. Android学习整理之Activity生命周期篇

    一.Activity生命周期说明   Activity的四种状态: ⒈活动状态(Active or Running):也称为运行状态,处于Activity栈顶,在用户界面中最上层,完全能被用户看到,能 ...

  8. TeraData金融数据模型

    Teradata天睿公司(纽交所代码:TDC),是美国前十大上市软件公司之一.经过逾30 年的发展,Teradata天睿公司已经成为全球最大的专注于大数据分析.数据仓库和整合营销管理解决方案的供应商. ...

  9. 设计模式之美:Singleton(单件)

    索引 意图 结构 参与者 适用性 缺点 效果 相关模式 实现 实现方式(一):使用 Static 变量初始化 Singleton. 实现方式(二):使用 Lazy Initialization 来实现 ...

  10. IIS7 配置

    1.配置应用程序池->高级设置 (1) .net Framework版本 :V4.0 (2)启用32位应用程序 :True (3)特定时间: 上班之前,下班之后 2.网站配置->高级设置 ...