caisenbinbeida2009的专栏

旨为IT而来!

js+插件实现代码复制及动态生成二维码扫描、分享到朋友圈QQ空间功能

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" onclick="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" onclick="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="#" onclick="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.页面效果




阅读更多
个人分类: jquery js java
上一篇spring multipart上传附件,下载,预览实现
下一篇重新起航
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭