Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
当开发者需要对某局部文本进行点击复制效果时，在IE下实现比较简单。但要想做到跨浏览器比较困难了。ZeroClipboard它利用Flash进行复制，所以只要浏览器装有Flash就可以运行，而且比IE的document.execCommand(“Copy”)更加灵活。
ZeroClipboard的实现原理
ZeroClipboard利用Flash进行复制，之前有ClipboardCopy解决方案，其利用的是一个隐藏的Flash。但最新的FlashPlayer10只允许在Flash上进行操作才能启动剪贴板。所以ZeroClipboard对此进行了改进，用了一个透明的Flash，让其漂浮在按钮之上，这样其实点击的不是按钮而是Flash，也就可以使用Flash的复制功能了。
ZeroClipboard特点介绍：
兼容支持Flash10
避免使用第三方浏览器插件（的AdobeFlash浏览器中的安全冲突）
无形的覆盖，无干扰，页面设计
支持CSS“悬停”和“活跃”状态
保留目标元素的“点击”，”mouseenter”和”mouseleave”的事件
供应回调函数“复制前”和“复制”
极轻的重量！（7KB精缩）
首先下载ZeroClipboard，并解压缩。其中需要两个文件：ZeroClipboard.js和ZeroClipboard.swf，将这两个文件放入到你的项目中。
点击下载：jquery.zclip.1.1.1
用法：
1.)首先引入核心文件
<scripttype="text/javascript"src="js/jquery.js"></script> <scripttype="text/javascript"src="js/jquery.zclip.js"></script>
2.)在页面代码里写入功能模块，定义copy复制按钮元素属性信息
<scriptlanguage="javascript">
$(document).ready(function(){
$('a#copy-description').zclip({
path:'js/ZeroClipboard.swf',
copy:$('p#description').text()
});
//ThelinkwithID"copy-description"willcopy
//thetextoftheparagraphwithID"description"
$('a#copy-dynamic').zclip({
path:'js/ZeroClipboard.swf',
copy:function(){return$('input#dynamic').val();}
});
//ThelinkwithID"copy-dynamic"willcopythecurrentvalue
//ofadynamicallychanginginputwiththeID"dynamic"
});
</script>
例一：
<ahref="#"id="copy-description">点击复制效果预览</a> <pid="description">文本源……</p>
例二：
<ahref="#"id="copy-dynamic">点击复制效果预览:</a><inputstyle="width:300px;margin-left:15px;"type="text"id="dynamic"value="Insertanytexthere."onfocus="if(this.value=='Insertanytexthere.'){this.value=''}"onblur="if(this.value==''){this.value='Insertanytexthere.'}"/>
3.)供应定制的回调函数。
<scriptlanguage="javascript">
$(document).ready(function(){
$("a#copy-callbacks").zclip({
path:'js/ZeroClipboard.swf',
copy:$('#callback-paragraph').text(),
beforeCopy:function(){
$('#callback-paragraph').css('background','yellow');
$(this).css('color','orange');
},
afterCopy:function(){
$('#callback-paragraph').css('background','green');
$(this).css('color','purple');
$(this).next('.check').show();
}
});
});
</script>
3.)默认参数。
扩展介绍：
1.)测试兼容IE6，IE7，IE8，FF3.6，Chrome浏览器8，Safari5的，歌剧11
2.)适当的CSS特效：
/*zClipisaflashoverlay,soitmustprovide*/
/*thetargetelementwith"hover"and"active"classes*/
/*tosimulatenative:hoverand:activestates.*/
/*BesuretowriteyourCSSasfollowsforbestresults:*/
/*大概意思就是说ZeroClip是flash叠加……就是说flash叠加在了text文本上，其实显示文字可以根据css来定义*/
a:hover,a.hover{...}
a:active,a.active{...}
在线演示：
1、http://demo.jb51.net/js/2016/jquery_zclip/demo1.html
2、http://demo.jb51.net/js/2016/jquery_zclip/demo2.html
至此，该插件使用方法已经介绍结束，对于使用者的开发者来说，剩下的扩展方面就要根据需求而定了。