Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
更新时间:2016年3月28日 10:00 点击:2228
本文实例讲述了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程序设计有所帮助。
相关文章
JavaScript深度复制(deep clone)的实现方法
本文给大家介绍JavaScript深度复制(deep clone)的实现方法,涉及到js深度复制相关知识,本文介绍的非常详细,特此分享脚本之家平台供大家参考...2016-02-21- 这篇文章主要介绍了js实现点击复制当前文本到剪贴板功能,兼容所有浏览器,感兴趣的小伙伴们可以参考一下...2015-12-24
深入理解JavaScript中的对象复制(Object Clone)
下面小编就为大家带来一篇深入理解JavaScript中的对象复制(Object Clone)。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-05-20Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
这篇文章主要介绍了Zero Clipboard实现浏览器复制到剪贴板的方法,带有多个复制按钮效果,涉及jQuery插件ZeroClipboard.js具体使用步骤与相关技巧,需要的朋友可以参考下...2016-03-28- 这篇文章主要介绍了如何利用go-zero在Go中快速实现JWT认证,本文分步骤通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2020-10-26
- 在大量的网站都有这样的功能,当点击一个按钮的时候可以复制当前页面的地址,以此可以方便网站用户对链接的存储,同时也便于网站的推广,下面给大家分享具体实现代码,对js实现点击按钮就复制的相关知识感兴趣的朋友一起学习吧...2015-12-16
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
这篇文章主要介绍了Jquery跨浏览器文本复制插件Zero Clipboard的使用方法,需要的朋友可以参考下...2016-03-01- 这篇文章主要介绍了使用PHP创建文件夹、删除文件夹、复制文件夹和文件,感兴趣的小伙伴们可以参考一下...2016-05-05
- 这篇文章主要介绍了Mysql半同步复制原理及问题排查 的相关资料,需要的朋友可以参考下...2016-01-07
- 下面小编就为大家带来一篇MySQL查询结果复制到新表的方法(更新、插入)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-01-09
- 这篇文章主要介绍了MySQL中复制数据表中的数据到新表中的操作教程,文中分为新表存在和新表不存在两种情况来讲,需要的朋友可以参考下...2016-03-15
- 这篇文章主要为大家介绍了go zero微服务实战处理每秒上万次的下单请求示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...2022-07-06
关于go-zero单体服务使用泛型简化注册Handler路由的问题
这篇文章主要介绍了go-zero单体服务使用泛型简化注册Handler路由,涉及到Golang环境安装及配置GoModule的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2022-07-27- 这篇文章主要为大家介绍了gozero微服务高在请求量下的优化处理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪...2022-07-06