我想在我的网站上添加一个“复制到剪贴板”按钮。该站使用 Bootstrap 3 框架。我希望我的按钮的工作方式与此处使用的“复制到剪贴板”按钮类似:http://twitterbootstrapbuttons.w3masters.nl/
我尝试将这段代码http://jsfiddle.net/T2uXr/ 整合进去,但是没有成功。
Javascript:
有没有想法如何将此添加到Bootstrap 3网站上的按钮中?或者有没有其他好的替代方案?
谢谢!:)
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网站上的按钮中?或者有没有其他好的替代方案?
谢谢!:)
copy
类的链接都将成为剪贴板复制链接。当然,你还需要包含zclip
库,并且可以更改选择器以选择任何其他元素。 - Felix Kling