1. 程式人生 > >吐槽做得很不錯的ZeroClipboard

吐槽做得很不錯的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>