Heim > Web-Frontend > js-Tutorial > Das ZeroClipboard-Plug-in implementiert die Kopierfunktion für mehrere Browser (unterstützt Firefox, Chrome, IE6)_Javascript-Fähigkeiten

Das ZeroClipboard-Plug-in implementiert die Kopierfunktion für mehrere Browser (unterstützt Firefox, Chrome, IE6)_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 16:38:29
Original
1536 Leute haben es durchsucht

Es ist jedoch erwähnenswert, dass in der offiziellen Einführung klar angegeben wurde, dass dieses Plug-in ie6 nicht unterstützt. Im Folgenden werden die Implementierung der Zero-Clipboard-Kopierfunktion mit mehreren Instanzen und die mit ie6 kompatible Schreibmethode beschrieben !

Laden Sie zuerst ZeroClipboard herunter 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>
Nach dem Login kopieren

Für die obige Implementierungsmethode verwenden andere Browser das Zero Clipboard-Plug-In, um die Kopierfunktion zu implementieren, außer dass ie6 window.clipboardData.setData verwendet, um die Kopierfunktion zu implementieren!

Einige Punkte, auf die Sie bei der Verwendung dieses Plug-Ins achten sollten:

1. Die oben genannten ZeroClipboard.js und ZeroClipboard.swf müssen im selben Pfad platziert werden. Wenn es sich nicht im selben Pfad befindet, können Sie ZeroClipboard.setMoviePath(„Flash path“); verwenden, um die ZeroClipboard.swf-Adresse festzulegen.

2. Analyse der setCSSEffects()-Methode: Wenn sich die Maus über die Schaltfläche bewegt oder darauf klickt, werden aufgrund der Blockierung der Flash-Schaltfläche die CSS „:hover“, „:active“ und andere Pseudoklassen angezeigt Das Kopieren der Schaltfläche selbst ist möglicherweise ungültig. Die Methode setCSSEffects() löst dieses Problem. Zuerst müssen wir die Pseudoklasse in eine Klasse umwandeln, zum Beispiel:

Code kopieren Der Code lautet wie folgt:

.copyit:hover{
Rahmenfarbe:#FF6633;
}
// Sie müssen „:hover“ in das folgende „.hover“ ändern
.copyit.hover{
Rahmenfarbe:#FF6633;
}

3. Analyse der getHTML()-Methode: Wenn Sie Flash selbst instanziieren möchten, ohne die Zero Clipboard-Anhangsmethode zu verwenden, kann diese Methode hilfreich sein. Es akzeptiert zwei Parameter, nämlich die Breite und Höhe von Flash. Zurückgegeben wird der HTML-Code, der Flash entspricht. Zum Beispiel:
var html = clip.getHTML( 150, 20 );

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage