ZeroClipboard实现复制功能,怎么都实现不了,这是为什么呢?

weifei_tlp 2013-08-13 10:26:29
最近要实现个复制功能,网上大家都说用ZeroClipboard可以实现,我找了N多的例子,直接运行不行,照着https://github.com/zeroclipboard/ZeroClipboard下面的例子自己写一个吧,也不行,都快疯了,大家来帮帮忙吧。下面是我照着例子写的代码,大家帮忙看看
test.html
<html>
<body>
<button id="copy-button" data-clipboard-text="Copy Me!" title="Click to copy me.">Copy to Clipboard</button>
<script src="ZeroClipboard.js"></script>
<script src="main.js"></script>
</body>
</html>

main.js
// main.js
var clip = new ZeroClipboard( document.getElementById("copy-button"), {
moviePath: "ZeroClipboard.swf"
} );

clip.on( 'load', function(client) {
// alert( "movie is loaded" );
} );

clip.on( 'complete', function(client, args) {
this.style.display = 'none'; // "this" is the element that was clicked
alert("Copied text to clipboard: " + args.text );
} );

clip.on( 'mouseover', function(client) {
// alert("mouse over");
} );

clip.on( 'mouseout', function(client) {
// alert("mouse out");
} );

clip.on( 'mousedown', function(client) {

// alert("mouse down");
} );

clip.on( 'mouseup', function(client) {
// alert("mouse up");
} );
...全文
631 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_19683035 2015-12-01
  • 打赏
  • 举报
回复
楼主解决了吗 求分享
chemex 2015-10-18
  • 打赏
  • 举报
回复
怎么弄的啊 楼主
爬不动的菜鸟 2015-09-22
  • 打赏
  • 举报
回复
不兼容手机端怎么解决啊
bieqi 2015-01-16
  • 打赏
  • 举报
回复
ZeroClipboard.js这个JS,是哪个?
weifei_tlp 2013-08-13
  • 打赏
  • 举报
回复
引用 2 楼 weifei_tlp 的回复:
竟然是这个问题,郁闷,一言堂showbo了
应该是谢谢showbo了
weifei_tlp 2013-08-13
  • 打赏
  • 举报
回复
竟然是这个问题,郁闷,一言堂showbo了
Go 旅城通票 2013-08-13
  • 打赏
  • 举报
回复
Zero Clipboard实现原理 Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板。 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中。 然后把在你要使用复制功能的页面中引入Zero Clipboard的js文件:ZeroClipboard.js 如下代码: [removed][removed] 注意:以上 ZeroClipboard.js, ZeroClipboard.swf需要放在同一路径下。如果不在同一路径,可使用ZeroClipboard.setMoviePath( “Flash路径” );来设置ZeroClipboard.swf 地址 Zero Clipboard实现简单跨浏览器复制 var clip = new ZeroClipboard.Client(); // 新建一个对象 clip.setHandCursor( true ); // 设置鼠标为手型 clip.setText("哈哈"); // 设置要复制的文本。 // 注册一个 button,参数为 id。点击这个 button 就会复制。 //这个 button 不一定要求是一个 input 按钮,也可以是其他 DOM 元素。 clip.glue("copy-botton"); // 和上一句位置不可调换 这样,这样基本功能实现了,点击按钮就可以复制设置好的文本了。你可能注意到了,待复制的文本是固定的,如果想要动态改变的怎么办,比如复制一个输入框中的内容。不用担心,下面会讲到的。 Zero Clipboard的高级功能 1、reposition() 方法 因为按钮上漂浮有一个 Flash 按钮,所以当页面大小发生变化时,Flash 按钮可能会错位,这样就点不着了。 不要紧,Zero Clipboard 提供了一个 reposition() 方法,可以重新计算 Flash 按钮的位置。我们可以将它绑定到 resize 事件上。如下面代码是在jQuery下实现的resize事件重新设置按钮位置: $(window).resize(function(){ clip.reposition(); }); 2、hide() 和 show() 方法 这两个方法可以隐藏和显示 Flash 按钮 。其中 show() 方法会调用 reposition() 方法。 3、setCSSEffects() 方法 当鼠标移到按钮上或点击时,由于有 Flash 按钮的遮挡,所以像 css “:hover”, “:active” 等伪类可能会失效。setCSSEffects() 方法就是解决这个问题。首先我们需要将伪类改成类,比如: #copy-botton:hover{border-color:#FF6633;}// 可以改成下面的 ":hover" 改成 ".hover" #copy-botton.hover{border-color:#FF6633;} 我们可以调用 clip.setCSSEffects( true ); 这样 Zero Clipboard 会自动为我们处理:将类 .hover 当成伪类 :hover 。 4、getHTML() 方法 如果你想自己实例一个 Flash ,不用 Zero Clipboard 的附着方法,那么这个方法就可以帮上忙了。它接受两个参数,分别为 Flash 的宽度和高度。返回的是 Flash 对应的 HTML 代码。例如: var html = clip.getHTML( 150, 20 ); 你可以用 innerHTML 或直接 [removed](); 进行输出。 以下是测试输出的组装完毕的HTML 代码: <embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150" height="20" name="ZeroClipboardMovie_1" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1&width=150&height=20" wmode="transparent" /> IE 的 Flash JavaScript 通信接口上有一个 bug 。你必须插入一个 object 标签到一个已存在的 DOM 元素中。并且在写入 innerHTML 之前请确保该元素已经 appendChild 方法插入到 DOM 中。 Zero Clipboard 事件处理 Zero Clipboard 提供了一些事件,你可以自定义函数处理这些事件。Zero Clipboard 事件处理函数为 addEventListener(); 例如当 Flash 完全载入后会触发一个事件 “load” 。 clip.addEventListener( "load", function(client) { alert("Flash 加载完毕!"); }); Zero Clipboard 会将 clip 对象作为参数传入。即上例中的 “client” 。 还有 “load” 也可以写成 “onLoad”,其他的事件也可以这样。 其他事件还包括: mouseOver 鼠标移上事件 mouseOut 鼠标移出事件 mouseDown 鼠标按下事件 mouseUp 鼠标松开事件 complete 复制成功事件 其中 mouseOver 事件和 complete 事件比较常用。 前面说过,如果需要动态改变待复制的内容,那 mouseOver 事件就可以派上用场了。例如需要动态复制一个 id 为 test 的输入框中的值,我们可以在鼠标 over 的时候重新设置值。 clip.addEventListener( "mouseOver", function(client) { var test = document.getElementById("test"); client.setText( test.value ); // 重新设置要复制的值 }); //复制成功: clip.addEventListener( "complete", function(){ alert("复制成功!"); });

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧