天天看點

吐槽做得很不錯的ZeroClipboard

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>
           

繼續閱讀