JS Plugin zclip implement copy to clipboard function

Before in a project used the plug-in, but recently to do, found that there is a problem, according to the past to do a good job, check all the problems, or do not appear, the element is bound to zclip_type this event, is not displayed, think of the next, look at the HTML structure elements a look, problem found, There is a problem with the covered layer positioning. Relative to the body positioning, there is no relative TD positioning.

One, prepare for work.

Get ready for jquery, and then go to http://www.steamdev.com/zclip/here to download jquery.zclip.js and zeroclipboard.swf, But the zeroclipboard.swf there is dead, you can go here http://pan.baidu.com/share/link?shareid=1286340661&uk=2133883598&fid= 2382679931 downloads, which I have tested can be used.

Add in HTML

?

1 2	<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"src="jquery.zclip.js"></script>

　　

2. Writing code

Here is a small demo, mostly copying a link in a text box to the Clipboard.

?

1 2	<input type="text" value="www.baidu.com" id="link"><span id="copyBtn">复制链接</span>

　　Then add the script, very simple.

<script>        $ ('#copyBtn'). Zclip ({            "  zeroclipboard.swf",            copy:function () {                return $ ('#　　　 　　Link'). Val ();  }        }); </script>

The path here is your flash, and copy is the callback function after the copy succeeds. Returns the value in the text box.

In addition we have to set the Jquery.zclip.js, with the editor to open it, right in front, you will see the following code:

?

1 2 3 4 5 6 7 8 9 10 11 12 13

复制代码  var settings = $.extend({                path: ‘ZeroClipboard.swf‘,                 copy: null,                 beforeCopy: null,                 afterCopy: null,                 clickAfter: true,                 setHandCursor: true,                 setCSSEffects: true            }, params); 复制代码

　　

Also modify path for your flash--zeroclipboard.swf, other settings we don't care about him first.

Well, test it right away, but here's to note that local testing is not successful, you need to use Tomcat or Apache to set up a server on this machine, and then put the files in the server directory to test. You'll see a small hand appear on the copy link, and a flash menu:

Then click on it and the success prompt box appears. You can try pasting in other places to see if there is a copy success.

Of course, you can also modify the prompt box after the copy succeeds, or add more features.

Find the following code in the.

Clip.addeventlistener (' Complete', function (client, text) {if($.isfunction (settings.aftercopy)) {O.trigger ('zclip_aftercopy'); } Else {                            if(Text.length > -) {text= Text.substr (0, -) +"... \ n \ nthe ("+ (Text.length- -) +"characters not shown)"; } o.removeclass ('Hover'); Alert ("Copied text to clipboard:\n\n"+text); }                        if(settings.clickafter) {O.trigger ('Click'); }                    });

Change the code of the alert that place, and maybe there are other places that can be modified, I did not look closely.

3. Other

We open our demo with chrome and open the console to see

Yes, this is exactly what the plugin has inserted into our page, and we can see that it just covers our copy link button.

Well, the ability to copy to the Clipboard using plug-in Zclip is covered here. For more details, please visit: http://www.steamdev.com/zclip/

The use of plug-ins is described in detail, as well as the settings of the relevant parameters, including the function after the successful copy, how to add a style to the "Copy link" button and so on.

___________________________________________________________________________