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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
JavaScript 高效运行代码分析
Mar 18 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
不能不知道的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
怎样辨别一杯好咖啡
2021/03/03 新手入门
php 字符串压缩方法比较示例
2014/01/23 PHP
php检测文件编码的方法示例
2014/04/25 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
Yii2-GridView 中让关联字段带搜索和排序功能示例
2017/01/21 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
JavaScript实现存储HTML字符串示例
2014/04/21 Javascript
Javascript中的关键字和保留字整理
2014/10/16 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Django卸载之后重新安装的方法
2017/03/15 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
pandas DataFrame数据转为list的方法
2018/04/11 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
详解Appium+Python之生成html测试报告
2019/01/04 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
python实现图像拼接功能
2020/03/23 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
PyCharm 解决找不到新打开项目的窗口问题
2021/01/15 Python
CSS3的 fit-content实现水平居中
2017/09/07 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
2014年3.15团委活动总结
2014/03/16 职场文书
个人租房协议书范本
2014/09/30 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
华清池导游词
2015/02/02 职场文书
2016银行求职自荐信
2016/01/28 职场文书
微信小程序实现录音Record功能
2021/05/09 Javascript
Spring整合Mybatis的全过程
2021/06/28 Java/Android