javascript jQuery zClip 复制到剪贴板，用于引导下拉列表中的多个链接？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14235324/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery zClip copy to clipboard, for multiple links in bootstrap dropdown?
提问by Joshc
If this cant be done for cross-browser, then any comments would be much appreciated.
如果这不能跨浏览器完成，那么任何评论将不胜感激。
What I am trying to achieve is multiple "copy to clipboard" links on my page like this for example...
我想要实现的是我的页面上的多个“复制到剪贴板”链接，例如......
<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>
Just not really having much luck getting anything to work.
只是没有太多运气让任何东西工作。
I am using zClip, and trying to fire using jQuery onClick and a data attribute, like below.
我正在使用zClip，并尝试使用 jQuery onClick 和数据属性触发，如下所示。
But just cannot get it to work. 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!");
}
});
});
Please see my new fiddle here with zClipjquery plugin being used.
请在此处查看我的新小提琴，其中使用了zClipjquery 插件。
Thank in advance for any suggestions.
提前感谢您的任何建议。
回答by Jason Sperske
Here is an updated demothat does what you are trying to do:
这是一个更新的演示，可以执行您正在尝试执行的操作：
Using this (the same) HTML:
使用这个（相同的）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>
This script should work:
这个脚本应该可以工作：
$("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');
}
});
});
Here is what I did. First off the alertthat you were adding via afterCopyis actually the default, so you don't need to add extra code for that. Also the data-copyattributes should be accessed via jQuery's datafunction. Finally I put the SWF reference to the same host as the JavaScript (this might not be necessary depending on the
security code in the SWF but it seemed necessary to get the jsfiddle to work.
这是我所做的。首先alert，您添加的 viaafterCopy实际上是默认设置，因此您无需为此添加额外的代码。此外，data-copy应通过 jQuery 的data函数访问属性。最后，我将 SWF 引用放在与 JavaScript 相同的主机上（这可能不是必需的，具体取决于 SWF 中的安全代码，但似乎有必要让 jsfiddle 工作。
回答by Joshc
Using Jason Sperskesolution, I have found a work around to fix the issue when used inside a bootstrap down.
使用Jason Sperske解决方案，我找到了一种解决方法来解决在引导程序中使用时的问题。
This is how to get the function to work with bootstrap dropdowns.
这是如何让函数与引导下拉菜单一起工作。
$('.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');
Then this css also needs adding, to stop the flash file absolute div positioning outside of the list element.
那么这个css也需要添加，来阻止flash文件绝对div定位在list元素之外。
.dropdown-menu li {
position: relative;
}
See working fiddle. http://jsfiddle.net/Vr4Ky/27/
