当开发者需要对某局部文本进行点击复制效果时,在IE下实现比较简单。但要想做到跨浏览器比较困难了。Zero Clipboard 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比IE的document.execCommand(“Copy”) 更加灵活。
[b]Zero Clipboard 的实现原理[/b]
Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash ,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了。
Zero Clipboard 特点介绍:
兼容支持Flash 10
避免使用第三方浏览器插件(的Adobe Flash浏览器中的安全冲突)
无形的覆盖,无干扰,页面设计
支持CSS“悬停”和“活跃”状态
保留目标元素的“点击”,”mouseenter”和”mouseleave”的事件
供应回调函数“复制前”和“复制”
极轻的重量! (7KB精缩)
首先下载 Zero Clipboard ,并解压缩。其中需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf ,将这两个文件放入到你的项目中。
点击下载:[url=http://www.1sucai.cn/jiaoben/434621.html]jquery.zclip.1.1.1[/url]
用法:
1.) 首先引入核心文件
[url=#]
<p id="description">文本源……</p>
例二:
<a href="#" id="copy-dynamic">点击复制效果预览:</a><input style="width:300px; margin-left:15px;" type="text" id="dynamic" value="Insert any text here." onfocus="if(this.value=='Insert any text here.'){this.value=''}" onblur="if(this.value==''){this.value='Insert any text here.'}" />
3.) 供应定制的回调函数。
<script language="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,FF 3.6,Chrome浏览器8,Safari 5的,歌剧11
2.) 适当的CSS特效:
/* zClip is a flash overlay, so it must provide */
/* the target element with "hover" and "active" classes */
/* to simulate native :hover and :active states. */
/* Be sure to write your CSS as follows for best results: */
/*大概意思就是说 ZeroClip是flash叠加……就是说flash叠加在了text文本上,其实显示文字可以根据css来定义*/
a:hover, a.hover {...}
a:active, a.active {...}
在线演示:
1、[url=http://demo.jb51.net/js/2016/jquery_zclip/demo1.html]http://demo.jb51.net/js/2016/jquery_zclip/demo1.html[/url]
2、[url=http://demo.jb51.net/js/2016/jquery_zclip/demo2.html]http://demo.jb51.net/js/2016/jquery_zclip/demo2.html[/url]
至此,该插件使用方法已经介绍结束,对于使用者的开发者来说,剩下的扩展方面就要根据需求而定了。