本文將介紹一個跨瀏覽器的庫類 Zero Clipboard 。它利用 Flash 進行復制，所以只要瀏覽器裝有 Flash 就可以運行，而且比 IE 的 document.execCommand(“Copy”) 更加靈活。

Zero Clipboard 的實現(xiàn)原理

Zero Clipboard 利用 Flash 進行復制，之前有 Clipboard Copy 解決方案，其利用的是一個隱藏的 Flash。但最新的 Flash Player 10 只允許在 Flash 上進行操作才能啟動剪貼板。所以 Zero Clipboard 對此進行了改進，用了一個透明的 Flash ，讓其漂浮在按鈕之上，這樣其實點擊的不是按鈕而是 Flash ，也就可以使用 Flash 的復制功能了。

如何使用 Zero Clipboard

首先下載 Zero Clipboard ，并解壓縮。其中需要兩個文件：ZeroClipboard.js 和 ZeroClipboard.swf ，將這兩個文件放入到你的項目中。
Zero Clipboard : [主頁] [下載] [演示]
核心功能
第一步，導入 ZeroClipboard.js 文件：

<script type="text/javascript" src="ZeroClipboard.js"></script>
再設置 ZeroClipboard.swf 文件的路徑：

ZeroClipboard.setMoviePath( "ZeroClipboard.swf" );
注意：以上 ZeroClipboard.js, ZeroClipboard.swf 兩個文件的路徑都需要替換為你項目中對應文件的路徑?；蛘咭部梢允且粋€絕對路徑。
然后就使用了：

這樣，這樣基本功能實現(xiàn)了，點擊按鈕就可以復制設置好的文本了。你可能注意到了，待復制的文本是固定的，如果想要動態(tài)改變的怎么辦，比如復制一個輸入框中的內容。不用擔心，下面會講到的。

其他函數(shù)
Zero Clipboard 還提供了一些其他的函數(shù)，其中有一些非常有用。

reposition() 方法
因為按鈕上漂浮有一個 Flash 按鈕，所以當頁面大小發(fā)生變化時，F(xiàn)lash 按鈕可能會錯位，這樣就點不著了。 不要緊，Zero Clipboard 提供了一個 reposition() 方法，可以重新計算 Flash 按鈕的位置。我們可以將它綁定到 resize 事件上。

bind 是一個跨瀏覽器的事件綁定函數(shù)。詳情請見4個跨瀏覽器必備的函數(shù) 。
hide() 和 show() 方法
這兩個方法可以隱藏和顯示 Flash 按鈕 。其中 show() 方法會調用 reposition() 方法。

setCSSEffects() 方法
當鼠標移到按鈕上或點擊時，由于有 Flash 按鈕的遮擋，所以像 css “:hover”, “:active” 等偽類可能會失效。setCSSEffects() 方法就是解決這個問題。首先我們需要將偽類改成類，比如：

#copy-botton:hover{
border-color:#FF6633;
}
/* 可以改成下面的 ":hover" 改成 ".hover" */
#copy-botton.hover{
border-color:#FF6633;
}
我們可以調用 clip.setCSSEffects( true ); 這樣 Zero Clipboard 會自動為我們處理：將類 .hover 當成偽類 :hover 。

getHTML() 方法
如果你想自己實例一個 Flash ，不用 Zero Clipboard 的附著方法，那么這個方法就可以幫上忙了。它接受兩個參數(shù)，分別為 Flash 的寬度和高度。返回的是 Flash 對應的 HTML 代碼。例如：

var html = clip.getHTML( 150, 20 );
你可以用 innerHTML 或直接 document.write(); 進行輸出。
以下是我測試下輸出的 HTML 代碼：


IE 的 Flash JavaScript 通信接口上有一個 bug 。你必須插入一個 object 標簽到一個已存在的 DOM 元素中。并且在寫入 innerHTML 之前請確保該元素已經(jīng) appendChild 方法插入到 DOM 中。
Zero Clipboard 事件處理
Zero Clipboard 提供了一些事件，你可以自定義函數(shù)處理這些事件。Zero Clipboard 事件處理函數(shù)為 addEventListener(); 例如當 Flash 完全載入后會觸發(fā)一個事件 “l(fā)oad” 。

Zero Clipboard 會將 clip 對象作為參數(shù)傳入。即上例中的 “client” 。
還有 “l(fā)oad” 也可以寫成 “onLoad”，其他的事件也可以這樣。
其他事件還包括：

mouseOver 鼠標移上事件
mouseOut 鼠標移出事件
mouseDown 鼠標按下事件
mouseUp 鼠標松開事件
complete 復制成功事件
其中 mouseOver 事件和 complete 事件比較常用。
前面說過，如果需要動態(tài)改變待復制的內容，那 mouseOver 事件就可以派上用場了。例如需要動態(tài)復制一個 id 為 test 的輸入框中的值，我們可以在鼠標 over 的時候重新設置值。

復制成功：

好了，就介紹到這里吧。趕快自己試驗下吧。

最新評論