jquery zclip复制页面的链接或者文本内容

最近做项目需要复制网页中的链接的功能，于是网上各种找方法，最后发现zclip挺好用的，用的人也多，于是就拿来试试了。

jQuery-zclip是一个复制内容到剪贴板的jQuery插件，使用它我们不用考虑不同浏览器和浏览器版本之间的兼容问题。

jQuery-zclip插件需要Flash的支持，使用时记得安装Adobe Flash Player。

还有一点非常重要的，本来想放到最后的，为了醒目，就放在这里了，Zclip的官网有这样一句话：



“support for CSS ":hover" and ":active" states，所以我们一定要保证有hover和active哦。

先来写下最基本的操作吧。

首页，需要下载资源包，jQuery文件，jquery.zlicp.js 还有ZeroClipboard.swf。

然后就可以开始写代码啦，开始喽

html中：

<div class="copy_div">
<input type="text" class="url_input" value="http://localhost:8090/wx/index.jsp" >
<a href="javascript:void(0)" id="cp-btn" class="btn btn-primary">复制链接</a>
</div>

js复制代码：

$("#cp-btn").zclip({
<span style="white-space:pre">	</span>path:'${ctx}/resources/js/ZeroClipboard.swf', //记得把ZeroClipboard.swf引入到项目中
copy:function(){
return $(this).prev("url_input").val();
},
afterCopy: function(){
tishi(1500, "复制成功");
}
});

配置说明

path:swf的路径(复制主要是用flash解决不同浏览器的复制)

copy:待复制的内容, 可以是静态内容, 也可以 return 动态内容

beforeCopy:复制之前要做的function;

afterCopy:复制之后要做的function;

提供了3个方法

show:$(selected).zclip('show');//复制功能有效

hide:$(selected).zclip('hide');//复制功能无效

remove:$(selected).zclip('remove');//完全移除复制功能
上面的这种写法，在一般的页面都是没有问题的，但是当我们要复制的内容是嵌套在dialog或者bootstrap 的modal中的时候，这种写法就不能使用了。
我们项目中有两个地方要用到复制地址的功能，其中一个就在普通的页面上，上面的方法就OK。但是还有一个是在bootstrap的modal中，试了很多方法都不行，我一直纠结了好久呢.........
终于，找到方法了，哈哈
原因是zclip初始化的时候，modal还没有load出来，所以可以放在modal的“shown”之后再初始化zclip。
但是如果还是用下载下来的js文件，我发现只能走到“copy”的方法中，但是不能真正的复制
所以我使用了bootstrap的zclip CDN，然后发现真的OK了，太神奇了
好了，不罗嗦啦，上代码：

<span style="font-size:18px;">$('#myModal').on('shown.bs.modal', function () {
$("#copy_qcode").delay(250).queue(function(next){
$(this).zclip('show');
$(this).zclip({
path: "http://cdn.bootcss.com/zclip/1.1.2/ZeroClipboard.swf",
copy: function(){
<span style="white-space:pre">	</span>return $(this).attr("data-href");
},
afterCopy:function(){
window.top.tishi(1500,"复制成功");
}
});
});
});</span>

顺便补充一下：CDN的地址是：Bootstrap Zclip CDN