Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)

 更新时间:2016年03月24日 09:05:21   作者:haiwei.sun  
这篇文章主要介绍了Zero Clipboard实现浏览器复制到剪贴板的方法,带有多个复制按钮效果,涉及jQuery插件ZeroClipboard.js具体使用步骤与相关技巧,需要的朋友可以参考下

本文实例讲述了Zero Clipboard实现浏览器复制到剪贴板的方法。分享给大家供大家参考,具体如下:

<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"); //设置 不然要放在网站根目录下才显示
    clip.setHandCursor( true );
    clip.setText( $("#txtInvite_"+id).val() );
    clip.addEventListener('complete', function (client, text) {
      ui.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">默认邀请链接:</td>
    <td width="52%"><input type="text" name="txtInvite_default" id="txtInvite_default" value="{$defaultInviteLink}" style="width:350px;" /></td>
    <td width="31%">
      <div id="d_clip_container_default" style="position:relative;">
        <div id="d_clip_button_default" class="my_clip_button" data="default">复制</div>
      </div>
    </td>
   </tr>
  </table>
 </div>
<volist name="invitelists" id="vo">
<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">{$vo.group_name}专用邀请链接:</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}">复制</div>
      </div>
    </td>
  </tr>
</table>
</div>
</volist>

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结

希望本文所述对大家jQuery程序设计有所帮助。

相关文章

  • jQuery 选择同时包含两个class的元素的实现方法

    jQuery 选择同时包含两个class的元素的实现方法

    下面小编就为大家带来一篇jQuery 选择同时包含两个class的元素的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • 基于jquery的表格排序

    基于jquery的表格排序

    看了《javascript高级程序设计》里面有个表格排序的例子;觉得很有意思,所以自己用jquery的基本库做了一个,里面的概念基本和书里面的差不多
    2010-09-09
  • 详解jquery插件jquery.viewport.js学习使用方法

    详解jquery插件jquery.viewport.js学习使用方法

    本篇文章主要介绍了详解jquery插件jquery.viewport.js学习使用方法,具有一定的参考价值,有兴趣的可以了解一下
    2017-09-09
  • jQuery实现三级联动效果

    jQuery实现三级联动效果

    这篇文章主要为大家详细介绍了jQuery实现三级联动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • jquery实现图片滚动效果的简单实例

    jquery实现图片滚动效果的简单实例

    这篇文章主要介绍了jquery实现图片滚动效果的简单实例,有需要的朋友可以参考一下
    2013-11-11
  • jQuery实现table表格信息的展开和缩小功能示例

    jQuery实现table表格信息的展开和缩小功能示例

    这篇文章主要介绍了jQuery实现table表格信息的展开和缩小功能,涉及jQuery事件响应及页面元素遍历、属性修改相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • jQuery中ajax的具体使用

    jQuery中ajax的具体使用

    本文将介绍jQuery中如何使用Ajax以及通过代码详解其使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-10-10
  • jquery animate实现鼠标放上去显示离开隐藏效果

    jquery animate实现鼠标放上去显示离开隐藏效果

    本文为大家介绍下使用jquery animate实现鼠标放上去显示,离开就隐藏的效果,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • jQuery fadeOut 异步实例代码详解

    jQuery fadeOut 异步实例代码详解

    fadeOut() 方法逐渐改变被选元素的不透明度,从可见到隐藏(褪色效果)。这篇文章给大家介绍jquery fadeout异步实例代码,感兴趣的朋友一起看下吧
    2016-08-08
  • jQuery用FormData实现文件上传的方法

    jQuery用FormData实现文件上传的方法

    众所周知文件上传是Web开发中的重要话题,最直接和简单的方式是通过表单直接提交文件。 下面这篇文章小编就来和大家分享jQuery利用FormData实现文件上传的方法,文中介绍的方法简单易懂,相信对大家的理解和学习很有帮助,有需要的朋友们下面来一起学习学习吧。
    2016-11-11

最新评论