ZeroClipboard2.0 复制功能
2015-07-25 17:57
295 查看
摘要: 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
2、然后配置swf文件的路径
3、创建客户端
4、使用copy功能
简单使用ok!
下面附上一个完整的例子:
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; 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>
相关文章推荐
- Java 内存的划分
- 特别篇-SetWindowExtEx,SetViewportExtEx解析
- C语言,变量与内存
- 编程语言的语法与语义
- Surface Pro 3/Surface 3升级Win10在某些零售店完成 win10正式版升级截图
- poj 1251 Jungle Roads
- python 简单日志文件
- C# 配置错误定义了重复的“system.web.extensions/scripting/scriptResourceHandler”节
- [Unity3D]Unity3D圣骑士当游戏开发商遭遇Mecanim动画系统
- emacs 新手笔记(三) —— 为 emacs 做一点简单的定制
- nodejs async 库使用
- Android.9图片评论(一个)
- 模拟器报Installation error: INSTALL_FAILED_CONTAINER_ERROR解决方法
- 一周感悟
- 分组背包
- POJ1988基本的并查集
- opencv像素基本操作及图像遍历at
- 浅谈tomcat的配置及数据库连接池的配置
- jquery基础认识
- django 1.8 官方文档翻译: 2-6-4 数据库访问优化