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 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
Vue组件开发技巧总结
Mar 04 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
利用jquery和BootStrap实现动态滚动条效果
Dec 03 jQuery
详解微信小程序图片地扯转base64解决方案
Aug 18 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
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2016/05/19 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
浅谈javascript中的事件冒泡和事件捕获
2016/12/28 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
jQuery EasyUI结合zTree树形结构制作web页面
2017/09/01 jQuery
详解创建自定义的Angular Schematics
2018/06/06 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
python中元类用法实例
2014/10/10 Python
Python写的服务监控程序实例
2015/01/31 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Python IDLE清空窗口的实例
2018/06/25 Python
python学生管理系统学习笔记
2019/03/19 Python
pandas 数据索引与选取的实现方法
2019/06/21 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
Django之模板层的实现代码
2019/09/09 Python
Python对称的二叉树多种思路实现方法
2020/02/28 Python
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
注塑工厂厂长岗位职责
2013/12/02 职场文书
培训讲师岗位职责
2014/04/13 职场文书
室内设计专业自荐信
2014/05/31 职场文书
超市客服工作职责
2014/06/11 职场文书
婚前协议书标准版
2014/10/19 职场文书
基层党员群众路线整改措施及努力方向
2014/10/28 职场文书
文体活动总结
2015/02/04 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书