How to Use the replication function implemented by Zero Clipboard js + swf

Replication is often used in development. It is relatively simple to implement in IE. However, it is difficult to achieve cross-browser. This article describes a cross-browser Library Class Zero Clipboard. It uses Flash for copying, 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 open-source JavaScript + flash Copy Library Class

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

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 codeThe Code is as follows:
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.
========================================================== ========================
Everyone knows this. The event binding function of IE is attachEvent, while Firefox and Safari are addEventListener, and Opera supports both. Encapsulation.
Copy codeThe Code is as follows:
/************************************
* Add event binding
* @ Param obj: element of the event to be bound
* @ Param type: event name. "On" is not added. For example, "click" instead of "onclick ".
* @ Param fn: event processing 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 );
}

For example, add a page Click Event:
Copy codeThe Code is as follows:
Bind (document, "click", function (){
Alert ("Hello, World !! ");
});

========================================================== ========================
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, the pseudo classes such as css ": hover" and ": active" may become invalid due to the occlusion of the Flash button. The setCSSEffects () method solves this problem. First, we need to change the pseudo class to a class, for example:
Copy codeThe Code is as follows:
# Copy-botton: hover {
Border-color: # FF6633;
}
// You can change it to ": 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:

<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 ".

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", and other events can also be written as follows.

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.

Clip. addEventListener ("mouseOver", function (client ){
Var test = document. getElementById ("test ");
Client. setText (test. value); // reset the value to be copied
});
Copied successfully:

Clip. addEventListener ("complete", function (){
Alert ("Copied successfully! ");
});
Now, let's introduce it here. Try it on your own.