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


Posted in Javascript onMarch 24, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
js 数值项目的格式化函数代码
May 14 Javascript
HTML颜色选择器实现代码
Nov 23 Javascript
基于javascript实现图片懒加载
Jan 05 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
js实现无缝滚动图
Feb 22 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
koa socket即时通讯的示例代码
Sep 07 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
vue实现循环滚动列表
Jun 30 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
Jquery Fade用法详解
Nov 06 jQuery
不能不知道的10个angularjs英文学习网站
Mar 23 #Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 #Javascript
java中String类型变量的赋值问题介绍
Mar 23 #Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 #Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 #Javascript
基于jquery编写的放大镜插件
Mar 23 #Javascript
Jquery+ajax+JAVA(servlet)实现下拉菜单异步取值
Mar 23 #Javascript
You might like
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
PHP集成百度Ueditor 1.4.3
2014/11/23 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
jquery 1.4.2发布!主要是性能与API
2010/02/25 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
js实现文本框支持加减运算的方法
2015/08/19 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
JS区分Object与Aarry的六种方法总结
2017/02/27 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
2018/01/03 Javascript
React组件refs的使用详解
2018/02/09 Javascript
JS实现的文件拖拽上传功能示例
2018/05/21 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
基于vue实现简易打地鼠游戏
2020/08/21 Javascript
讲解Python中的递归函数
2015/04/27 Python
python字符串对其居中显示的方法
2015/07/11 Python
深入浅析python定时杀进程
2016/06/06 Python
python用pickle模块实现“增删改查”的简易功能
2017/06/07 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python如何求解两数的最大公约数
2018/09/27 Python
Pycharm使用之设置代码字体大小和颜色主题的教程
2019/07/12 Python
python多线程实现代码(模拟银行服务操作流程)
2020/01/13 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
商铺租赁意向书
2014/04/01 职场文书
安全标语大全
2014/06/10 职场文书
感恩教育月活动总结
2014/07/07 职场文书
金融保险专业求职信
2014/09/03 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers
Golang Web 框架Iris安装部署
2022/08/14 Python