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自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
使用Angular缓存父页面数据的方法
Jan 03 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 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
再Docker中架设完整的WordPress站点全攻略
2015/07/29 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
ThinkPHP5&amp;5.1实现验证码的生成、使用及点击刷新功能示例
2020/02/07 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
jQuery html()等方法介绍
2009/11/18 Javascript
jQuery 获取URL参数的插件
2010/03/04 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
node.js中的querystring.parse方法使用说明
2014/12/10 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
AngularJS 表单验证手机号的实例(非必填)
2017/11/12 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
Vue+Spring Boot简单用户登录(附Demo)
2020/11/12 Javascript
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
PyQt5 对图片进行缩放的实例
2019/06/18 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
自荐信的禁忌和要点
2013/10/15 职场文书
模具设计与制造专业应届生求职信
2013/10/18 职场文书
金融专业推荐信
2013/11/14 职场文书
一年级语文教学反思
2014/02/13 职场文书
公益广告语集锦
2014/03/13 职场文书
刊首寄语大全
2014/04/11 职场文书
数学系毕业生求职信
2014/05/29 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
办护照工作证明
2014/10/01 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
安全责任协议书范本
2016/03/23 职场文书