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

【问题标题】：jQuery zClip copy to clipboard, for multiple links in bootstrap dropdown?jQuery zClip 复制到剪贴板，用于引导下拉列表中的多个链接？
【发布时间】：2012-12-23 12:09:20
【问题描述】：

如果跨浏览器无法做到这一点，那么任何 cmets 将不胜感激。

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

<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!");

    }

  });

});

请在此处查看我正在使用zClip jquery 插件的新小提琴。

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

提前感谢您的任何建议。

【问题讨论】：

标签： javascript jquery jsfiddle clipboard-interaction

【解决方案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 工作。

【讨论】：

Jason，非常感谢您的直观帮助。我终于有了简单的链接来处理我的应用程序。谢谢！但是，我遇到了与bootstrap 的小冲突，这可能是我之前多次尝试但没有任何结果的原因。我所有到剪贴板链接的副本都在引导下拉列表中。我做了一个fiddle，所以你可以看到问题。 jsfiddle.net/Vr4Ky/7你觉得你能帮我吗？我似乎无法解决这个问题。
此演示不再可用。知道在哪里可以看到完整的演示吗？
@EricB 我更新了 JSFiddle 并提升了 jQuery 版本（我还嵌入了 HTML，因此您可以从头开始创建此答案而无需访问演示）
其实这是我添加的：jsfiddle.net/Vr4Ky/180，但这里是您的链接的更新版本：jsfiddle.net/Vr4Ky/181（使用 Bootstrap 2.3.2 和更新的 jQuery）
这帮助了我并节省了我很多时间。谢谢。

【解决方案2】：

使用Jason Sperske 解决方案，我找到了一种解决方法来解决在引导程序中使用时的问题。

这是使函数与引导下拉菜单一起使用的方法。

$('.btn-group').addClass('open');
$("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');
    }
  });
});
$('.btn-group').removeClass('open');

那么这个css也需要添加，停止flash文件绝对div定位在list元素之外。

.dropdown-menu li {
    position: relative;
}

见工作小提琴。 http://jsfiddle.net/Vr4Ky/27/

【讨论】：