ZeroClipboard solves cross-browser copying to clipboard

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.