Zclip复制页面内容到剪贴板兼容各浏览器
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() }, );
}
}); });
</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() }, );
}
}); });
</script> </head>
<body> <table cellspacing="" cellpadding="" rules="all" border="" style="background-color: White; border-color: #CCCCCC; width: 70%; border-collapse: collapse;">
<tr>
<th>编号</th>
<th>姓名</th>
<th>链接</th>
</tr>
<tr>
<td></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></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() }, );
}
}); });
</script> </head>
<body> <table cellspacing="" cellpadding="" rules="all" border="" style="background-color: White; border-color: #CCCCCC; width: 70%; border-collapse: collapse;">
<tr>
<th>编号</th>
<th>姓名</th>
<th>链接</th>
</tr>
<tr>
<td></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></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
Zclip复制页面内容到剪贴板兼容各浏览器的更多相关文章
- Zclip:复制页面内容到剪贴板兼容各浏览器
WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...
- Zclip点击复制内容到剪贴板兼容各浏览器
WEB开发中,要让用户复制页面中的一段代码.URL地址等信息,为了避免用户拖动鼠标再进行右键复制操作而可能出现的差错,我们可以直接在页面中放置一个复制按钮,只需要轻轻一点这个复制按钮,内容将会被复制, ...
- JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
- JS复制内容到剪贴板: 兼容IE、Firefox、Chrome、Safari所有浏览器【转】
正 文: 现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个 ...
- js复制文本内容到剪贴板
记录一下使用clipboardData复制不成功. 1.定义一个按钮执行复制 <div> <button type="button" id="copyR ...
- 使用clipboard.js复制页面内容到剪切板
最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼 ...
- JS复制制定内容到剪贴板怎么做?
可以使用input也可以使用textare文本域来做(而且这个input/textarea不能够被隐藏): <a href="javascript:;" onclick=&q ...
- 禁止页面后退JS(兼容各浏览器)
<script src="${ctxPath}/media/lib/jquery.history.js"></script> <script> ...
- JS实现复制到剪贴板(兼容FF/Chrome/Safari所有浏览器)
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
随机推荐
- hdu2097
#include <stdio.h> int sum1(int n,int sign){ ; while(n){ sum+=n%sign; n/=sign; } return sum; } ...
- Unieap3.5-Grid翻页不提示修改
<toolbar export="{defaultType:'server'}" paging="{onPagingModified:ssSettleCheck.o ...
- 必须会的SQL语句(三)插入
1.规范一些使用插入语句的小规范 1)中文字符串前 最好 加一个N 2)列名用中括号 扩起来 像这样 [列名] 2.常规写法 Insert into tableName ( [col ...
- JavaScript高级 Function类型
· Function类型 (属于引用类型) 1.JS中,有的函数均是对象,这个一个非常有特点的地方.它既然是对象,那么它的构造函数是谁呢?就是Function.(例如:function Pers ...
- pap与chap协议
1.pap:直接在网络上发送密码明文 2.chap: 网络上发送的是密码的密文;server给client发一段随机数(challenge),client利用随机数对密码进行加密,将用户名和加密后的密 ...
- CentOS学习笔记--MySQL安装
MySQL安装 Linux中使用最广泛的数据库就是MySQL,使用在线yum的方式安装的版本落后MySQL网站好几个小版本,本节亲自测试安装新版的MySQL. 测试机器环境: VMware Works ...
- eclipse指定启动的jdk
原文:http://my.oschina.net/noday/blog/203987 到eclipse目录,打开eclipse.ini文件,在指定位置加入你的jdk相关文件(如下面示例配置中-vm配置 ...
- 最简洁粗暴版的虚拟用户配置FTP
最简洁粗暴版的虚拟用户配置FTP yum安装FTP: yum install vsftpd pam* db4* -y 设置为系统服务:chkconfig –level 35 vsftpd on 2.v ...
- 根据Ip获取城市帮助类
思路构建 1.先通过本地的测IP地址库进行匹配 2.如果本地IP地址库存在此IP的城市信息,就直接返回,调用速度也快 3.如果本地没有对应的IP城市信息,必须通过调用网络的IP查询的API了,这里我使 ...
- jQuery编写的一款兼容IE6的图片轮播幻灯片
jQuery编写的一款兼容IE6的图片轮播幻灯片,很不错的一款jquery特效.大家可以下载下来研究研究. 每隔几秒就自动切换一波图片,此效果兼容性还做的不错,适合居多的浏览器. 适用浏览器:IE6. ...