Zclip：复制页面内容到剪贴板兼容各浏览器
WEB开发中，要让用户复制页面中的一段代码、URL地址等信息，为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错，我们可以直接在页面中放置一个复制按钮，点击这个复制按钮，内容将会被复制，然后用户可以粘贴到想粘贴的地方，下面介绍一种使用Zclip实现的兼容主流浏览器的方式。
利用插件来写的话就比较简单，源码下载
<html>
<head>
<title>Index</title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.zclip.js"></script>
<script type="text/javascript">
$(function () {
$(‘.copy‘).zclip({
path: ‘ZeroClipboard.swf‘,
copy: function () {//复制内容
return $(this).prev().prev().val();
},
afterCopy: function () {//复制成功
var msg= $(this).next().show();
setTimeout(function () { msg.hide() }, 2000);
}
});
});
</script>
</head>
<body>
<div>
<textarea>请输入内容</textarea><br/>
<a href="#" class="copy">复制内容</a>
<span style="color:red; display:none;">复制成功</span>
</div>
</body>
</html>
参数说明
path：swf调用路径，必填项，默认为：ZeroClipboard.swf
copy：复制的内容，必填项，任意字符串，也可以是回调函数返回的内容
beforeCopy：复制内容前回调函数，可选
afterCopy：复制内容后回调函数，可选
更多属性参考：http://steamdev.com/zclip/
Table中循环绑定复制链接
工作中碰到一个问题，在这里把问题和解决方案列出来，仅供参考，要求实现下面的形式：
下面的写法有并不能直接实现效果：
<!DOCTYPE html>
<html>
<head>
<title>table</title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.zclip.js"></script>
<script type="text/javascript">
$(function () {
$(‘.copy‘).zclip({
path: ‘ZeroClipboard.swf‘,
copy: function () {//复制内容
return $(this).prev().prev().html();
},
afterCopy: function () {//复制成功
var msg= $(this).next().show();
setTimeout(function () { msg.hide() }, 2000);
}
});
});
</script>
</head>
<body>
<table cellspacing="0" cellpadding="3" rules="all" border="1" style="background-color: White; border-color: #CCCCCC; width: 70%; border-collapse: collapse;">
<tr>
<th>编号</th>
<th>姓名</th>
<th>链接</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>
<span>http://www.baidu.com</span><br/>
<a href="#" class="copy">复制链接</a>
<span style="color:red; display:none;">复制成功</span>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>
<span>http://www.taobao.com</span><br/>
<a href="#" class="copy">复制链接</a>
<span style="color:red; display:none;">复制成功</span>
</td>
</tr>
</table>
</body>
</html>
加入定位（position: relative;）之后就行了，我也没有搞明白是为什么，在此记录一下，如果有高手路过，请指点一下。源码下载
<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style type="text/css">
.pos{
position: relative;
}
</style>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.zclip.js"></script>
<script type="text/javascript">
$(function () {
$(‘.copy‘).zclip({
path: ‘ZeroClipboard.swf‘,
copy: function () {//复制内容
return $(this).prev().prev().html();
},
afterCopy: function () {//复制成功
var msg= $(this).next().show();
setTimeout(function () { msg.hide() }, 2000);
}
});
});
</script>
</head>
<body>
<table cellspacing="0" cellpadding="3" rules="all" border="1" style="background-color: White; border-color: #CCCCCC; width: 70%; border-collapse: collapse;">
<tr>
<th>编号</th>
<th>姓名</th>
<th>链接</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td class="pos">
<span>http://www.baidu.com</span><br/>
<a href="#" class="copy">复制链接</a>
<span style="color:red; display:none;">复制成功</span>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td class="pos">
<span>http://www.taobao.com</span><br/>
<a href="#" class="copy">复制链接</a>
<span style="color:red; display:none;">复制成功</span>
</td>
</tr>
</table>
</body>
</html>
说明
1、代码下载后需要部署到服务器上运行才行，比如在本地用IIS建一个网站或者虚拟目录
2、参考文章： http://www.helloweba.com/view-blog-222.html
http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html
时间： 2024-11-12 14:41:49