Implementation principle of Zero Clipboard
Zero Clipboard uses transparent Flash to float the copy button. In this way, you can click not a button but Flash, so that you can pass the required content into Flash, then, copy the input content to the Clipboard through the Flash copy function.
How to install Zero Clipboard
In fact, it is not the installation, that is, preparations before use.
First, download the compressed Zero Clipboard package, decompress the package, and put the files ZeroClipboard. js and ZeroClipboard.swf in the folder into your project.
Zero Clipboard: [project homepage] [zip download] [Online Demo]
Then introduce the Zero Clipboard js file: ZeroClipboard. js to the page where you want to use the replication function.
The following code:
<Script type = "text/javascript" src = "ZeroClipboard. js"> </script> Note: ZeroClipboard. js and ZeroClipboard.swf must be placed in the same path. If they are not in the same path, use ZeroClipboard. setMoviePath ("Flash path" placement handler to set the zeroclipboard.swf address
Zero Clipboard for simple cross-browser Replication
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"); // it cannot be changed with the previous sentence. This achieves the basic functions. 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 the input box. Don't worry, as we will talk about below.
Advanced functions of Zero Clipboard
1. 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. The following code re-sets the button position for the resize event implemented in jQuery:
$ (Window). resize (function (){
Clip. reposition ();
}); 2. hide () and show () Methods
These two methods can hide and display the Flash button. The show () method calls the reposition () method.
3. 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 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.
- 2 pages in total:
- Previous Page
- 1
- 2
- Next Page