1.代码复制功能需要插件支持ZeroClipbroad,引入js:jQuery.zclip.min.js;ZeroClipboard.js;ZeroClipboard.swf
2.jsp功能代码:
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <%@ include file="/WEB-INF/jsp/common/meta.jsp"%>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>转发页面</title>
- </head>
- <body>
- <div>
- <table style="width: 100%;border-collapse:separate; border-spacing:10px;">
- <tr>
- <td align="right"><span class="txt-ipt" style="float: none;font-size:18px;margin-right:40px;">复制链接地址</span></td>
- <td align="left" width="300px" id="relayCopyContainer">
- <input type="text" id="relayUrl" value="http://192.168.3.72:8080/WCMP2/static/front/renwuxq.html?taskId=43" style="display:none;" />
- <span style="float:right;color:red;font-size:18px;margin-right:50px;" id="relayCopy">点击复制代码</span>
- </td>
- </tr>
- </table>
- <table style="width: 100%;border-collapse:separate; border-spacing:10px;">
- <tr>
- <td align="right"><span class="txt-ipt" style="float: none;font-size:18px;line-height:40px;margin-right:220px;">扫码转发 </span></td>
- <td align="" rowspan="2">
- <span style="margin-right:40px;" id="qrcode">
- </span>
- </td>
- </tr>
- <tr>
- <td align="right"><span class="txt-ipt" style="float: none;font-size:16px;margin-right:50px;line-height:0px;width:300px;"> 二维码(前端任务详情页面链接)</span></td>
- </tr>
- </table>
- <table style="width: 100%;border-collapse:separate; border-spacing:10px;">
- <tr>
- <td align="right"><span class="txt-ipt" style="float: none;font-size:18px;margin-right:100px;">分享给好友</span></td>
- <td align="left">
- <span style="margin-right:40px;"><a rel="nofollow" οnclick="jiathis_sendto('weixin');return false;"><img src="${ctx}/static/wcmp/img/weixin.png" style="height:40px;width:50px;"></a></span>
- <span style="margin-right:32px;"><a rel="nofollow" οnclick="jiathis_sendto('weixin');return false;"><img src="${ctx}/static/wcmp/img/tengxun.png" style="height:40px;width:50px;"></a></span>
- <span style="margin-right:10px;"><a href="#" οnclick="toQQ();"><img src="${ctx}/static/wcmp/img/kongjian.png" style="height:40px;width:50px;"></a></span>
- </td>
- </tr>
- </table>
- </div>
- <div style="display:none">
- <a href="#none" class="copy-input">点击复制单中的文本</a>
- <input type="text" class="input" value="输入要复制的内容" />
- <a rel="#p1">拷贝1</a>
- <p id="p1">拷贝内容1拷贝内容1拷贝内容1</p>
- </div>
- <script type="text/javascript" src="http://v3.jiathis.com/code/jia.js?uid=1" charset="utf-8"></script>
- <script type="text/javascript" src="${ctx}/static/js/taskrelay/ZeroClipboard.js"></script>
- <script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
- <script "text/javascript">
- var relayInfo = '${relayInfo}';
- var taskId = '${taskId}';
- var shareUrl = "http://192.168.3.72:8080/WCMP2/static/front/renwuxq.html?taskId="+taskId+"&t_="+relayInfo;
- //分享到微信或朋友圈
- var jiathis_config = {
- url: shareUrl,
- title: "自定义网页标题 #微博话题#",
- summary:"分享的文本摘要"
- }
- //扫码转发
- //setTimeout(function(){
- $('#qrcode').qrcode({width: 100,height: 100,text: shareUrl});
- //},1000);
- $(function(){
- //复制功能
- clipboard($("#relayUrl").val(),"relayCopy","复制成功",'relayCopyContainer');//调用方式
- /*
- $(".copy-input").zclip({
- path: "${ctx}/static/js/taskrelay/ZeroClipboard.swf",
- copy: function(){
- return $(this).parent().find(".input").val();
- },
- afterCopy:function(){
- var $copysuc = $("<div class='copy-tips'><div class='copy-tips-wrap'>☺ 复制成功</div></div>");
- $("body").find(".copy-tips").remove().end().append($copysuc);
- $(".copy-tips").fadeOut(3000);
- } */
- //});
- //$('a[rel]').zclip({path:'${ctx}/static/js/taskrelay/ZeroClipboard.swf', copy: function () { return $(this.getAttribute('rel')).html(); } });
- })
- function toQQ(){
- var shareqqzonestring='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=分享QQ空间&url='+encodeURIComponent(shareUrl)+'&pics=111';
- //window.open(shareqqzonestring,'newwindow','height=400,width=400,top=100,left=300');
- window.open(shareqqzonestring);
- }
- //复制方法
- function clipboard(text, button, msg, parent) {
- if (window.clipboardData) { //如果是IE浏览器
- var copyBtn = document.getElementById(button);
- copyBtn.onclick = function() {
- window.clipboardData.setData('text', text);
- alert(msg);
- }
- } else { //非IE浏览器
- var clip = new ZeroClipboard.Client();//初始化一个剪切板对象
- ZeroClipboard.setMoviePath("${ctx}/static/js/taskrelay/ZeroClipboard.swf"); //设置 不然要放在网站根目录下才显示
- clip.setHandCursor(true); //设置手型游标
- clip.addEventListener("mouseUp", function(client) {//绑定mouseUp事件触发复制
- clip.setText(text); //设置待复制的文本内容
- alert(msg);
- });
- clip.addEventListener('complete',function(client,text){
- //alert("复制成功,您可以粘贴发送给QQ上的好友或QQ群了^_^");
- });
- clip.glue(button,parent); //调用ZeroClipboard.js的内置方法处理flash的位置的问题
- }
- return false;
- }
- //以下代码废弃
- function copyUrl(){
- //隐藏文本框内容无法触发
- var Url=document.getElementById("url");
- Url.select(); // 选择对象
- document.execCommand("Copy"); // 执行浏览器复制命令
- alert("已复制好,可贴粘。");
- //只支持ie内核
- /*
- var maintext = "www.baidu.com";
- if (window.clipboardData){
- window.clipboardData.setData("Text", maintext);
- }else if (window.netscape){
- try{
- netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
- }catch(e){
- alert("该浏览器不支持一键复制!n请手工复制文本框链接地址~");
- }
- var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
- if (!clip) return;
- var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
- if (!trans) return;
- trans.addDataFlavor('text/unicode');
- var str = new Object();
- var len = new Object();
- var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
- var copytext=maintext;
- str.data=copytext;
- trans.setTransferData("text/unicode",str,copytext.length*2);
- var clipid=Components.interfaces.nsIClipboard;
- if (!clip) return false;
- clip.setData(trans,null,clipid.kGlobalClipboard);
- }
- alert("以下内容已经复制到剪贴板nn" + maintext); */
- }
- </script>
- </body>
- </html>
3.页面效果