页面复制插件ZeroClipboard.js
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面复制插件ZeroClipboard.js相关的知识，希望对你有一定的参考价值。
使用：
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
以上是关于页面复制插件ZeroClipboard.js的主要内容，如果未能解决你的问题，请参考以下文章