jQuery插件:跨浏览器复制jQuery-zclip(转载)
转载地址: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用法
![](https://common.cnblogs.com/images/copycode.gif)
//引入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">复 制</a>
</div>
</div>
![](https://common.cnblogs.com/images/copycode.gif)
配置说明
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(转载)的更多相关文章
- jQuery插件:跨浏览器复制jQuery-zclip
jQuery-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题.jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe F ...
- ZeroClipboard / jquery.zclip.min.js跨浏览器复制插件使用中遇到的问题解决
之前写过一个淘宝优惠券连接PC端转手机端连接的小工具,当时写到将转换好的url复制到剪切板这块时解决了IE和火狐,就是没办法搞定Chrome,知道可以通过flash搞定,但是觉得太麻烦没有仔细研究. ...
- 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题
Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flas ...
- ZeroClipboard跨浏览器复制粘贴
<!DOCTYPE html> <html> <head> <title>ZeroClipboard跨浏览器复制粘贴</title> < ...
- 实用的插件:跨浏览器复制jQuery-zclip
Query-zclip是一个复制内容到剪贴板的jQuery插件,使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题.jQuery-zclip插件需要Flash的支持,使用时记得安装Adobe Fl ...
- 跨浏览器复制神器 ZeroClipboard 2.x快速入门详解
有些时候,我们希望让用户在网页上完成某个操作就能自动将指定的内容复制到用户计算机的剪贴板中.但是出于安全原因,大多数现代浏览器都未提供通用的剪贴板复制接口(或即便有,也默认被禁用).只有IE浏览器可以 ...
- jQuery插件接口的实现,jquery.extend
http://www.imooc.com/code/3403 如果jQuery没有插件接口的设计,那么他就像个光杆司令没有兵,就是没有手下,只有自己一个封闭的城堡.因此jQuery城堡需要设计一个大门 ...
- 编写jQuery插件(二)——jQuery插件类型和机制
jQuery插件类型 jQuery插件主要有3种类型: 1.封装对象方法的插件 这种插件类型是最常见的一种插件,它将对象方法封装起来,对通过选择器获取的jQuery对象进行操作. 2.封装全局函数的插 ...
- 不定义JQuery插件 不要说会JQuery
二.普及JQuery知识 知识1:用JQuery写插件时,最核心的方法有如下两个: $.extend(object) 可以理解为JQuery 添加一个静态方法. $.fn.extend(object) ...
随机推荐
- STM32F103ZET6 用定时器级联方式输出特定数目的PWM(转载)
STM32F103ZET6里共有8个定时器,其中高级定时器有TIM1-TIM5.TIM8,共6个.这里需要使用定时器的级联功能,ST的RM0008 REV12的P388和P399页上有说明对于特定的定 ...
- log4j配置日志文件log4j.appender.R.File相对路径方法
方法一. 解决的办法自然是用相对路径代替绝对路径,其实log4j的FileAppender本身就有这样的机制,如:log4j.appender.logfile.File=${WORKDIR}/logs ...
- SDL播放视频
// PlayVideo.cpp : Defines the entry point for the console application. // extern "C" { #i ...
- 使用 PHP 7 给 Web 应用加速
PHP 20周年了!?? PHP 首发通告,1995年6月8日 发布于 COMP.INFOSYSTEMS.WWW.AUTHORING.CGI 主题:正式宣布:个人主页工具(Personal Home ...
- php中array_filter的使用
这是今天在做作业的时候遇到的一个问题,不知道大家有没有遇到同样的问题,就是去除数组中不符合我们条件的数据并且保留其键名. 言归正传: array array_filter ( array $input ...
- 【GoLang】类型和作用在它上面定义的方法必须在同一个包里定义
cannot define new methods on non-local type int 参考资料: http://wiki.jikexueyuan.com/project/the-way-to ...
- 【GoLang】与或非 异或操作
在Go规范,^这个运算符在一元运算符和二元运算符中都出现了.那么他们分别是啥?在规范中说道:^ bitwise XOR integers这是按位异或. Go语言位操作实例 <!-- lang: ...
- javascript 搜索并高亮显示
2015年12月22日 15:45:08 星期二 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者 ...
- ACM/ICPC 之 Floyd练习六道(ZOJ2027-POJ2253-POJ2472-POJ1125-POJ1603-POJ2607)
以Floyd解法为主的练习题六道 ZOJ2027-Travelling Fee //可免去一条线路中直接连接两城市的最大旅行费用,求最小总旅行费用 //Time:0Ms Memory:604K #in ...
- 【elasticsearch】python下的使用
有用链接: 最有用的:http://es.xiaoleilu.com/054_Query_DSL/70_Important_clauses.html 不错的博客:http://www.cnblogs. ...