Jquery跨浏览器文本复制插件Zero Clipboard的使用方法

当开发者需要对某局部文本进行点击复制效果时,在IE下实现比较简单 。但要想做到跨浏览器比较困难了 。Zero Clipboard 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比IE的document.execCommand(“Copy”) 更加灵活 。
Zero Clipboard 的实现原理
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 ,将这两个文件放入到你的项目中 。
用法:
1.) 首先引入核心文件

Jquery跨浏览器文本复制插件Zero Clipboard的使用方法


2.) 在页面代码里写入功能模块,定义copy复制按钮元素属性信息
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法


【Jquery跨浏览器文本复制插件Zero Clipboard的使用方法】例一:
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法


例二:
点击复制效果预览:
3.) 供应定制的回调函数 。
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法


3.) 默认参数 。
扩展介绍:
1.) 测试兼容IE6,IE7,IE8,FF 3.6,Chrome浏览器8,Safari 5的,歌剧11
2.) 适当的CSS特效:
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法




    推荐阅读