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

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

赞 (0)

相关推荐

  • jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

    jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板

    WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制,然后用户可以粘贴到想粘贴的地方. HTML 首先需要在页面中载入jquery库和zclip插件,这两个文件已经打好包,欢迎点击下载. <script type="text/javascript" src="js/jquery.js"></script&

  • JQuery zClip插件实现复制页面内容到剪贴板

    JQuery zClip插件实现复制页面内容到剪贴板

    相信这个功能大家平时上网经常能碰到,以前也没怎么留意怎么实现的,直到项目中需要. 最终效果: 网上一搜一大堆,单纯使用js方法也不是没有,但是由于各浏览器的安全机制不同,不是跨浏览器的.去看了几个常用的网站,都是用的透明flash遮挡"复制到剪贴板"按钮,所以当你点击"复制到剪贴板"的时候,点击的其实是flash,然后把你需要复制的内容传入到了flash,然后在通过flash的复制功能把传入的内容复制到了剪贴板. 加载JQuery库和zclip插件 <scri

  • zeroclipboard复制到剪切板的flash

    下面说实现步骤: 1- 引用文件.下载后会得到两个核心文件ZeroClipboard.js和ZeroClipboard.swf,在项目中引用其中一个. <script type="text/javascript" src="http://www.cnblogs.com/Scripts/ZeroClipboard/ZeroClipboard.js"></script> 2- 加载ZeroClipboard对象,并实现复制功能. 复制代码 代码如

  • Jquery跨浏览器文本复制插件Zero Clipboard的使用方法

    当开发者需要对某局部文本进行点击复制效果时,在IE下实现比较简单.但要想做到跨浏览器比较困难了.Zero Clipboard 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比IE的document.execCommand("Copy") 更加灵活. Zero Clipboard 的实现原理 Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.但最新的 Flash Pl

  • 使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

    Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板 Zero Clipboard的安装方法 首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中. 然后把在你要使用复制功能的页面中引入Zero Cl

  • JavaScript flash复制库类 Zero Clipboard

    本文将介绍一个跨浏览器的库类 Zero Clipboard .它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活. Zero Clipboard 的实现原理 Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.但最新的 Flash Player 10 只允许在 Flash 上进行操作才能启动剪

  • zeroclipboard 单个复制按钮和多个复制按钮的实现方法

    zeroclipboard是一个跨浏览器的库类 它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活. zeroclipboard下载地址:http://www.jb51.net/jiaoben/24961.html zeroclipboard实现多浏览器复制到粘贴板功能(单个复制按钮和多个复制按钮) 为了更好的用户体验,现在很多网站中文本框的内容只需要点击复制按钮这样就能把内容复

  • Zero Clipboard js+swf实现的复制功能使用方法

    开发中经常会用到复制的功能,在 IE 下实现比较简单.但要想做到跨浏览器比较困难了.本文将介绍一个跨浏览器的库类 Zero Clipboard .它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活. Zero Clipboard 的实现原理 Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.

  • ZeroClipboard插件实现多浏览器复制功能(支持firefox、chrome、ie6)

    但是值得注意的是官方介绍中已明确表态说这个插件不支持ie6,下面将提供多实例化Zero Clipboard复制功能的实现及兼容ie6的写法! 先下载ZeroClipboard http://www.jb51.net/jiaoben/24961.html <style type="text/css"> body { font-family:arial,sans-serif; font-size:9pt; } .copyit {text-align:center; border

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

    本文实例讲述了Zero Clipboard实现浏览器复制到剪贴板的方法.分享给大家供大家参考,具体如下: <script type="text/javascript" src="{$site_url}/Public/js/ZeroClipboard.js"></script> <script language="JavaScript"> $(function(){ $(".my_clip_button

  • js实现各种复制到剪贴板的方法(分享)

    一.实现点击按钮,复制文本框中的的内容 <script type="text/javascript"> function copyUrl2() { var Url2=document.getElementById("biao1"); Url2.select(); // 选择对象 document.execCommand("Copy"); // 执行浏览器复制命令 alert("已复制好,可贴粘."); } <

  • js实现点击后将文字或图片复制到剪贴板的方法

    本文实例讲述了js实现点击后将文字或图片复制到剪贴板的方法,代码非常简洁实用,具体功能代码如下所示: 实现复制文字代码: <table width="99%" border="0" cellpadding="0" cellspacing="0" class="firtable"> <tr> <th width="100%" style="color

  • Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)

    复制代码 代码如下: <!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type

  • 用js将内容复制到剪贴板兼容浏览器

    若想通过js将内容复制到剪贴板,本来不难,可是若考虑到浏览器的兼容性问题,就变的有点麻烦,使用jquery-zclip复制是一个不错的选择,借助flash实现浏览器的兼容.原理就不细讲了,下面说下如何实现. 比如我的html代码如下: 复制代码 代码如下: <div class="buttonBox"> <code rel="1"><span id="id_1">要复制的内容1</span><

  • JS复制到剪贴板示例代码

    复制代码 代码如下: /* * 复制到剪贴板 * * */ function copyToClipboard(txt) { if(window.clipboardData) { window.clipboardData.clearData(); window.clipboardData.setData("Text", txt); } else if(navigator.userAgent.indexOf("Opera") != -1) { window.locati

  • 用vbscript实现将脚本的输出复制到剪贴板

    问: 嗨,Scripting Guy!有办法将脚本输出复制到剪贴板吗? -- ZW, Marseilles, France 答: 您好,ZW.如果您不介意用一些疯狂的解决方法,那么实际上将脚本输出复制到剪贴板相当容易.首先,您需要构造一个字符串,其中包含想要的输出.然后,创建 Internet Explorer 的一个实例,然后在其中打开一个空白页.接着,利用 Internet Explorer 对象模型的内置功能,将字符串复制到剪贴板:特别是, 可以使用 clipboardData.SetDa

  • GWT中复制到剪贴板 js+flash实现复制 兼容性比较好

    GWT中复制到剪贴板 js+flash实现复制 兼容性比较好

    但是用flash就可以复制.例子就是VeryCd,看"复制选中的连接"按钮是一个flash.看来flash的安全沙箱没有限制将内容复制到剪贴板 但是也是有限制的: 1 根据ZeroClipborad的人们说,这些flash必须通过网络加载. Zero Clipboard Does Not Work From Local Disk This is a security restriction by Adobe Flash Player. Unfortunately, since we a

  • React复制到剪贴板的示例代码

    React复制到剪贴板的示例代码

    本文介绍了React复制到剪贴板可以使用插件copy-to-clipboard,分享给大家,具体如下: 参考API文档 安装 npm install --save react react-copy-to-clipboard 使用 const App = React.createClass({ getInitialState() { return {value: '', copied: false}; }, onChange({target: {value}}) { this.setState({

随机推荐