How to Use the Jquery cross-browser text replication plug-in Zero Clipboard, jqueryclipboard

How to Use the Jquery cross-browser text replication plug-in Zero Clipboard, jqueryclipboard

When developers need to copy and click a certain part of the text, it is relatively simple to implement in IE. However, it is difficult to achieve cross-browser. Zero Clipboard, which uses Flash for copying, can be run only when Flash is installed in the browser, and is more flexible than 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.

Zero Clipboard features:
Compatible with Flash 10
Avoid using third-party browser plug-ins (security Conflicts in Adobe Flash browsers)
Invisible coverage, no interference, page design
Supports CSS "hover" and "active" statuses
Retain the "click", "mouseenter", and "mouseleave" events of the target element.
Supply callback functions "before replication" and "copy"
Very light! (7 kb reduction)

Download the Zero Clipboard and decompress 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 File

Copy codeThe Code is 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 and define the attribute information of the copy button element.

<script language="javascript">$(document).ready(function(){     $('a#copy-description').zclip({        path:'js/ZeroClipboard.swf',        copy:$('p#description').text()    });     // The link with ID "copy-description" will copy    // the text of the paragraph with ID "description"      $('a#copy-dynamic').zclip({        path:'js/ZeroClipboard.swf',        copy:function(){return $('input#dynamic').val();}    });     // The link with ID "copy-dynamic" will copy the current value    // of a dynamically changing input with the ID "dynamic" });</script>

Example 1:

Copy codeThe Code is as follows:
<A href = "#" id = "copy-description"> click copy preview </a>
<P id = "description"> source ...... </P>

Example 2:

<A href = "#" id = "copy-dynamic"> click copy 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) provides 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.

Extensions:
1) test compatibility with IE6, IE7, IE8, FF 3.6, Chrome browser 8, Safari 5, opera 11
2) appropriate CSS effects:

Copy codeThe Code is 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 .*/
/* Be sure to write your CSS as follows for best results :*/
 
/* It probably means that ZeroClip is a flash superposition ...... That is to say, flash is superimposed on text. In fact, the displayed text can be defined by css */
A: hover, a. hover {...}
A: active, a. active {...}

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

So far, the plug-in usage has ended. For the developer of the user, the remaining extension needs to be determined based on the needs.