码迷,mamicode.com
首页 > 其他好文 > 详细

ZeroClipboard的使用

时间:2014-07-09 10:38:40      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:zeroclipboard的使用   zeroclipboard   剪贴板   

        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分资源下载

         相关网站:http://code.ciaoca.com/javascript/zeroclipboard/

ZeroClipboard的使用,布布扣,bubuko.com

ZeroClipboard的使用

标签:zeroclipboard的使用   zeroclipboard   剪贴板   

原文地址:http://blog.csdn.net/gaohuanjie/article/details/37564971

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!