页面复制插件ZeroClipboard.js

最新推荐文章于 2024-08-13 08:19:03 发布

weixin_30278311

最新推荐文章于 2024-08-13 08:19:03 发布

阅读量159

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/days-/p/5564640.html

版权

使用：

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;         border: 1px solid black;         background-color: #ccc;         margin: 10px;         padding: 10px;       }       .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>

但是遇到问题，就是需要点击两次才能复制。。

然后使用 http://www.w3dev.cn/download/20130409/jquery.zclip.js.aspx

http://www.jb51.net/article/74251.htm