Pemalam ZeroClipboard melaksanakan fungsi salin berbilang penyemak imbas (menyokong firefox, chrome, ie6)_kemahiran javascript

Walau bagaimanapun, perlu diingat bahawa pengenalan rasmi telah menyatakan dengan jelas bahawa pemalam ini tidak menyokong ie6 Perkara berikut akan menyediakan pelaksanaan fungsi salinan Papan Klip Sifar berbilang instan dan kaedah penulisan yang serasi dengan ie6. !

Muat turun ZeroClipboard dahulu http://www.jb51.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;}/*鼠标hover效果,实为调用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个被复制的内容！！！</textarea>
<b class="copyit">复制内容</b>
</div>
<br/>
<div class="clip_container">
<textarea id="fe_text" cols=50 rows=5 class="copycnt">第2个被复制的内容！！！</textarea>
<b class="copyit">复制内容</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('被复制的内容:\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) {//已创建过包含flash的父层div,则鼠标hover时重新定位flash层的位置
		 //clip.receiveEvent('mouseout', null);
		 clip.reposition(this);
	 }else{
		clip.glue(this)};
	 //clip.receiveEvent('mouseover', null);
	} );
	clip.addEventListener( 'complete', function(client, text){
	 alert("被复制内容：\n"+text);
	});
}
copyThis();
</script>
<textarea style="width:300px;height:300px;">
粘贴复制的内容到这里试试！！
</textarea>

Untuk kaedah pelaksanaan di atas, kecuali ie6 menggunakan window.clipboardData.setData untuk melaksanakan fungsi salin, pelayar lain menggunakan pemalam Zero Clipboard untuk melaksanakan fungsi salin!

Beberapa perkara yang perlu anda perhatikan apabila menggunakan pemalam ini:

1. ZeroClipboard.js dan ZeroClipboard.swf di atas perlu diletakkan di laluan yang sama. Jika ia tidak berada dalam laluan yang sama, anda boleh menggunakan ZeroClipboard.setMoviePath("Flash path"); untuk menetapkan alamat ZeroClipboard.swf.

2. Analisis kaedah setCSSEffects(): Apabila tetikus bergerak ke atas atau mengklik butang, disebabkan oleh halangan butang Flash, css ":hover", ":active" dan kelas pseudo lain yang salin butang itu sendiri mungkin Tidak sah. Kaedah setCSSEffects() menyelesaikan masalah ini. Mula-mula kita perlu menukar kelas pseudo kepada kelas, seperti:

Salin kod Kod adalah seperti berikut:

.copyit:tuding{
warna sempadan:#FF6633;
}
// Anda perlu menukar ":hover" kepada ".hover" berikut
.copyit.hover{
warna sempadan:#FF6633;
}

3. Analisis kaedah getHTML(): Jika anda ingin membuat Flash sendiri tanpa menggunakan kaedah lampiran Papan Klip Sifar, maka kaedah ini boleh membantu. Ia menerima dua parameter, iaitu lebar dan tinggi Flash. Apa yang dikembalikan ialah kod HTML yang sepadan dengan Flash. Contohnya:
var html = clip.getHTML( 150, 20 );