快捷導(dǎo)航

ZeroClipboard插件實現(xiàn)多瀏覽器復(fù)制功能(支持firefox、chrome、ie6)

更新時間：2014年08月30日 13:31:24 投稿：mdxy-dxy

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

但是值得注意的是官方介紹中已明確表態(tài)說這個插件不支持ie6,下面將提供多實例化Zero Clipboard復(fù)制功能的實現(xiàn)及兼容ie6的寫法！

先下載ZeroClipboard http://www.fzitv.net/jiaoben/24961.html

<style type="text/css">
 body { font-family:arial,sans-serif; font-size:9pt; }
 .copyit {text-align:center; border:1px solid #FD6001; background-color:#ED730B; margin:10px; padding:2px 5px; cursor:pointer; font-size:12px; border-radius:3px;}
 .copyit.hover { background-color:#FD6001;}.copyit.active { background-color:#d25102;}/*鼠標(biāo)hover效果,實為調(diào)用setCSSEffects()方法*/
 .copy_info{width:260px;height:100px;border:1px solid #ccc;padding:5px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/ZeroClipboard/ZeroClipboard.js"></script>
<div class="clip_container">
<textarea id="fe_text" cols=50 rows=5 class="copycnt">第1個被復(fù)制的內(nèi)容?。?！</textarea>
<b class="copyit">復(fù)制內(nèi)容</b>
</div>
<br/>
<div class="clip_container">
<textarea id="fe_text" cols=50 rows=5 class="copycnt">第2個被復(fù)制的內(nèi)容！?。?lt;/textarea>
<b class="copyit">復(fù)制內(nèi)容</b>
</div>
<script type="text/javascript">
var clip = null;
function copyThis() {
	if($.browser.version==6.0){
		//針對ie6
		$('.copyit').bind("click",function(){
		var code=$(this).parents(".clip_container").find(".copycnt").text();
		window.clipboardData.setData("Text",code);
		alert('被復(fù)制的內(nèi)容:\n'+code);
	  })
	  return;
	}
	ZeroClipboard.setMoviePath("http://img.jb51.net/js/scripts/clipboard.swf'");//如果ZeroClipboard.js, ZeroClipboard.swf放在同一目錄下，可省略這句;
	clip = new ZeroClipboard.Client();
	$('.copyit').mouseover( function() {
	 var code=$(this).parents(".clip_container").find(".copycnt").text();
	 clip.setText(code);
	 if (clip.div) {//已創(chuàng)建過包含flash的父層div,則鼠標(biāo)hover時重新定位flash層的位置
		 //clip.receiveEvent('mouseout', null);
		 clip.reposition(this);
	 }else{
		clip.glue(this)};
	 //clip.receiveEvent('mouseover', null);
	} );
	clip.addEventListener( 'complete', function(client, text){
	 alert("被復(fù)制內(nèi)容：\n"+text);
	});
}
copyThis();
</script>
<textarea style="width:300px;height:300px;">
粘貼復(fù)制的內(nèi)容到這里試試！！
</textarea>

上面的實現(xiàn)方法，除了ie6使用window.clipboardData.setData來實現(xiàn)復(fù)制功能外，其它瀏覽器都用Zero Clipboard 插件來實現(xiàn)復(fù)制功能！

使用該插件時應(yīng)注意的幾點：

1、以上 ZeroClipboard.js, ZeroClipboard.swf需要放在同一路徑下。如果不在同一路徑，可使用ZeroClipboard.setMoviePath( “Flash路徑” );來設(shè)置ZeroClipboard.swf 地址。

2、setCSSEffects() 方法的解析：當(dāng)鼠標(biāo)移到按鈕上或點擊時，由于有Flash按鈕的遮擋，所以復(fù)制按鈕本身體的 css “:hover”, “:active” 等偽類可能會失效。setCSSEffects() 方法就是解決這個問題。首先我們需要將偽類改成類，比如：

復(fù)制代碼代碼如下:

.copyit:hover{

 border-color:#FF6633;

}

// 需要將":hover"改成下面的".hover"

.copyit.hover{

 border-color:#FF6633;

}

3、getHTML() 方法的解析：如果你想自己實例一個Flash ，不用Zero Clipboard的附著方法，那么這個方法就可以幫上忙了。它接受兩個參數(shù)，分別為Flash的寬度和高度。返回的是Flash對應(yīng)的 HTML 代碼。例如：
var html = clip.getHTML( 150, 20 );

您可能感興趣的文章: