However, it is worth noting that the official introduction has clearly stated that this plug-in does not support ie6. Below will provide the implementation of the multi-instified Zero Clipboard copy function and the compatible writing method of ie6!
Download ZeroClipboard first //www.VeVB.COM/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;}/*Mouse hover effect, it is actually calling the setCSSEffects() method*/ .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><textarea id="fe_text" cols=50 rows=5>The first copyed content! ! ! </textarea><b>Copy content</b></div><br/><div><textarea id="fe_text" cols=50 rows=5>The second copied content! ! ! </textarea><b>Copy content</b></div><script type="text/javascript">var clip = null;function copyThis() {if($.browser.version==6.0){//For ie6$('.copyit').bind("click",function(){var code=$(this).parents(".clip_container").find(".copycnt").text();window.clipboardData.setData("Text",code);alert('Copyed content:/n'+code); }) return;}ZeroClipboard.setMoviePath("http://img.VeVB.COM/js/scripts/clipboard.swf'");//If ZeroClipboard.js, ZeroClipboard.swf is placed in the same directory, this sentence can be omitted; clip = new ZeroClipboard.Client();$('.copyit').mouseover( function() { var code=$(this).parents(".clip_container").find(".copycnt").text(); clip.setText(code); if (clip.div) {//The parent layer div containing flash has been created, then the position of the flash layer will be repositioned when the mouse hover is used //clip.receiveEvent('mouseout', null); clip.reposition(this); }else{clip.glue(this)}; //clip.receiveEvent('mouseover', null);} ); clip.addEventListener( 'complete', function(client, text){ alert("copyed content: /n"+text);});}copyThis();</script><textarea>Paste the copied content here to try it! ! </textarea>In the above implementation method, except for ie6 using window.clipboardData.setData to implement the copy function, other browsers use the Zero Clipboard plug-in to implement the copy function!
Some things you should pay attention to when using this plugin:
1. The above ZeroClipboard.js and ZeroClipboard.swf need to be placed under the same path. If you are not in the same path, you can use ZeroClipboard.setMoviePath("Flash Path"); to set the ZeroClipboard.swf address.
2. Analysis of the setCSSEffects() method: When the mouse moves to the button or clicks, due to the obstruction of the Flash button, the pseudo-classes such as ":hover" and ":active" of the copy button's body may be invalid. The setCSSEffects() method is to solve this problem. First we need to change the pseudo-class into a class, for example:
The code copy is as follows:
.copyit:hover{
border-color:#FF6633;
}
// You need to change ":hover" to the following ".hover"
.copyit.hover{
border-color:#FF6633;
}
3. Analysis of getHTML() method: If you want to instance a Flash yourself without using Zero Clipboard's attachment method, then this method can help. It accepts two parameters, namely the width and height of the Flash. The HTML code corresponding to Flash is returned. For example:
var html = clip.getHTML( 150, 20 );