jQuery实现用户评论留言代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery实现用户评论留言代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实现用户评论留言代码</title>
<link rel="stylesheet" href="css/semantic.css" type="text/css" />
<link rel="stylesheet" href="css/zyComment.css" type="text/css" />
<style type="text/css" media="print, screen">  
label {
	font-weight: bold;
}

a {
	font-family: Microsoft YaHei;
}

#articleComment {
	width: 600px;
	margin:0 auto;
}
</style>
</head>
<body>
	<div id="articleComment"></div>
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="js/zyComment.js"></script>
	<script type="text/javascript">
		var agoComment = [
		                  {"id":1,"userName":"游客1","time":"2014-04-04","sortID":0,"content":"第一条评论"},
		                  {"id":2,"userName":"游客2","time":"2014-04-04","sortID":0,"content":"第二条评论"},
		                  {"id":3,"userName":"站长","time":"2014-04-04","sortID":1,"content":"第一条评论的回复"},
		                  {"id":4,"userName":"站长","time":"2014-04-04","sortID":2,"content":"第二条评论的回复"},
		                  {"id":5,"userName":"游客3","time":"2014-04-04","sortID":0,"content":"第三条评论"},
		                  {"id":6,"userName":"游客2","time":"2014-04-04","sortID":4,"content":"第二条评论的回复的回复"},
		                  ];
		$("#articleComment").zyComment({
			"width":"355",
			"height":"33",
			"agoComment":agoComment,
			"callback":function(comment){
				console.info("填写内容返回值：");
				console.info(comment);

				// 添加新的评论
				$("#articleComment").zyComment("setCommentAfter",{"id":123, "name":"name", "content":"content", "time":"2014-04-14"});

			}
		});
	</script>
</body>
</html>

JS代码(zyComment.js):

/* * zyComment.js 鎼滅储鎻掍欢 http://www.doit666.com * by zhangyan 2015-03-06 QQ:623585268*/
(function($,undefined){
	$.fn.zyComment = function(options,param){
	var otherArgs = Array.prototype.slice.call(arguments,1);
	if (typeof options == 'string'){
	var fn = this[0][options];
	if($.isFunction(fn)){
	return fn.apply(this,otherArgs);
}
else{
	throw ("zyComment - No such method:" + options);
}
}
return this.each(function(){
	var para ={
}
;
	// 淇濈暀鍙傛暟var self = this;
	// 淇濆瓨缁勪欢瀵硅薄var fCode = 0;
	var defaults ={
	"width":"355","height":"33","agoComment":[],// 浠ュ線璇勮鍐呭"callback":function(comment){
	console.info("杩斿洖璇勮鏁版嵁");
	console.info(comment);
}
}
;
	para = $.extend(defaults,options);
	this.init = function(){
	this.createAgoCommentHtml();
	// 鍒涘缓浠ュ線璇勮鐨刪tml}
;
	/** * 鍔熻兘锛氬垱寤轰互寰€璇勮鐨刪tml * 鍙傛暟:鏃? * 杩斿洖:鏃? */
this.createAgoCommentHtml = function(){
	var html = '';
	html += '<div id="commentItems" class="ui threaded comments" style="margin-bottom:20px;
	">';
	html += '<div class="text" style="font-size:2rem;
	padding-bottom:10px;
	border-bottom:1px solid #DFDFDF;
	"> 澶у鐨勮剼鍗?</div>';
	html += '</div>';
	$(self).append(html);
	$.each(para.agoComment,function(k,v){
	var topStyle = "";
	if(k>0){
	topStyle = "topStyle";
}
var item = '';
	item += '<div id="comment'+v.id+'" class="comment">';
	item += '<a class="avatar">';
	item += '<img src="images/foot.png">';
	item += '</a>';
	item += '<div class="content '+topStyle+'">';
	item += '<a class="author"> '+v.userName+' </a>';
	item += '<div class="metadata">';
	item += '<span class="date"> '+v.time+' </span>';
	item += '</div>';
	item += '<div class="text"> '+v.content+' </div>';
	item += '<div class="actions">';
	item += '<a class="reply" href="javascript:void(0)" selfID="'+v.id+'" >鍥炲</a>';
	item += '</div>';
	item += '</div>';
	item += '</div>';
	// 鍒ゆ柇姝ゆ潯璇勮鏄笉鏄瓙绾ц瘎璁?if(v.sortID==0){
	// 涓嶆槸$("#commentItems").append(item);
}
else{
	// 鍚?// 鍒ゆ柇鐖剁骇璇勮涓嬫槸涓嶆槸宸茬粡鏈変簡瀛愮骇璇勮if($("#comment"+v.sortID).find(".comments").length==0){
	// 娌℃湁var comments = '';
	comments += '<div id="comments'+v.sortID+'" class="comments">';
	comments +=item;
	comments += '</div>';
	$("#comment"+v.sortID).append(comments);
}
else{
	// 鏈?$("#comments"+v.sortID).append(item);
}
}
}
);
	this.createFormCommentHtml();
	// 鍒涘缓鍙戣〃璇勮鐨刪tml}
;
	/** * 鍔熻兘锛氬垱寤鸿瘎璁篺orm鐨刪tml * 鍙傛暟:鏃? * 杩斿洖:鏃? */
this.createFormCommentHtml = function(){
	// 鍏堟坊鍔犵埗瀹瑰櫒$(self).append('<div id="commentFrom"></div>');
	// 缁勭粐鍙戣〃璇勮鐨刦orm html浠ｇ爜var boxHtml = '';
	boxHtml += '<form id="replyBoxAri" class="ui reply form">';
	boxHtml += '<div class="ui large form ">';
	boxHtml += '<div class="two fields">';
	boxHtml += '<div class="field" >';
	boxHtml += '<input type="text" id="userName" />';
	boxHtml += '<label class="userNameLabel" for="userName">Your Name</label>';
	boxHtml += '</div>';
	boxHtml += '<div class="field" >';
	boxHtml += '<input type="text" id="userEmail" />';
	boxHtml += '<label class="userEmailLabel" for="userName">E-mail</label>';
	boxHtml += '</div>';
	boxHtml += '</div>';
	boxHtml += '<div class="contentField field" >';
	boxHtml += '<textarea id="commentContent"></textarea>';
	boxHtml += '<label class="commentContentLabel" for="commentContent">Content</label>';
	boxHtml += '</div>';
	boxHtml += '<div id="submitComment" class="ui button teal submit labeled icon">';
	boxHtml += '<i class="icon edit"></i> 鎻愪氦璇勮';
	boxHtml += '</div>';
	boxHtml += '</div>';
	boxHtml += '</form>';
	$("#commentFrom").append(boxHtml);
	// 鍒濆鍖杊tml涔嬪悗缁戝畾鐐瑰嚮浜嬩欢 this.addEvent();
}
;
	/** * 鍔熻兘锛氱粦瀹氫簨浠? * 鍙傛暟:鏃? * 杩斿洖:鏃? */
this.addEvent = function(){
	// 缁戝畾item涓婄殑鍥炲浜嬩欢this.replyClickEvent();
	// 缁戝畾item涓婄殑鍙栨秷鍥炲浜嬩欢this.cancelReplyClickEvent();
	// 缁戝畾鍥炲妗嗙殑浜嬩欢this.addFormEvent();
}
;
	/** * 鍔熻兘:缁戝畾item涓婄殑鍥炲浜嬩欢 * 鍙傛暟:鏃? * 杩斿洖:鏃? */
this.replyClickEvent = function(){
	// 缁戝畾鍥炲鎸夐挳鐐瑰嚮浜嬩欢$(self).find(".actions .reply").live("click",function(){
	// 璁剧疆褰撳墠鍥炲鐨勮瘎璁虹殑idfCode = $(this).attr("selfid");
	// 1.绉婚櫎涔嬪墠鐨勫彇娑堝洖澶嶆寜閽?$(self).find(".cancel").remove();
	// 2.绉婚櫎鎵€鏈夊洖澶嶆self.removeAllCommentFrom();
	// 3.娣诲姞鍙栨秷鍥炲鎸夐挳$(this).parent(".actions").append('<a class="cancel" href="javascript:void(0)">鍙栨秷鍥炲</a>');
	// 4.娣诲姞鍥炲涓嬬殑鍥炲妗?self.addReplyCommentFrom($(this).attr("selfID"));
	// 缁戝畾鎻愪氦浜嬩欢$("#publicComment").die("click");
	$("#publicComment").live("click",function(){
	var result ={
	"name":$("#userName").val(),"email":$("#userEmail").val(),"content":$("#commentContent").val()}
;
	para.callback(result);
}
);
}
);
}
;
	/** * 鍔熻兘:缁戝畾item涓婄殑鍙栨秷鍥炲浜嬩欢 * 鍙傛暟:鏃? * 杩斿洖:鏃? */
this.cancelReplyClickEvent = function(){
	$(self).find(".actions .cancel").die("click");
	$(self).find(".actions .cancel").live("click",function(){
	// 1.绉婚櫎涔嬪墠鐨勫彇娑堝洖澶嶆寜閽?$(self).find(".cancel").remove();
	// 2.绉婚櫎鎵€鏈夊洖澶嶆self.removeAllCommentFrom();
	// 3.娣诲姞鏍逛笅鐨勫洖澶嶆self.addRootCommentFrom();
}
);
}
;
	/** * 鍔熻兘:缁戝畾鍥炲妗嗙殑浜嬩欢 * 鍙傛暟:鏃? * 杩斿洖:鏃? */
this.addFormEvent = function(){
	// 鍏堣В闄ょ粦瀹?$("textarea,input").die("focus");
	$("textarea,input").die("blur");
	// 缁戝畾鍥炲妗嗘晥鏋?$("textarea,input").live("focus",function(){
	// 绉婚櫎 澶卞幓鐒︾偣class鏍峰紡锛屾坊鍔犺幏鍙栫劍鐐规牱寮?$(this).next("label").removeClass("blur-foucs").addClass("foucs");
}
).live("blur",function(){
	// 濡傛灉鏂囨湰妗嗘病鏈夊€?if($(this).val()==''){
	// 绉婚櫎鑾峰彇鐒︾偣鏍峰紡娣诲姞鍘熺敓鏍峰紡if($(this).attr("id")=="commentContent"){
	$(this).next("label").removeClass("foucs").addClass("areadefault");
}
else{
	$(this).next("label").removeClass("foucs").addClass("inputdefault");
}
}
else{
	// 鏈夊€?娣诲姞澶卞幓鐒︾偣class鏍峰紡$(this).next("label").addClass("blur-foucs");
}
}
);
	// 缁戝畾鎻愪氦浜嬩欢$("#submitComment").die("click");
	$("#submitComment").live("click",function(){
	var result ={
	"name":$("#userName").val(),"email":$("#userEmail").val(),"content":$("#commentContent").val()}
;
	para.callback(result);
}
);
}
;
	// 绉婚櫎鎵€鏈夊洖澶嶆this.removeAllCommentFrom = function(){
	// 绉婚櫎璇勮涓嬬殑鍥炲妗?if($(self).find("#replyBox")[0]){
	// 鍒犻櫎璇勮鍥炲妗?$(self).find("#replyBox").remove();
}
// 鍒犻櫎鏂囩珷鍥炲妗?if($(self).find("#replyBoxAri")[0]){
	$(self).find("#replyBoxAri").remove();
}
}
;
	// 娣诲姞鍥炲涓嬬殑鍥炲妗?this.addReplyCommentFrom = function(id){
	var boxHtml = '';
	boxHtml += '<form id="replyBox" class="ui reply form">';
	boxHtml += '<div class="ui form ">';
	//boxHtml += '<div class="two fields">'boxHtml += '<div class="field" >';
	boxHtml += '<input type="text" id="userName" />';
	boxHtml += '<label class="userNameLabel" for="userName">Your Name</label>';
	boxHtml += '</div>';
	boxHtml += '<div class="field" >';
	boxHtml += '<input type="text" id="userEmail" />';
	boxHtml += '<label class="userEmailLabel" for="userName">E-mail</label>';
	boxHtml += '</div>';
	//boxHtml += '</div>';
	boxHtml += '<div class="contentField field" >';
	boxHtml += '<textarea id="commentContent"></textarea>';
	boxHtml += '<label class="commentContentLabel" for="commentContent">Content</label>';
	boxHtml += '</div>';
	boxHtml += '<div id="publicComment" class="ui button teal submit labeled icon">';
	boxHtml += '<i class="icon edit"></i> 鎻愪氦璇勮';
	boxHtml += '</div>';
	boxHtml += '</div>';
	boxHtml += '</form>';
	$(self).find("#comment"+id).find(">.content").after(boxHtml);
}
;
	// 娣诲姞鏍逛笅鐨勫洖澶嶆this.addRootCommentFrom = function(){
	var boxHtml = '';
	boxHtml += '<form id="replyBoxAri" class="ui reply form">';
	boxHtml += '<div class="ui large form ">';
	boxHtml += '<div class="two fields">';
	boxHtml += '<div class="field" >';
	boxHtml += '<input type="text" id="userName" />';
	boxHtml += '<label class="userNameLabel" for="userName">Your Name</label>';
	boxHtml += '</div>';
	boxHtml += '<div class="field" >';
	boxHtml += '<input type="text" id="userEmail" />';
	boxHtml += '<label class="userEmailLabel" for="userName">E-mail</label>';
	boxHtml += '</div>';
	boxHtml += '</div>';
	boxHtml += '<div class="contentField field" >';
	boxHtml += '<textarea id="commentContent"></textarea>';
	boxHtml += '<label class="commentContentLabel" for="commentContent">Content</label>';
	boxHtml += '</div>';
	boxHtml += '<div id="submitComment" class="ui button teal submit labeled icon">';
	boxHtml += '<i class="icon edit"></i> 鎻愪氦璇勮';
	boxHtml += '</div>';
	boxHtml += '</div>';
	boxHtml += '</form>';
	$(self).find("#commentFrom").append(boxHtml);
}
;
	// 寰楀埌鍥炲鐨勮瘎璁虹殑idthis.getCommentFId = function(){
	return parseInt(fCode);
}
;
	// 璁剧疆璇勮鎴愬姛涔嬪悗鐨勫唴瀹?this.setCommentAfter = function(param){
	// 1.绉婚櫎涔嬪墠鐨勫彇娑堝洖澶嶆寜閽?$(self).find(".cancel").remove();
	// 2.娣诲姞鏂拌瘎璁虹殑鍐呭self.addNewComment(param);
	// 3.璁╄瘎璁烘澶勪簬瀵规枃绔犺瘎璁虹殑鐘舵€?self.removeAllCommentFrom();
	// 4.娣诲姞鏍逛笅鐨勫洖澶嶆self.addRootCommentFrom();
}
;
	// 娣诲姞鏂拌瘎璁虹殑鍐呭this.addNewComment = function(param){
	var topStyle = "";
	if(parseInt(fCode)!=0){
	topStyle = "topStyle";
}
var item = '';
	item += '<div id="comment'+param.id+'" class="comment">';
	item += '<a class="avatar">';
	item += '<img src="images/foot.png">';
	item += '</a>';
	item += '<div class="content '+topStyle+'">';
	item += '<a class="author"> '+param.name+' </a>';
	item += '<div class="metadata">';
	item += '<span class="date"> '+param.time+' </span>';
	item += '</div>';
	item += '<div class="text"> '+param.content+' </div>';
	item += '<div class="actions">';
	item += '<a class="reply" href="javascript:void(0)" selfID="'+param.id+'" >鍥炲</a>';
	item += '</div>';
	item += '</div>';
	item += '</div>';
	if(parseInt(fCode)==0){
	// 濡傛灉瀵规牴娣诲姞$("#commentItems").append(item);
}
else{
	// 鍒ゆ柇鐖剁骇璇勮涓嬫槸涓嶆槸宸茬粡鏈変簡瀛愮骇璇勮if($("#comment"+fCode).find(".comments").length==0){
	// 娌℃湁var comments = '';
	comments += '<div id="comments'+fCode+'" class="comments">';
	comments +=item;
	comments += '</div>';
	$("#comment"+fCode).append(comments);
}
else{
	// 鏈?$("#comments"+fCode).append(item);
}
}
}
;
	// 鍒濆鍖栦笂浼犳帶鍒跺眰鎻掍欢this.init();
}
);
}
;
}
)(jQuery);

CSS代码(zyComment.css):

@CHARSET "UTF-8";*,*:before,*:after{box-sizing:border-box;}
.comments a{color:#000000;outline:0 none;text-decoration:none;transition:all 0.5s ease 0s;}
.comments a:hover{text-decoration:none;}
.date{font-size:13px;}
.text{font-family:Microsoft YaHei;font-size:14px;}
#replyBoxAri{max-width:50em;}
.ui.threaded.comments .comment .comments{box-shadow:0px 0 0 rgba(0,0,0,0.05);}
#collect{background-image:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0));box-shadow:0 0 0 0px rgba(0,0,0,0) inset;}
#collect:hover{background-color:#DB3E3A !important;}
form{backface-visibility:hidden;}
.form .input{position:relative;float:left;margin:10px;}
.form input,.form textarea{border:1px solid #eee;padding:1.2em .5em;outline:none;}
textarea + label,input + label,.inputdefault{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#aaa;transition:all .2s ease;}
.field{position:relative;float:left;margin:10px;}
.foucs{color:#52A5FB!important;font-size:0.75em!important;top:1%!important;transform:none;}
.blur-foucs{color:#aaa;}
.not-empty + label{color:#aaa;}
.ui.form .field > label{color:#aaa;display:block;font-size:1.2em;margin:0 0 0.3em;}
.ui.form .field > input,.ui.form .field > textarea{padding:1em 0.5em!important;border-radius:0em!important;font-size:15px;padding-bottom:5px!important;}
.userEmailLabel{margin-left:5px!important;}
.contentField{float:none!important;}
.ui.form input[type="text"]:focus,.ui.form input[type="email"]:focus,.ui.form input[type="date"]:focus,.ui.form input[type="password"]:focus,.ui.form input[type="number"]:focus,.ui.form input[type="tel"]:focus,.ui.form textarea:focus{color:rgba(0,0,0,0.85);border-color:rgba(0,0,0,0.2);border-bottom-left-radius:0;border-top-left-radius:0;-webkit-appearance:none;-webkit-box-shadow:0em 0em 0em 0em rgba(0,0,0,0) inset;box-shadow:0em 0em 0em 0em rgba(0,0,0,0) inset;}
#submitComment{font-size:16px;background-image:none;background-color:#1BA7D5;}
#submitComment:hover{background-color:#008CBA;}
#submitComment:active{background-color:#006D9B;}
#post-header h3{line-height:1.5;margin-top:2px!important;}
textarea + label,.areadefault{top:20px;}
@media screen and (-webkit-min-device-pixel-ratio:0){input + label,.inputdefault{top:50%;}
textarea + label,.areadefault{top:20px;}
.foucs{color:#52A5FB!important;font-size:0.75em!important;top:1%!important;transform:none;}
}
.ui.comments .comment .reply.form{margin-left:4.5em!important;}
.author{font-size:15px;}
#publicComment{background-color:#1BA7D5;background-image:none !important;font-size:1.2em !important;}
.topStyle{border-top:1px solid #dfdfdf;}

附件:下载该文件资源,减少时间成本(增值服务)