jquery cross-browser text replication plug-in zero Clipboard method of use _jquery

When the developer needs to click on a local text to copy the effect, it is easy to implement under IE. But it's more difficult to do it across browsers. Zero Clipboard it uses flash to replicate, so as long as the browser is equipped with Flash can run, and more than IE Document.execcommand ("Copy") more flexible.

The realization principle of Zero Clipboard

Zero Clipboard uses Flash for replication, preceded by a Clipboard copy solution, which utilizes a hidden flash. But the latest Flash Player 10 only allows operations on flash to start the Clipboard. So Zero Clipboard has improved on this, using a transparent flash, let it float on the button, so in fact, click not the button but flash, you can use flash copy function.

Zero Clipboard Features Introduction:
Compatible Support Flash 10
Avoid using Third-party browser plug-ins (security conflicts in Adobe Flash browsers)
Invisible overlay, no interference, page design
Supports CSS "hover" and "active" state
Events that retain the "click", "MouseEnter" and "MouseLeave" of the target element
Supply callback function "pre-Replication" and "copy"
A very light weight! (7KB precision Shrink)

First download Zero Clipboard and unzip it. Two files are required: Zeroclipboard.js and zeroclipboard.swf, put these two files into your project.
Click to download: jquery.zclip.1.1.1

Usage:

1. First, introduce the core document

Copy Code code as follows:

<script type= "Text/javascript" src= "Js/jquery.js" ></script>
<script type= "Text/javascript" src= "Js/jquery.zclip.js" ></script>

2. Write the function module in the page code, define copy Copy button element property information

 <script language= "JavaScript" > $ (document). Ready (function () {       $ (' a#copy-description '). Zclip ({        path: ' js/ Zeroclipboard.swf ',         copy:$ (' p#description '). Text ()   
  });        //the link with ID "copy-description" would copy     //the text of the Paragraph with ID "description"         $ (' a#copy-dynamic '). Zclip ({   & Nbsp;    path: ' js/zeroclipboard.swf ',         copy:
The function () {return $ (' Input#dynamic '). val ();}     });       //the link with ID "copy-dynamic" would copy the current value     //o
f a dynamically changing input with the ID "dynamic"  }); </script> 

Example one:

Copy Code code as follows:

<a href= "#" id= "copy-description" > Click Copy Effect Preview </a>
<p id= "description" > Text source ......</p>

Case TWO:

<a href= "#" id= "copy-dynamic" > Click Copy Effect preview: </a><input style= "width:300px; margin-left:15px "type=" text "id=" dynamic "value=" insert any text here. "Onfocus=" if (this.value== ' Insert any text here. ') {this.value= '} ' onblur= ' if (this.value== ') {this.value= ' Insert any text here. '} '/>

3.) Supply custom callback functions.

<script language= "JavaScript" > $ (document). Ready (function () {      $ ("a# Copy-callbacks "). Zclip ({        path: ' js/zeroclipboard.swf ',          copy:$ (' #callback-paragraph '). Text (),          beforecopy:function () {           
 $ (' #callback-paragraph '). CSS (' background ', ' yellow ');
            $ (this). CSS (' color ', ' orange ');         },         aftercopy: function () {            $ (' #callback-paragraph ').
CSS (' background ', ' green ');
            $ (this). CSS (' color ', ' purple ');             $ (This). Next ('. Check '). Show ();
        }     });
 }); </script>

3.) Default parameters.

Extension Introduction:
1.) test compatible IE6,IE7,IE8,FF 3.6,chrome browser 8,safari 5, opera 11
2.) Appropriate CSS effects:

Copy Code code as follows:

/* Zclip is a flash overlay, so it must provide * *
/* The target element with "hover" and "active" classes * *
* To simulate native:hover and:active states. */
/* is sure to write your CSS as follows for best results: * *

* Probably means that zeroclip is the flash overlay ... That is, flash superimposed on the text, in fact, the display text can be defined according to CSS * * *
A:hover, A.hover {...}
A:active, a.active {...}

Online Demo:
1, http://demo.jb51.net/js/2016/jquery_zclip/demo1.html
2, http://demo.jb51.net/js/2016/jquery_zclip/demo2.html

At this point, the plug-in has been introduced to the end of the application, for the user's developers, the remaining extensions will be based on requirements.