jQuery zClip復制到剪貼板，以便在Bootstrap下拉列表中找到多個鏈接？

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和data屬性觸發，如下所示。

但是就是無法使其正常工作。 見小提琴 。

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/

預先感謝您的任何建議。

Answer 1

這是一個更新的演示 ，可以完成您想做的事情：

使用相同的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實際上是默認設置，因此您不需要為此添加額外的代碼。 另外，應通過jQuery的data函數訪問data-copy屬性。 最后，我將SWF引用與JavaScript放在同一主機上（根據SWF中的安全代碼，這可能不是必需的，但似乎有必要使jsfiddle起作用。

Answer 2

通過使用Jason Sperske解決方案，我發現了一種解決方法，可以解決在Bootstrap Down內部使用時的問題。

這是使函數與自舉下拉菜單一起使用的方法。

$('.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/