Zero Clipboard implements the way the browser copies to the Clipboard (multiple copy buttons) _jquery

The example in this article describes how zero Clipboard implements a browser to copy to the Clipboard. Share to everyone for your reference, specific as follows:

<script type= "Text/javascript" src= "{$site _url}/public/js/zeroclipboard.js" ></script> <script
    Language= "JavaScript" > $ (Function () {$ (". My_clip_button"). each (function (i) {var id = $ (this). attr (' data ');
    var clip=null;
    Clip = new Zeroclipboard.client (); Zeroclipboard.setmoviepath ("{$site _url}/public/js/zeroclipboard.swf");
    Set otherwise to be placed in the site root directory to display clip.sethandcursor (true);
    Clip.settext ($ ("#txtInvite_" +id). Val ());
    Clip.addeventlistener (' Complete ', function (client, text) {ui.success ("Congratulate copy success");
    });
  Clip.glue (' D_clip_button_ ' +id, ' d_clip_container_ ' +id);
});
}); </script> <style> My_clip_button {width:62px; text-align:center; height:20px;border:1px solid black; Background-color: #ccc; margin:2px; padding:2px; Cursor:default; font-size:9pt; }. my_clip_button.hover {background-color: #eee; my_clip_button.active {background-color: #aaa;} </style> < div style= "width:90%;margin:0 auto; Height:50px;line-height:20px; " > <table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" > <tr> <td width= "19%" height= "45 "Align= Right > Default invitation link:</td> <td width=" 52% "><input type=" text "name=" Txtinvite_default "id=" Txtinvite_default "value=" {$defaultInviteLink} "style=" width:350px; "/></td> <td width=" 31% "> ;d IV id= "D_clip_container_default" style= "position:relative;" 
    > <div id= "d_clip_button_default" class= "My_clip_button" data= "Default" > Replication </div> </div> </td> </tr> </table> </div> <volist name= "invitelists" id= "Vo" > <div style= "wi dth:90%;margin:0 Auto; height:50px;line-height:20px; " > <table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" > <tr> <td width= "19%" height= "45 "Align= right" >{$vo. Group_name} Private Invitation link:</td> <td width= "52%" ><input type= "text" Name= "txtinvite_{ $vo. ID} "id=" txtinvite_{$vo. Id} "value=" {$vo. Invitelink} "style=" width:350px; "/></td> <td width=" 31% "> <div id=" D_clip_container _{$vo. ID} "style=" position:relative; " > <div id= "d_clip_button_{$vo. ID}" class= "My_clip_button" Data= "{$vo. id}" > Replication </div> &LT;/DIV&G
    T

 </td> </tr> </table> </div> </volist>

More about jquery-related content readers can view the site topics: "jquery drag-and-drop effects and tips summary", "JQuery Extended Skills Summary", "jquery common Classic Effects Summary", "jquery animation and special effects usage Summary", "jquery Selector usage Summary "jquery common Plug-ins and Usage summary"

I hope this article will help you with the jquery program design.