在好例子网,分享、交流、成长!
您当前所在位置:首页js 开发实例JavaScript基础 → ZeroClipboard 剪贴板示例代码

ZeroClipboard 剪贴板示例代码

JavaScript基础

下载此实例
  • 开发语言:js
  • 实例大小:0.01M
  • 下载次数:9
  • 浏览次数:193
  • 发布时间:2016-06-20
  • 实例类别:JavaScript基础
  • 发 布 人:2907414746
  • 文件格式:.zip
  • 所需积分:2
 相关标签: ZeroClipboard

实例介绍

摘要
https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md

https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/instructions.md

https://github.com/zeroclipboard/zeroclipboard/blob/master/docs/api/ZeroClipboard.Core.md 

The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface. The "Zero" signifies that the library is invisible and the user interface is left entirely up to you. 

使用:

    1、引入js文件,记得先引入jquery

<script type="text/javascript" src="ZeroClipboard.js"></script>

    2、然后配置swf文件的路径

ZeroClipboard.config( { swfPath"http://YOURSERVER/path/ZeroClipboard.swf" } );

    3、创建客户端

var client = new ZeroClipboard($(".copy-button"));

    4、使用copy功能

client.on( "copy", function (event) {
  var clipboard = event.clipboardData;
  clipboard.setData( "text/plain""Copy me!" );
  alert('copy over!);
  // clipboard.setData( "text/html", "<b>Copy me!</b>" );   // clipboard.setData( "application/rtf", "{\\rtf1\\ansi\n{\\b Copy me!}}" ); });

简单使用ok!

下面附上一个完整的例子:

<html>   <head>     <style type="text/css">       .clip_button {
        text-align: center;
        border1px solid black;
        background-color#ccc;
        margin10px;
        padding10px;
      }
      .clip_button.zeroclipboard-is-hover { background-color#eee; }
      .clip_button.zeroclipboard-is-active { background-color#aaa; }
    </style>   </head>   <body>     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>     <script type="text/javascript" src="ZeroClipboard.js"></script>     <div class="clip_button">Copy To Clipboard</div>     <div class="clip_button">Copy This Too!</div>     <script type="text/javascript">       var client = new ZeroClipboard( $('.clip_button') );

      client.on( 'ready'function(event{
        // console.log( 'movie is loaded' );         client.on( 'copy'function(event{
          event.clipboardData.setData('text/plain', event.target.innerHTML);
        } );

        client.on( 'aftercopy'function(event{
          console.log('Copied text to clipboard: '   event.data['text/plain']);
        } );
      } );

      client.on( 'error'function(event{
        // console.log( 'ZeroClipboard error of type "'   event.name   '": '   event.message );         ZeroClipboard.destroy();
      } );
    </script>   </body></html>

标签: ZeroClipboard

实例下载地址

ZeroClipboard 剪贴板示例代码

不能下载?内容有错? 点击这里报错 + 投诉 + 提问

好例子网口号:伸出你的我的手 — 分享

网友评论

发表评论

(您的评论需要经过审核才能显示)

查看所有0条评论>>

小贴士

感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。

  • 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
  • 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
  • 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
  • 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明

;
报警