js外掛程式zClip實現複製到剪貼簿功能

標籤：style   blog   class   code   java   ext   

之前在一個項目中用過外掛程式，但是最近又要做，發現，出現問題了，根據以往記憶做好，檢查了所有問題，還是不出現，元素是綁定了zclip_type這個事件，就是彈出不顯示，想了下，查看html結構元素一看，問題發現，覆蓋的層定位有問題。相對body定位了，沒有相對td定位。

 

一，準備工作。

準備好jquery，然後去http://www.steamdev.com/zclip/這裡下載jquery.zclip.js和ZeroClipboard.swf ，不過那裡的ZeroClipboard.swf失效了，你可以去這裡http://pan.baidu.com/share/link?shareid=1286340661&uk=2133883598&fid=2382679931下載，我測試過可以使用。

在html裡加上

?

1 2	<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.zclip.js"></script>

　　

2. 編寫代碼

下面是一個小demo，主要是複製文字框中的連結到剪貼簿。

?

1 2	<input type="text" value="www.baidu.com" id="link"> <span id="copyBtn">複製連結</span>

　　然後加入指令碼，非常的簡單。

<script>        $(‘#copyBtn‘).zclip({            path: "ZeroClipboard.swf",            copy: function(){                return $(‘#link‘).val();  　　　 　　}        });</script>

這裡的path是你flash的路徑，copy是複製成功之後的回呼函數。返回的是文字框裡的value值。

另外我們還要對jquery.zclip.js進行設定，用編輯器開啟它，就在前面，你會看到如下代碼：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

複製代碼  var settings = $.extend({                   path: ‘ZeroClipboard.swf‘,                 copy: null,                 beforeCopy: null,                 afterCopy: null,                 clickAfter: true,                 setHandCursor: true,                 setCSSEffects: true               }, params); 複製代碼

　　

同樣修改path為你的flash--ZeroClipboard.swf的路徑，其他的設定我們先不管他。

好了，立馬來測試吧，不過這裡要注意的是，本地測試是不成功的，你要用tomcat或apache在本機搭一個伺服器，然後把檔案放到伺服器目錄下測試。你會看到移到複製連結上的時候出現了小手，又見是flash的菜單，：

然後點擊它,出現成功提示框。你可以試著在其他地方粘貼，看看有沒有複製成功。

 

當然你也可以修改複製成功之後的提示框，或者添加更多功能。

在中找到如下代碼。

  clip.addEventListener(‘complete‘, function(client, text) {                        if ($.isFunction(settings.afterCopy)) {                            o.trigger(‘zClip_afterCopy‘);                        } else {                            if (text.length > 500) {                                text = text.substr(0, 500) + "...\n\n(" + (text.length - 500) + " characters not shown)";                            }                            o.removeClass(‘hover‘);                            alert("Copied text to clipboard:\n\n " + text);                        }                        if (settings.clickAfter) {                            o.trigger(‘click‘);                        }                    });

 修改alert那個地方的代碼就可以了，也許還有其他地方也可以修改，我沒有細看。

3. 其他

我們用chrome開啟我們的demo，開啟控制台可以看到

沒錯，這正是外掛程式給我們的頁面插入了flash，可以看到它正好蓋住了我們的”複製連結“按鈕。

好了，使用外掛程式zClip來實現複製到剪貼簿的功能就介紹到這裡了。更多的細節請訪問：http://www.steamdev.com/zclip/

詳細介紹了外掛程式的用法，以及相關參數的設定，包括複製成功之後的函數，怎麼給”複製連結“按鈕添加樣式等等。

 

___________________________________________________________________________