JavaScript flash Copy Library Class Zero Clipboard

Document directory

• Implementation principle of Zero Clipboard
• How to use Zero Clipboard

This article describes a cross-browser Library Class Zero Clipboard. It uses Flash for replication, so as long as the browser is installed with Flash, it can run, and more flexible than the document.exe cCommand ("Copy") of IE.

Implementation principle of Zero Clipboard

Zero Clipboard uses Flash for copying. Previously there was a Clipboard Copy solution, which used a hidden Flash. However, the latest Flash Player 10 allows you to start the clipboard only by performing operations on the Flash. Therefore, Zero Clipboard has been improved, and a transparent Flash is used to float the button. In this way, the Flash copy function can be used instead of the button but Flash.

How to use Zero Clipboard

Download the Zero Clipboard and decompress it. Two files are required: ZeroClipboard. js and ZeroClipboard.swf. Put these two files into your project.
Zero Clipboard: [homepage] [Download] [demo]
Core functions
Step 1: import the ZeroClipboard. js file:

<Script type = "text/javascript" src = "ZeroClipboard. js"> </script>
Set the path of the ZeroClipboard.swf file:

ZeroClipboard. setMoviePath ("ZeroClipboard.swf ");
Note: The paths of ZeroClipboard. js and ZeroClipboard.swf files must be replaced with those of the corresponding files in your project. Or an absolute path.
Then we use:

Copy codeCode: var clip = new ZeroClipboard. Client (); // create an object
Clip. 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. Click this button to copy it.
// This button is not necessarily an input button or other DOM elements.
Clip. glue ("copy-botton"); // cannot be exchanged with the previous position

In this way, the basic functions are implemented, and you can click the button to copy the set text. You may have noticed that the text to be copied is fixed. If you want to change it dynamically, for example, copying the content in an input box. Don't worry, as we will talk about below.

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

Reposition () method
Because there is a Flash button floating on the button, when the page size changes, the Flash button may be misplaced, so it won't be clicked. Zero Clipboard provides a reposition () method to recalculate the position of the Flash button. We can bind it to the resize event.Copy codeThe Code is as follows: bind (window, "resize", function (){
Clip. reposition ();
});

Bind is a cross-browser event binding function. For more information, see four cross-browser functions.
Hide () and show () Methods
These two methods can hide and display the Flash button. The show () method calls the reposition () method.

SetCSSEffects () method
When you move the mouse over a button or click it, due to the occlusion of the Flash button, pseudo classes such as css ": hover" and ": active" may become invalid. The setCSSEffects () method solves this problem. First, we need to change the pseudo class to a class, for example:

# Copy-botton: hover {
Border-color: # FF6633;
}
/* You can change ": hover" to ". hover "*/
# Copy-botton.hover {
Border-color: # FF6633;
}
We can call clip. setCSSEffects (true); in this way, the Zero Clipboard will automatically process for us: Treat class. hover as a pseudo class: hover.

GetHTML () method
If you want to create a Flash instance by yourself without the Zero Clipboard attachment method, this method can help you. It accepts two parameters: the width and height of the Flash. The HTML code corresponding to Flash is returned. For example:

Var html = clip. getHTML (150, 20 );
You can use innerHTML or directly document. write (); for output.
The following is the output HTML code:

Copy codeThe Code is as follows: <embed id = "ZeroClipboardMovie_1" src = "zeroclipboard/ZeroClipboard.swf" loop = "false" menu = "false" quality = "best" bgcolor = "# ffffff" width = "150" height = "20" 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 in the Flash JavaScript Communication Interface of IE. You must insert an object tag to an existing DOM element. Before writing data to innerHTML, make sure that the element has been inserted into the DOM using the appendChild method.
Zero Clipboard event handling
Zero Clipboard provides some events that you can customize functions to process. The Zero Clipboard event processing function is addEventListener (). For example, when Flash is fully loaded, an event "load" is triggered ".Copy codeThe Code is as follows: clip. addEventListener ("load", function (client ){
Alert ("Flash loaded! ");
});

Zero Clipboard will pass the clip object as a parameter. That is, the "client" in the above example ".
"Load" can also be written as "onLoad", as can other events.
Other events include:

MouseOver
MouseOut mouse removal event
MouseDown
MouseUp mouse release event
Complete replication success event
Among them, mouseOver events and complete events are commonly used.
As mentioned above, if you need to dynamically change the content to be copied, The mouseOver event can be used. For example, if you need to dynamically copy a value in the input box with the id of test, you can reset the value when the mouse is over.Copy codeThe Code is as follows: clip. addEventListener ("mouseOver", function (client ){
Var test = document. getElementById ("test ");
Client. setText (test. value); // reset the value to be copied
});

Copied successfully:Copy codeThe Code is as follows: clip. addEventListener ("complete", function (){
Alert ("Copied successfully! ");
});

Now, let's introduce it here. Try it on your own.