使用：
1、引入js文件，记得先引入jquery
|
1 |
<script type="text/javascript" src="ZeroClipboard.js"></script> |
2、然后配置swf文件的路径
|
1 |
ZeroClipboard.config( { swfPath: "http://YOURSERVER/path/ZeroClipboard.swf" } ); |
3、创建客户端
|
1 |
var client = new ZeroClipboard($(".copy-button")); |
4、使用copy功能
|
1 2 3 4 5 6 7 |
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！
下面附上一个完整的例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<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> |
