javascript - jQuery zClip 复制到剪贴板，用于引导下拉列表中的多个链接？

Question

如果跨浏览器无法完成此操作，那么任何评论将不胜感激。

我想要实现的是我的页面上有多个“复制到剪贴板”链接，例如这样......

<a href="#" data-copy="<?php echo $original[0]; ?>" class="copy">Copy Original Link</a>
<a href="#" data-copy="<?php echo $medium[0]; ?>" class="copy">Copy Medium Link</a>
<a href="#" data-copy="<?php echo $web[0]; ?>" class="copy">Copy Web Link</a>

只是运气不太好，无法让任何事情发挥作用。

我正在使用zClip ，并尝试使用 jQuery onClick 和数据属性来触发，如下所示。

但就是无法让它发挥作用。 See fiddle .

var copyText = 0;

$("a.copy").on('click', function () {

  var copyText = $(this).attr('data-copy');
  return false;

}).each(function () {

  $(this).zclip({

    path: 'http://zeroclipboard.googlecode.com/svn-history/r10/trunk/ZeroClipboard.swf',
    copy: copyText,
    beforeCopy: function () {

    },
    afterCopy: function () {

      alert(copyText + " has been copied!");

    }

  });

});

请在这里查看我的新 fiddle zClip正在使用 jquery 插件。

http://jsfiddle.net/Vr4Ky/5/

预先感谢您的任何建议。

Answer 1

这是一个updated demo这就是你想做的事情:

使用这个(相同的)HTML:

<a href="#" data-copy="http://test.one.com/" class="copy">Copy Original Link</a>
<br />
<a href="#" data-copy="http://test.two.com/" class="copy">Copy Medium Link</a>
<br />
<a href="#" data-copy="http://test.three.com/" class="copy">Copy Web Link</a>

这个脚本应该可以工作:

$("a.copy").on('click', function (e) {
  e.preventDefault();
}).each(function () {
  $(this).zclip({
    path: 'http://www.steamdev.com/zclip/js/ZeroClipboard.swf',
    copy: function() {
      return $(this).data('copy');
    }
  });
});

这就是我所做的。首先，您通过 afterCopy 添加的 alert 实际上是默认的，因此您不需要为此添加额外的代码。另外，data-copy 属性应该通过 jQuery 的 data function 来访问。 。最后，我将 SWF 引用与 JavaScript 放在同一主机上(这可能不是必需的，具体取决于 SWF 中的安全代码，但似乎有必要让 jsfiddle 工作。