Zeroclipboard plug-ins enable multiple browser replication capabilities (Firefox, Chrome, IE6) _javascript skills

However, it is noteworthy that the official introduction has made it clear that this plug-in does not support IE6, the following will provide a multiple-instantiation of the Zero Clipboard replication function and compatible IE6!

Download Zeroclipboard http://www.jb51.net/jiaoben/24961.html First

<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, is actually called setcsseffects () method * * copy_info{width:260px;height:100px;border:1px solid #ccc;p adding: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" > 1th replicated Content!!!
</textarea> <b class= "copyit" > Copy content </b> </div> <br/> <div class= "Clip_container" > <textarea id= "Fe_text" cols=50 rows=5 class= "copycnt" > 2nd replicated Content!!! </textarea> <b Class= "Copyit" > Copy content </b> </div> <script type= "Text/javascript" > var clip = null; function Copythis () {if ($.browser.version==6.0) {//Is for IE6 $ ('. Copyit '). Bind ("click", Function () {var code=$ (this). PA
		Rents (". Clip_container"). Find (". copycnt"). Text ();
		Window.clipboardData.setData ("Text", code);
	  Alert (' copied content: \ n ' +code ');
	}) return; } zeroclipboard.setmoviepath ("http://img.jb51.net/js/scripts/clipboard.swf '");/if zeroclipboard.js,
	Zeroclipboard.swf placed in the same directory, you can omit this sentence;
	Clip = new Zeroclipboard.client ();
	 $ ('. Copyit '). MouseOver (function () {var code=$ (this). Parents (". Clip_container"). Find (". copycnt"). Text ();
	 Clip.settext (code);
		 if (clip.div) {//has created a parent-layer div that contains flash, the location of the flash layer is repositioned when the mouse hover//clip.receiveevent (' mouseout ', null);
	 Clip.reposition (this);
	 }else{Clip.glue (This)};
	Clip.receiveevent (' mouseover ', null);
	} );
	Clip.addeventlistener (' Complete ', function (client, text) {alert ("copied content: \ n" +text);
});
} copythis (); </script> <textarea StYle= "width:300px;height:300px;"
> Paste copied content here, try it!! </textarea>

The above implementation method, in addition to IE6 use Window.clipboardData.setData to achieve the replication function, other browsers are using zero Clipboard plug-ins to achieve the replication function!

Some points to note when using this plugin:

1, the above zeroclipboard.js, zeroclipboard.swf need to put in the same path. If you are not on the same path, you can use Zeroclipboard.setmoviepath ("Flash path") to set the zeroclipboard.swf address.

2, Setcsseffects () method of resolution: When the mouse moved to the button or click, because there is a flash button occlusion, so copy the button of the body's CSS ": hover", ": Active" and other pseudo classes may be invalidated. Setcsseffects () method is to solve this problem. First we need to change the pseudo class to class, for example:

Copy Code code as follows:

. copyit:hover{
Border-color: #FF6633;
}
You need to change ": hover" to the following ". Hover"
. copyit.hover{
Border-color: #FF6633;
}

3, Gethtml () Method of analysis: If you want to own a flash, do not use zero Clipboard attachment method, then this method can help busy. It accepts two parameters, respectively, for the width and height of the flash. Returns the corresponding HTML code for the Flash. For example:
var html = clip.gethtml (150, 20);