Zero Clipboard實現(xiàn)瀏覽器復(fù)制到剪貼板的方法(多個復(fù)制按鈕)

    本文實例講述了Zero Clipboard實現(xiàn)瀏覽器復(fù)制到剪貼板的方法。分享給大家供大家參考，具體如下：
    <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"); //設(shè)置 不然要放在網(wǎng)站根目錄下才顯示
        clip.setHandCursor( true );
        clip.setText( $("#txtInvite_"+id).val() );
        clip.addEventListener('complete', function (client, text) {
          ui.success( "恭喜復(fù)制成功" );
        });
        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>
    <table cellspacing="0" cellpadding="0">
       <tr>
        <td width="19%" height="45">默認(rèn)邀請鏈接：</td>
        <td width="52%"><input type="text" name="txtInvite_default" id="txtInvite_default" value="{$defaultInviteLink}" /></td>
        <td width="31%">
          <div id="d_clip_container_default">
            <div id="d_clip_button_default" data="default">復(fù)制</div>
          </div>
        </td>
       </tr>
      </table>
     </div>
    <volist name="invitelists" id="vo">
    <div>
    <table cellspacing="0" cellpadding="0">
       <tr>
        <td width="19%" height="45">{$vo.group_name}專用邀請鏈接：</td>
        <td width="52%"><input type="text" name="txtInvite_{$vo.id}" id="txtInvite_{$vo.id}" value="{$vo.invitelink}" /></td>
        <td width="31%">
    <div id="d_clip_container_{$vo.id}">
            <div id="d_clip_button_{$vo.id}" data="{$vo.id}">復(fù)制</div>
          </div>
        </td>
      </tr>
    </table>
    </div>
    </volist>
    希望本文所述對大家jQuery程序設(shè)計有所幫助。