首页 > 代码库 > ZeroClipboard—ZeroClipboard的使用
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="http://www.mamicode.com/js/jquery-1.6.2.js"></script> <script type="text/javascript" src="http://www.mamicode.com/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="http://www.mamicode.com/清空測试区域内容" onClick="$(‘#testarea‘).val(‘‘);"/> </body> </html>说明:上面代码中包括几个插件文件,这些文件在资源中能够找到。
【0分资源下载】
相关站点:http://code.ciaoca.com/javascript/zeroclipboard/
ZeroClipboard—ZeroClipboard的使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。