Jquery Cross Browser Text Replication Plug in Zero Clipboard

When a developer needs to click and copy a part of the text, it is easier to do so in IE. But cross-browser is harder to do. Zero Clipboard It uses Flash for replication, so it runs as long as the browser has Flash installed, and is more flexible than IE's document.execCommand(" Copy ").

The implementation principle of Zero

Zero Clipboard uses Flash for replication, whereas the previous Clipboard Copy solution utilized a hidden Flash. But the latest Flash, Player 10, only allows operations on Flash to start the clipboard. Zero has improved this by using a transparent Flash floating above the button, so that instead of clicking on the button, Flash can be used for copying.

Zero Clipboard features:
Compatible with Flash 10 support
Avoid using third party browser plug-ins (Adobe Flash browser security conflicts)
Invisible overlay, no interference, page design
CSS "hover" and "active" states are supported
Retain the "click", "mouseenter" and "mouseleave" events for the target element
Supplying callbacks "Before Copy" and "Copy"
Extremely light weight! (7KB condensed)

First download Zero Clipboard and unzip it. Two files are required: ZeroClipboard.js and ZeroClipboard.swf. Put these two files in your project.
ES57en.ES58en.1.1.1

Usage:

1.) Introducing the core files first

<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 copy copy button element attribute 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" 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>

Case 1:

<a href="#" id="copy-description"> Click on the copy effect preview </a>

<p id="description"> The text source... </p>

Example 2:

< a href="#" id="copy-dynamic" > Click to copy the 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.) Provide 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.

Extended introduction:
1.) Test compatibility with IE6, IE7, IE8, FF 3.6, Chrome browser 8, Safari 5, Opera 11
2.) Appropriate CSS effects:

/* 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 basically means  ZeroClip is flash The superposition... That is to say flash Superimposed on the text Text on the actual display text can be based on css To define the */

a:hover, a.hover {...}

a:active, a.active {...}

Online presentation:
1, http: / / demo. ofstack. com js / 2016 / jquery_zclip demo1 html
2, http: / / demo. ofstack. com js / 2016 / jquery_zclip demo2 html

At this point, the introduction of how to use the plug-in is complete, and for the developer of the user, the remaining aspects of the extension will be determined according to the requirements.