在bootstrap 3中复制到剪贴板

Question

我想在我的网站上添加"复制到剪贴板"按钮.该站点使用Bootstrap 3框架.我希望我的按钮与此处使用的"复制到剪贴板"按钮类似:http://twitterbootstrapbuttons.w3masters.nl/

我试图合并这个代码:http://jsfiddle.net/T2uXr/,但我没有成功.

使用Javascript:

$("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');
    }
  });
});

CSS:

body {
  padding: 20px
}

HTML

<hr />

<h5>These copy to clipboard links are working...</h5>

<p><a href="#" data-copy="http://test.one.com/" class="copy">Copy Original Link</a></p>

<p><a href="#" data-copy="http://test.two.com/" class="copy">Copy Medium Link</a></p>

<p><a href="#" data-copy="http://test.three.com/" class="copy">Copy Web Link</a></p>

<hr />

<h5>If I put these links inside the bootstrap dropdown, they stop working...</h5>

<div class="btn-group">
                  <a class="btn btn-small dropdown-toggle" data-toggle="dropdown" href="#">
                    View copy clipboard links
                    <span class="caret"></span>
                  </a>
                  <ul class="dropdown-menu">
                    <li><a href="#" data-copy="http://test.one.com/" class="copy">Copy Original Link</a></li>
                    <li><a href="#" data-copy="http://test.two.com/" class="copy">Copy Medium Link</a></li>
                    <li><a href="#" data-copy="http://test.three.com/" class="copy">Copy Web Link</a></li>
                    <li class="divider"></li>
                    <li><a href="mailto:" title="Email URL Links">Email URL Link</a></li>
                  </ul>
</div>

关于如何将其添加到Bootstrap 3站点上的按钮的任何想法？或者还有其他好的选择吗？

谢谢!:)

Answer 1

您的代码看起来不错，而且您的 jsfiddle 代码也可以正常工作。我在 Mac OS X 上的 Safari、Chrome 和 Firefox 中尝试过，它们都有效。由于您的代码需要 Flash，因此请确保安装并启用 Flash。