<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Styles/Comments.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script language="javascript" type="text/javascript">
var userName = 'Tester';
var startID = 20;
$(function () {
//Initialize the comment list when page is loading.
initialCommentList();
//bind click event to post button
$('#postBtn').bind('click', function () {
var _comment = $('#commentInput').val();
if (_comment.length > 0) {
var newCommentBlock = buildSingleComment(startID, userName, _comment, '1 min ago', '');
$('.Comment-Container').hide().prepend(newCommentBlock).fadeIn();
$('#commentInput').val('');
startID += 1;
bindClick2Buttons();
} else {
alert("The input comments should not be blank.");
}
});
// bind click event to the buttons in the comment block.
bindClick2Buttons();
});
function initialCommentList() {
var commentList = [{ id: 1, user: "Patrick", comments: "This is a comments from Patrick.", postTime: "1 min ago", reply2: 'Deli' },
{ id: 2, user: "Bob", comments: "This is a comments from Bob.", postTime: "1 hour ago", reply2: '' },
{ id: 3, user: "Cat", comments: "This is a comments from Cat.", postTime: "1 day ago", reply2: 'Robert' },
{ id: 4, user: "Kurt", comments: "This is a comments from Kurt.", postTime: "4 days ago", reply2: '' },
{ id: 5, user: "Robert", comments: "This is a comments from Robert.", postTime: "1 month ago", reply2: ''}];
var commentBuild = '';
for (var i = 0; i < commentList.length; i++) {
commentBuild += buildSingleComment(commentList[i].id, commentList[i].user, commentList[i].comments, commentList[i].postTime, commentList[i].reply2);
}
//fill the parent div automatically
commentBuild += '<div style="clear:both"></div>';
$('#commentContainer').html(commentBuild);
}
function buildSingleComment(id, user, comments, postTime, reply2) {
var newCommentBlock = '<div class="Comment" id = "' + id + '">';
newCommentBlock += ' <div class="Comment-img-container">';
newCommentBlock += ' <img alt="#" src="images/default-avatar.png" class="Comment-img" />';
newCommentBlock += '</div>';
newCommentBlock += '<div class="Comment-Content-Container">';
newCommentBlock += '<div class="Comment-User-Containner">';
newCommentBlock += '<ul>';
newCommentBlock += '<li><h3>' + user + '</h3></li>';
if (reply2 != null && reply2.length > 0) {
newCommentBlock += '<li> replied to </li>';
newCommentBlock += '<li><h3>' + reply2 + '</h3></li>';
}
newCommentBlock += '</ul>';
newCommentBlock += '</div>';
newCommentBlock += '<div class="Comment-Content">' + comments + '</div>';
newCommentBlock += '</div>';
newCommentBlock += '<div class="Comment-Delete-btn">X</div>';
newCommentBlock += '<div class="Comment-Post-time">' + postTime + '</div>';
newCommentBlock += '<div class="Comment-Reply-btn">Reply</div>';
newCommentBlock += '</div>';
return newCommentBlock;
}
function bindClick2Buttons() {
$('.Comment-Delete-btn').bind('click', function () {
if (confirm("Do you want to delete this post?") == true) {
var commentID = $(this).parent().attr("id");
if (commentID.length > 0) {
$('#' + commentID).remove().fadeOut();
} else {
alert("Can not find the ID of parent div.");
}
}
});
}
</script>
<form id="form1" runat="server">
<div class="Comment-Insert-Container">
<h3 >Tester Says:</h3>
<textarea id="commentInput" rows="10" cols="1"></textarea>
<div id="postBtn" class="Comment-Insert-btn">Post</div>
</div>
<div id="commentContainer" class="Comment-Container">
</div>
</form>
</body>
</html>
Demo.CommentPost.zip （7个子文件） 
Demo.CommentPost Styles 
Comments.css 4KB images 
default-avatar.png 3KB green-avatar.png 5KB
CommentPost.html 5KB Scripts jquery-1.4.1.min.js 70KB jquery-1.4.1-vsdoc.js 237KB jquery-1.4.1.js 165KB资源评论
superwang6688232015-05-29很不错的资料，代码很全，很好！
