ZeroClipboard解決跨瀏覽器復制到剪貼板

Zero Clipboard的實現原理
Zero Clipboard 利用透明的Flash讓其漂浮在復制按鈕之上，這樣其實點擊的不是按鈕而是 Flash ，這樣將需要的內容傳入Flash，再通過Flash的復制功能把傳入的內容復制到剪貼板。

Zero Clipboard的安裝方法
其實也不算安裝啦，就是使用前的準備工作。
首先需要下載 Zero Clipboard的壓縮包，解壓后把文件夾中兩個文件：ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的項目中。

Zero Clipboard : [項目主頁] [zip下載] [在線演示]

然后把在你要使用復制功能的頁面中引入Zero Clipboard的js文件：ZeroClipboard.js
如下代碼：

<script type="text/javascript" src="ZeroClipboard.js"></script>注意：以上 ZeroClipboard.js, ZeroClipboard.swf需要放在同一路徑下。如果不在同一路徑，可使用ZeroClipboard.setMoviePath( “Flash路徑” );來設置ZeroClipboard.swf 地址

Zero Clipboard實現簡單跨瀏覽器復制
var clip = new ZeroClipboard.Client(); // 新建一個對象
clip.setHandCursor( true ); // 設置鼠標為手型
clip.setText("哈哈"); // 設置要復制的文本。
// 注冊一個 button，參數為 id。點擊這個 button 就會復制。
//這個 button 不一定要求是一個 input 按鈕，也可以是其他 DOM 元素。
clip.glue("copy-botton"); // 和上一句位置不可調換這樣，這樣基本功能實現了，點擊按鈕就可以復制設置好的文本了。你可能注意到了，待復制的文本是固定的，如果想要動態改變的怎么辦，比如復制一個輸 入框中的內容。不用擔心，下面會講到的。

Zero Clipboard的高級功能
1、reposition() 方法

因為按鈕上漂浮有一個 Flash 按鈕，所以當頁面大小發生變化時，Flash 按鈕可能會錯位，這樣就點不著了。 不要緊，Zero Clipboard 提供了一個 reposition() 方法，可以重新計算 Flash 按鈕的位置。我們可以將它綁定到 resize 事件上。如下面代碼是在jQuery下實現的resize事件重新設置按鈕位置：

$(window).resize(function(){
clip.reposition();
});2、hide() 和 show() 方法

這兩個方法可以隱藏和顯示 Flash 按鈕 。其中 show() 方法會調用 reposition() 方法。

3、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 。

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈