ZeroClipboard—ZeroClipboard的使用
2017-05-27 21:08 tlnshuju 阅读(308) 评论(0) 编辑 收藏 举报1、ZeroClipboard的作用：
借助Zero Clipboard能够简单高速地将内容拷贝到剪贴板，相似点击某些网页中“复制”按钮后复制对应区域的内容。
2、ZeroClipboard的用法：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ZeroClipboard演示</title>
<script type="text/javascript" src="<%=basePath%>js/jquery-1.6.2.js"></script>
<script type="text/javascript" src="<%=basePath%>js/ZeroClipboard/ZeroClipboard.js"></script>
<style type="text/css">
body { font-family:arial,sans-serif; font-size:9pt; }
#clip_button { width:150px; text-align:center; border:1px solid black; background-color:#ccc; margin:10px 0px; padding:5px 0px; cursor:default; font-size:9pt; }
#clip_button.hover { background-color:#eee; }
#clip_button.active { background-color:#aaa; }
</style>
<script type="text/javascript">
var zeroClipboard = null;
$(function() {
ZeroClipboard.setMoviePath("<%=basePath%>js/ZeroClipboard/ZeroClipboard.swf");
zeroClipboard = new ZeroClipboard.Client();
zeroClipboard.setHandCursor( true );
zeroClipboard.addEventListener("load", function (client) {
console.log("Flash文件载入完成。");
});
zeroClipboard.addEventListener("mouseOver", function (client) {// update the text on mouse over
zeroClipboard.setText( $("#testText").val() );
});
zeroClipboard.addEventListener("complete", function (client, text) {
alert("数据已经拷贝到您的剪贴板: " + text );
});
zeroClipboard.glue( "clip_button", "clip_container" );
});
</script>
</head>
<body>
<center style="margin-top: 5%;"><font style="font-size: 27pt;font-weight: bold;color: red;">ZeroClipboard演示</font></center>
<textarea id="testText" cols="50" rows="5" onChange="zeroClipboard.setText(this.value)">Copy me!</textarea>
<div id="clip_container" style="position:relative">
<div id="clip_button">拷贝到剪贴板</div>
</div>
点击上面按钮后将鼠标定位到该区域。然后Ctrl+V就可以看到效果:<br/>
<textarea id="testarea" cols=50 rows=10></textarea><br/>
<input type="button" value="清空測试区域内容" onClick="$('#testarea').val('');"/>
</body>
</html> 说明：上面代码中包括几个插件文件，这些文件在资源中能够找到。 【0分资源下载】
