Zeroclipboard 的实现原理
Zeroclipboard 利用 Flash
进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash。但最新的 Flash Player 10 只允许在
Flash 上进行操作才能启动剪贴板。所以 Zero Clipboard 对此进行了改进,用了一个透明的 Flash
,让其漂浮在按钮之上,这样其实点击的不是按钮而是 Flash ,也就可以使用 Flash 的复制功能了。
如何使用 Zeroclipboard
首先下载 Zeroclipboard,并解压缩。其中需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf ,将这两个文件放入到你的项目中。
其次,该效果只能放在服务器上后才能看到,所以,你可以在你的PC的IIS中建立一个虚拟的项目即可。
效果如下:
话不多说,直接上代码:
引用:
<script src="jquery.min.js"></script> <script src="jquery.ZeroClipboard.js"></script>
HTML code:
<input type="text" id="txt" class="txt" /> <input type="button" value="点击复制" id="copy" class="copy" data-clipboard-target="txt" />
JS code:
<script> $(function(){ //复制URL var clip = new ZeroClipboard(document.getElementById("copy"),{ moviePath: "ZeroClipboard.swf" }); //复制成功 clip.on(‘complete‘, function(client, args){ //args.text alert("已经复制到剪贴板"); }); }) </script>
点击下载ZeroclipboardJS+flash实现将内容复制到剪贴板实例DEMO
时间: 2024-11-05 11:30:36