我想在我的网站上添加一个“复制到剪贴板”按钮。该站点使用 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 网站上的按钮有什么想法吗?或者还有其他好的选择吗?
谢谢! :)
最佳答案
这是我解决问题的方法,直到深夜 4:00 AM 并发布我的问题(click here 才能看到),希望这能帮助一些人不要熬夜 :) 我试着做 Bootstrap 当前网站如何复制它的代码,但 Bootstrap 当前使用旧的 zeroClipboard 插件。我尝试使用最新的 zeroClipboard(截至目前)制作与 Bootstrap 相同的作品。
HTML: 注意我没有在一行中添加所有代码,不要在第二行或缩进中添加 pre
& code
它使代码看起来不错,否则额外的意图将复制到剪贴板。
<div class="highlight"><pre><code>Some code/text goes here</code></pre></div>
CSS:
/* ZeroClipboard styles */
.zero-clipboard {
position: relative;
display: none;
}
.btn-clipboard {
position: absolute;
top: 0;
right: 0;
z-index: 10;
display: block;
padding: 5px 8px;
font-size: 12px;
color: #777;
cursor: pointer;
background-color: #fff;
border: 1px solid #e1e1e8;
border-radius: 0 4px 0 4px;
}
.btn-clipboard-hover {
color: #fff;
background-color: #563d7c;
border-color: #563d7c;
}
@media (min-width: 768px) {
.zero-clipboard {
display: block;
}
.zero-clipboard .btn-clipboard {
top: -16px;
border-top-right-radius: 0;
}
}
JavaScript:将 ZeroClipboard.swf
放在 JS 文件所在的位置。
// Config ZeroClipboard
ZeroClipboard.config({
hoverClass: 'btn-clipboard-hover'
})
// Insert copy to clipboard button before .highlight
$('.highlight').each(function () {
var btnHtml = '<div class="zero-clipboard"><span class="btn-clipboard">Copy</span></div>';
$(this).before(btnHtml)
});
var zeroClipboard = new ZeroClipboard($('.btn-clipboard'));
var htmlBridge = $('#global-zeroclipboard-html-bridge');
// Handlers for ZeroClipboard
zeroClipboard.on('ready', function (event) {
htmlBridge
.data('placement', 'top')
.attr('title', 'Copy to clipboard')
.tooltip();
// Copy to clipboard
zeroClipboard.on('copy', function (event) {
var highlight = $(event.target).parent().nextAll('.highlight').first();
event.clipboardData.setData("text/plain", highlight.text())
});
// Notify copy success and reset tooltip title
zeroClipboard.on('aftercopy', function () {
htmlBridge
.attr('title', 'Copied!')
.tooltip('fixTitle')
.tooltip('show')
.attr('title', 'Copy to clipboard')
.tooltip('fixTitle')
});
});
// Notify copy failure
zeroClipboard.on('error', function () {
ZeroClipboard.destroy();
htmlBridge
.attr('title', 'Flash required')
.tooltip('fixTitle')
.tooltip('show');
});
关于javascript - 在 bootstrap 3 中复制到剪贴板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22899992/