ZeroClipboard用于将内容複制到剪貼闆中,浏覽器相容做得非常好,幾乎所有都能用,但是這貨的Github上的案例居然不是最新版本的,而網上一搜,五花八門。各種方式加載調用,甚至都不知道哪些是被棄用了的。
而官網給出的demo中居然沒有示例代碼。就一個功能讓你玩,要想知道怎麼回事,呵呵 ,自己翻原碼去。
這裡把1.3.5 版本的使用方法拿來共享 下
JS
ZeroClipboard.config({
moviePath: '/Scripts/zeroclipboard-1.3.5/ZeroClipboard.swf',
swfPath: '/Scripts/zeroclipboard-1.3.5/ZeroClipboard.swf'
});
var client = new ZeroClipboard($("#copyURL"));
client.on("load", function (readyEvent) {
client.on("complete", function (client, args) {
var t = $(target);
var $copysuc = $("<font style='line-height: 1.8em;color:green;'><i class='fa fa-check'></i>已複制</font>");
t.hide(function () { t.after($copysuc) });
setTimeout(function () {
$($copysuc).fadeOut("fast", function () { $($copysuc).remove();t.show(); })
}, 800);
});
});
HTML
<div class="pure-u-7-8">
<input id="URL" type="text" readonly class="pure-input-1" placeholder="url" value="複制的内容">
</div>
<div class=" pure-u-1-8 "> <button title="複制到剪貼闆" data-clipboard-target="URL" class="pure-button copy" id="copyURL"><i class="fa fa-files-o fa-1"></i></button></div>