How to use the copy function implemented by the Zero Clipboard js+swf

In the development often uses the copy function, under IE The realization is relatively simple. But it's hard to cross-browser. This article describes a cross-browser library class, Zero Clipboard. It uses flash to replicate, so as long as the browser installed flash can run, and more than IE's Document.execcommand ("Copy") more flexible.

the implementation principle of Zero Clipboard
The Zero Clipboard uses Flash for replication, prior to the Clipboard copy solution, which exploits a hidden flash. However, the latest Flash Player 10 only allows operation on Flash to start the Clipboard. So the Zero Clipboard to improve this, with a transparent flash, let it float on the button above, so in fact, the click is not the button but flash, you can use the copy function of Flash.

How to use Zero Clipboard 
First download the Zero Clipboard and unzip it. It requires two files: Zeroclipboard.js and zeroclipboard.swf, and put these two files into your project.  


Zero Clipboard Open source Javascript+flash Copy Library class

Demo address:
http://demo.jb51.net/js/ZeroClipboard/index.html

core Functions  
first step, import zeroclipboard.js file:
<script type= "Text/javascript" src= "zeroclipboard.js" ></script>&NBSP;
to set the path of the zeroclipboard.swf file: &NBSP;

Zeroclipboard.setmoviepath ("zeroclipboard.swf"); &NBSP;
Note: Above Zeroclipboard.js, the path to zeroclipboard.swf two files needs to be replaced with the path to the corresponding file in your project. Or it can be an absolute path. &NBSP;

then uses:  

Copy CodeThe code is as follows: var clip = new Zeroclipboard.client (); Create a new objectClip.sethandcursor (TRUE);//Set the mouse to the hand type clip.settext ("haha");//Set the text to be copied. //Register a button with the parameter ID. Clicking on this button will copy. //This button does not necessarily require an input button or other DOM element. clip.glue ("Copy-botton");//And the previous sentence position is not interchangeable

so that the basic skills can be achieved, click on the button to copy the set of text. You may have noticed that the text to be copied is fixed and what to do if you want to change it dynamically, such as copying the contents of an input box. Don't worry, I'll talk about it below. &NBSP;

Other functions &NBSP;
Zero Clipboard also provides some other functions, some of which are very useful. &NBSP;

Reposition () method &NBSP;
Because there is a flash button floating on the button, when the page size changes, the flash button may be misplaced, so it will not point. It doesn't matter, Zero Clipboard provides a reposition () method that can recalculate the location of the Flash button. We can bind it to the Resize event. &NBSP;

Copy CodeThe code is as follows: Bind (window, "Resize", function () {clip.reposition ();   });  

< Span class= "Apple-converted-space" >< Span class= "Apple-converted-space" >< Span class= "Apple-converted-space" >< Span class= "Apple-converted-space" >< Span class= "Apple-converted-space" >
Bind is a cross-browser event binding function.
=========================================================
This must have been known to everyone. The event binding function of IE is attachevent, while Firefox, Safari is Addeventlistener;opera and both are supported. Encapsulation is done below. &NBSP;

Copy CodeThe code is as follows:/************************************* Add Event Bindings* @param obj: The element to bind the event to  * @param type: event name. Do not add "on". For example: "Click" instead of "onclick".   * @param fn: event handling function   ********** /  function bind (obj, type, fn) {  if (obj.attachevent) {  obj[' e ' +type+fn] = fn ;   obj[type+fn] = function () {obj[' E ' +type+fn] (window.event);}   obj.attachevent (' on ' +type, Obj[type+fn]);  } else  obj.addeventlistener (Type, FN, false );  } &NBSP;

For example, add a page click event:

Copy CodeThe code is as follows: Bind (document, "click", Function () {  alert ("Hello, world!!");  }); &NBSP;

= = = =====================================================
Hide () and show () method  
These two methods can hide and show the Flash button. where the show () method calls the reposition () method. &NBSP;

Setcsseffects () method  
Pseudo-classes such as CSS ": hover", ": Active" may become invalid when the mouse is moved over the button or when clicked, due to the occlusion of the Flash button. The Setcsseffects () method is to solve this problem. First we need to change the pseudo-class to class, for example: &NBSP;

Copy CodeThe code is as follows: #copy-botton:hover{Border-color: #FF6633;  } //Can be changed to the following ": hover" to ". Hover" #copy-botton.hover{ border-color: #FF6633; } 

We can call Clip.setcsseffects (true); So the Zero Clipboard will automatically handle for us: class. Hover as Pseudo-class: hover.

Gethtml () method
If you want to use your own instance of a Flash, without the Zero Clipboard attachment method, then this method can be helpful. It accepts two parameters, the width and height of the Flash, respectively. Returns the corresponding HTML code for Flash. For example:

var html = clip.gethtml (150, 20);
You can use InnerHTML or direct document.write (); to output.
Here is the HTML code for my test output:

<embed id= "Zeroclipboardmovie_1" src= "zeroclipboard/zeroclipboard.swf" loop= "false" menu= "false" quality= "best" Bgcolor= "#ffffff" width= "height=" "Name=" Zeroclipboardmovie_1 "align=" Middle "allowscriptaccess=" always " Allowfullscreen= "false" Type= "Application/x-shockwave-flash" pluginspage= "http://www.macromedia.com/go/ Getflashplayer "flashvars=" id=1&width=150&height=20 "wmode=" Transparent "/>
There is a bug on the IE Flash JavaScript communication interface. You must insert an OBJECT tag into an existing DOM element. And before writing InnerHTML, make sure that the element has been inserted into the DOM AppendChild method.

Zero Clipboard Event Handling
Zero Clipboard provides events that you can customize to handle these events. The Zero Clipboard event handler function is AddEventListener (); For example, when Flash is fully loaded, an event "load" is triggered.

Clip.addeventlistener ("Load", function (client) {
Alert ("Flash loading is complete!") ");
});
Zero Clipboard passes the clip object as a parameter. That is, "client" in the example above.
and "Load" can also be written as "OnLoad", other events can do the same.

Other events include:

MouseOver Mouse over events
MouseOut Mouse Out Event
MouseDown Mouse Down Events
MouseUp Mouse Release Event
Complete Replication Success Event&NBSP;
where MouseOver events and complete events are more commonly used. &NBSP;
said earlier, if you need to dynamically change what you want to copy, the MouseOver event can be useful. For example, to dynamically copy the value in an input box with ID test, we can reset the value at the mouse over. &NBSP;

Clip.addeventlistener ("MouseOver", function (client) {&NBSP;
var test = document.getElementById ("test"); Client.settext (Test.value);//Reset the value to be copied &NBSP;
}); &NBSP;
Replication succeeded: &NBSP;

Clip.addeventlistener ( "Complete", function () {&NBSP;
Alert ("Copy succeeded! "); &NBSP;
}); &NBSP;
All right, let's introduce here. Try your own experiment.

Zero Clipboard js+swf How to use replication features