wordpress中ZeroClipboard实现js+flash跨浏览器剪切板复制粘贴

作者:Matrix 被围观: 1,669 次 发布时间:2013-09-16 分类:wordpress建站 码字型 零零星星 | 无评论 »

NOTICE:这是一个创建于 1182 天前的主题,其中的信息可能已经有所发展或是发生改变。

用ZeroClipboard跨浏览器实现复制到剪切板,兼容ie、chrome、firefox等等支持flash的浏览器。

Wordpress中ZeroClipboard实现js+flash跨浏览器剪切板复制粘贴

ZeroClipboard以前在google代码的项目404,发现个神似ZeroClipboard的zClip 项目:http://www.steamdev.com/zclip/

其余项目:可以参考http://zeroclipboard.org/

网上关于ZeroClipboard的有很多,有些不能用 看着也杂~

下面记录自用ZeroClipboard的代码。点击查看最新版本的简单设置

ZeroClipboard version: "1.0.7"

js和swf下载:
http://www.400gb.com/file/28619600
http://pan.baidu.com/share/link?shareid=3611655227&uk=3238236832

步骤:

1.修改压缩包中zpCOPY.js的第九行:

    moviePath: 'zpCOPY.swf', // URL to movie

确保zpCOPY.swf路径的正确,建议使用绝对地址(形如http://www.hhtjim.com/zpCOPY.swf)。
2.在需要调用复制的页面加入js代码:

  1. <script type="text/javascript" src="http://www.hhtjim.com/zpCOPY.js"></script>
  2. <script type="text/javascript">
  3. var clip = null;
  4. function $(id) { return document.getElementById(id); }
  5. function init() {
  6. clip = new ZeroClipboard.Client();
  7. clip.setHandCursor(true);
  8. clip.setText($('text').value);
  9. clip.glue('anniu');
  10. clip.addEventListener( "complete"function(){
  11.     alert("复制成功!");
  12. });
  13. clip.addEventListener( "load"function(client) {
  14.     client.movie.title="复制本文固定链接";
  15. });
  16. }
  17. </script>

说明:

第1行的js地址可自定义

第8、9行的text、anniu为第3步代码中对应的id值

第10、11行是复制后的弹窗提示。

3.同上,放在那页面,适当位置添加:

  1. <body onLoad="init()"></body>
  2. <textarea style="display:none" id="text" ><?php the_permalink() ?></textarea>
  3. &nbsp;&nbsp;&nbsp;&nbsp; <a id="anniu" href='javascript:void(0);' title="复制本文链接">+复制链接</a>

说明:

第1行的onLoad="init()"为打开页面即加载init函数。缺少此行会导致加载flash失败。

第2行为需要复制的文本内容。这里的复制的内容是<textarea里的<?php the_permalink() ?>返回的WordPress文章网址。

经测试无法复制其他标签的文字,只有<textarea标签里的可用。由于文本框有点占位置,所以做了隐藏style="display:none"。

第3行为点击复制的那个按钮。

4.之后就成功了。

经本地测试chrome 版本 28.0.1500.95 m、ie10、firefox 23.0.1 复制成功!

本地测试于NGRO主题  💡

本地测试于NGRO主题

弹窗提示

弹窗提示

参考:http://www.myext.cn/webkf/27383.html

http://keleyi.com/a/bjac/3wjq3xm2.htm

zclip DEMO:http://www.steamdev.com/zclip/

 


最新的v1.1.1版本  更简单

需要调用JQ库和zclip.min.js:

  1. <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  2. <script type="text/javascript" src="http://file.icycat.com/view/js/jquery.zclip.min.js"></script>

然后是复制的按钮和文本代码:

  1. <a type="button" id="anniu" class="btn" > 复制 </a>
  2. <a style="display:none" id="wenben"> 复制:http://www.hhtjim.com </a>
  3. <script type="text/javascript">
  4. $(document).ready(function(){$("#anniu").zclip({path:"http://file.icycat.com/view/js/ZeroClipboard.swf",copy:$("#wenben").text(),afterCopy:function(){$(this).css("color","#777");$(this).text("复制成功")}})});
  5. </script>

说明:第1行 复制按钮为 id="anniu"

第2行 复制的文本是 id="wenben"的内容

3-4行 加载配置的swf文件路径,复制按钮、复制的文本ID以及复制成功后变成“复制成功”的样式。

代码参考来自:http://file.icycat.com/

本文固定链接:http://www.hhtjim.com/wordpress-zeroclipboard-implementation-js-flash-across-browser-clipboard-copy-and-paste.html
Matrix
本文章由 Matrix 于2013年09月16日发布在wordpress建站, 码字型, 零零星星分类下,目前没有通告,你可以至底部留下评论。
转载请注明:wordpress中ZeroClipboard实现js+flash跨浏览器剪切板复制粘贴-HHTjim'S 部落格
关键字:, , ,

添加新评论 »

 😛 Sad 忧伤 👿 Smile 笑脸 😳 😀 😯 😮 😕 😎 😆 😡 😈 Roll Eyes 转眼珠 😉 💡 😐 😥 Mr Green 绿脸先生

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!