Zero Clipboard的實(shí)現(xiàn)原理
Zero Clipboard 利用透明的Flash讓其漂浮在復(fù)制按鈕之上，這樣其實(shí)點(diǎn)擊的不是按鈕而是 Flash ，這樣將需要的內(nèi)容傳入Flash，再通過(guò)Flash的復(fù)制功能把傳入的內(nèi)容復(fù)制到剪貼板
Zero Clipboard的安裝方法
首先需要下載 Zero Clipboard的壓縮包，解壓后把文件夾中兩個(gè)文件：ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的項(xiàng)目中。
然后把在你要使用復(fù)制功能的頁(yè)面中引入Zero Clipboard的js文件：ZeroClipboard.js
如下代碼：
復(fù)制代碼 代碼如下:
script type="text/javascript" src="ZeroClipboard.js">/script>
注意：以上 ZeroClipboard.js, ZeroClipboard.swf需要放在同一路徑下。如果不在同一路徑，可使用ZeroClipboard.setMoviePath( “Flash路徑” );來(lái)設(shè)置ZeroClipboard.swf 地址
復(fù)制代碼 代碼如下:
Zero Clipboard實(shí)現(xiàn)簡(jiǎn)單跨瀏覽器復(fù)制
var clip = new ZeroClipboard.Client(); // 新建一個(gè)對(duì)象
clip.setHandCursor( true ); // 設(shè)置鼠標(biāo)為手型
clip.setText("哈哈"); // 設(shè)置要復(fù)制的文本。
// 注冊(cè)一個(gè) button，參數(shù)為 id。點(diǎn)擊這個(gè) button 就會(huì)復(fù)制。
//這個(gè) button 不一定要求是一個(gè) input 按鈕，也可以是其他 DOM 元素。
clip.glue("copy-botton"); // 和上一句位置不可調(diào)換
這樣，這樣基本功能實(shí)現(xiàn)了，點(diǎn)擊按鈕就可以復(fù)制設(shè)置好的文本了。你可能注意到了，待復(fù)制的文本是固定的，如果想要?jiǎng)討B(tài)改變的怎么辦，比如復(fù)制一個(gè)輸入框中的內(nèi)容。不用擔(dān)心，下面會(huì)講到的。
Zero Clipboard的高級(jí)功能
1、reposition() 方法
因?yàn)榘粹o上漂浮有一個(gè) Flash 按鈕，所以當(dāng)頁(yè)面大小發(fā)生變化時(shí)，F(xiàn)lash 按鈕可能會(huì)錯(cuò)位，這樣就點(diǎn)不著了。 不要緊，Zero Clipboard 提供了一個(gè) reposition() 方法，可以重新計(jì)算 Flash 按鈕的位置。我們可以將它綁定到 resize 事件上。如下面代碼是在jQuery下實(shí)現(xiàn)的resize事件重新設(shè)置按鈕位置：
復(fù)制代碼 代碼如下:
$(window).resize(function(){
clip.reposition();
});
2、hide() 和 show() 方法
這兩個(gè)方法可以隱藏和顯示 Flash 按鈕 。其中 show() 方法會(huì)調(diào)用 reposition() 方法。
3、setCSSEffects() 方法
當(dāng)鼠標(biāo)移到按鈕上或點(diǎn)擊時(shí)，由于有 Flash 按鈕的遮擋，所以像 css “:hover”, “:active” 等偽類(lèi)可能會(huì)失效。setCSSEffects() 方法就是解決這個(gè)問(wèn)題。首先我們需要將偽類(lèi)改成類(lèi)，比如：
#copy-botton:hover{border-color:#FF6633;}// 可以改成下面的 ":hover" 改成 ".hover"
#copy-botton.hover{border-color:#FF6633;}
我們可以調(diào)用 clip.setCSSEffects( true ); 這樣 Zero Clipboard 會(huì)自動(dòng)為我們處理：將類(lèi) .hover 當(dāng)成偽類(lèi) :hover 。
4、getHTML() 方法
如果你想自己實(shí)例一個(gè) Flash ，不用 Zero Clipboard 的附著方法，那么這個(gè)方法就可以幫上忙了。它接受兩個(gè)參數(shù)，分別為 Flash 的寬度和高度。返回的是 Flash 對(duì)應(yīng)的 HTML 代碼。例如：
var html = clip.getHTML( 150, 20 );
你可以用 innerHTML 或直接 document.write(); 進(jìn)行輸出。
以下是測(cè)試輸出的組裝完畢的HTML 代碼：
embed id="ZeroClipboardMovie_1" src="zeroclipboard/ZeroClipboard.swf" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="150" height="20" name="ZeroClipboardMovie_1" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="id=1width=150height=20" wmode="transparent" />
IE 的 Flash JavaScript 通信接口上有一個(gè) bug 。你必須插入一個(gè) object 標(biāo)簽到一個(gè)已存在的 DOM 元素中。并且在寫(xiě)入 innerHTML 之前請(qǐng)確保該元素已經(jīng) appendChild 方法插入到 DOM 中。
Zero Clipboard 事件處理
Zero Clipboard 提供了一些事件，你可以自定義函數(shù)處理這些事件。Zero Clipboard 事件處理函數(shù)為 addEventListener(); 例如當(dāng) Flash 完全載入后會(huì)觸發(fā)一個(gè)事件 “l(fā)oad” 。
clip.addEventListener( "load", function(client) {
alert("Flash 加載完畢！");
});
Zero Clipboard 會(huì)將 clip 對(duì)象作為參數(shù)傳入。即上例中的 “client” 。
還有 “l(fā)oad” 也可以寫(xiě)成 “onLoad”，其他的事件也可以這樣。
其他事件還包括：
mouseOver 鼠標(biāo)移上事件
mouseOut 鼠標(biāo)移出事件
mouseDown 鼠標(biāo)按下事件
mouseUp 鼠標(biāo)松開(kāi)事件
complete 復(fù)制成功事件
其中 mouseOver 事件和 complete 事件比較常用。
前面說(shuō)過(guò)，如果需要?jiǎng)討B(tài)改變待復(fù)制的內(nèi)容，那 mouseOver 事件就可以派上用場(chǎng)了。例如需要?jiǎng)討B(tài)復(fù)制一個(gè) id 為 test 的輸入框中的值，我們可以在鼠標(biāo) over 的時(shí)候重新設(shè)置值。
復(fù)制代碼 代碼如下:
clip.addEventListener( "mouseOver", function(client) {
var test = document.getElementById("test");
client.setText( test.value ); // 重新設(shè)置要復(fù)制的值
});
//復(fù)制成功：
clip.addEventListener( "complete", function(){
alert("復(fù)制成功！");
});
您可能感興趣的文章:- 瀏覽器復(fù)制插件zeroclipboard使用指南
- ZeroClipboard插件實(shí)現(xiàn)多瀏覽器復(fù)制功能(支持firefox、chrome、ie6)
- zeroclipboard 單個(gè)復(fù)制按鈕和多個(gè)復(fù)制按鈕的實(shí)現(xiàn)方法
- zeroclipboard復(fù)制到剪切板的flash
- js 剪切板應(yīng)用clipboardData詳細(xì)解析
- js復(fù)制到剪切板的實(shí)例方法
- js 剪切板的用法(clipboardData.setData)與js match函數(shù)介紹
- JS將制定內(nèi)容復(fù)制到剪切板示例代碼
- Js+Flash實(shí)現(xiàn)訪問(wèn)剪切板操作
- JavaScript使用ZeroClipboard操作剪切板
