Zero 的實現原理
Zero 利用透明的Flash讓其漂浮在復制按鈕之上,這樣其實點擊的不是按鈕而是 Flash ,這樣將需要的內容傳入Flash,再通過Flash的復制功能把傳入的內容復制到剪貼板。
Zero 的安裝方法
首先需要下載 Zero 的壓縮包,解壓后把文件夾中兩個文件:.js 和 .swf 放入到你的項目中。
然后把在你要使用復制功能的頁面中引入Zero 的js文件:.js
如下代碼:
注意:以上 .js, .swf需要放在同一路徑下。如果不在同一路徑,可使用.( “Flash路徑” );來設置.swf 地址
Zero 實現簡單跨瀏覽器復制
var clip = new .(); // 新建一個對象
clip.( true ); // 設置鼠標為手型
clip.("哈哈"); // 設置要復制的文本。
// 注冊一個 ,參數為 id。點擊這個 就會復制。
//這個 不一定要求是一個 input 按鈕,也可以是其他 DOM 元素。
clip.glue("copy-"); // 和上一句位置不可調換
這樣js復制到剪貼板 谷歌瀏覽器,這樣基本功能實現了,點擊按鈕就可以復制設置好的文本了。你可能注意到了js復制到剪貼板 谷歌瀏覽器,待復制的文本是固定的,如果想要動態改變的怎么辦,比如復制一個輸入框中的內容。不用擔心,下面會講到的。
Zero 的高級功能
1、() 方法
因為按鈕上漂浮有一個 Flash 按鈕,所以當頁面大小發生變化時,Flash 按鈕可能會錯位,這樣就點不著了。 不要緊,Zero 提供了一個 () 方法,可以重新計算 Flash 按鈕的位置。我們可以將它綁定到 事件上。如下面代碼是在下實現的事件重新設置按鈕位置:
$().((){
clip.();
});
2、hide() 和 show() 方法
這兩個方法可以隱藏和顯示 Flash 按鈕 。其中 show() 方法會調用 () 方法。
3、() 方法
當鼠標移到按鈕上或點擊時,由于有 Flash 按鈕的遮擋,所以像 css “:hover”, “:” 等偽類可能會失效。() 方法就是解決這個問題。首先我們需要將偽類改成類,比如:
#copy-:hover{-color:#;}// 可以改成下面的 ":hover" 改成 ".hover"
#copy-.hover{-color:#;}
我們可以調用 clip.( true ); 這樣 Zero 會自動為我們處理:將類 .hover 當成偽類 :hover 。
4、() 方法
如果你想自己實例一個 Flash ,不用 Zero 的附著方法,那么這個方法就可以幫上忙了。它接受兩個參數,分別為 Flash 的寬度和高度。返回的是 Flash 對應的 HTML 代碼。例如:
var html = clip.( 150, 20 );
你可以用 或直接 .write(); 進行輸出。
以下是測試輸出的組裝完畢的HTML 代碼:
" ="id=1&width=150&=20" wmode="" />
IE 的 Flash 通信接口上有一個 bug 。你必須插入一個 標簽到一個已存在的 DOM 元素中。并且在寫入 之前請確保該元素已經 方法插入到 DOM 中。
Zero 事件處理
Zero 提供了一些事件,你可以自定義函數處理這些事件。Zero 事件處理函數為 (); 例如當 Flash 完全載入后會觸發一個事件 “load” 。
clip.( "load", () {
alert("Flash 加載完畢!");
});
Zero 會將 clip 對象作為參數傳入。即上例中的 “” 。
還有 “load” 也可以寫成 “”,其他的事件也可以這樣。
其他事件還包括:
鼠標移上事件
鼠標移出事件
鼠標按下事件
鼠標松開事件
復制成功事件
其中 事件和 事件比較常用。
前面說過,如果需要動態改變待復制的內容,那 事件就可以派上用場了。例如需要動態復制一個 id 為 test 的輸入框中的值,我們可以在鼠標 over 的時候重新設置值。
clip.( "", () {
var test = .("test");
.( test.value ); // 重新設置要復制的值
});
//復制成功:
clip.( "", (){
alert("復制成功!");
});