转载地址: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. 跟着百度学PHP[4]OOP面对对象编程-15-魔术方法__call方法

    简而言之就是调用了一个类中没有的方法就会自动调用__call()方法, 该参数有两个必须的参数! 第一个参数:调用的不存在的方法的方法名. 第二个参数:调用不存在的方法的参数. 但是总的说回来,__c ...

  2. Linux的五个查找命令

    1. find find是最常见和最强大的查找命令,你可以用它找到任何你想找的文件. find的使用格式如下: $ find <指定目录> <指定条件> <指定动作> ...

  3. symfony2 环境搭建笔记

    本机环境:windows+xampp symfony下载:官网下载 环境配置: 1.下载后将symfony文件夹解压到xampp/htdocs中(最好改一下文件夹名,尽量小写) 2.Symfony2自 ...

  4. Clone Graph

    Clone an undirected graph. Each node in the graph contains a label and a list of its neighbors. OJ's ...

  5. spring3 的restful API RequestMapping介绍

    原文链接:http://www.javaarch.net/jiagoushi/694.htm spring3 的restful API RequestMapping介绍 在spring mvc中 @R ...

  6. 彻底卸载MySql

    刚装了下MySql,装的过程中由于修改了服务名,导致最后配置假死,不得已,重装. 但是重装时总是失败,于是google了一下,找到彻底卸载mysql的方法: 最近安装本地测试用 MySQL 服务器时总 ...

  7. javascript 解析dom字符串

    知识要求:1:熟悉dom结构层次(如childNodes,nodeType,parent,children)等. 2:熟悉jq对象转换js 对象,反之 毕竟不是专业js人.借助第3方框架.其实jq也是 ...

  8. 右下角浮窗&动画效果

    2015-07-17 11:07:57 CSS #goreg { width: 70px; position: fixed; bottom: 20px; right: 25px; ; opacity: ...

  9. MySQL Got fatal error 1236原因和解决方法【转】

    本文来自:http://blog.itpub.net/22664653/viewspace-1714269/ 一 前言  MySQL 的主从复制作为一项高可用特性,用于将主库的数据同步到从库,在维护主 ...

  10. java sleep() 、yield()

    1.sleep() 使当前线程(即调用该方法的线程)暂停执行一段时间,让其他线程有机会继续执行,但它并不释放对象锁.也就是说如果有synchronized同步快,其他线程仍然不能访问共享数据.注意该方 ...