<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
li {
list-style-type: none;
}
</style>
<link href="Script/bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="Script/jquery-1.10.2.min.js"></script>
<script src="Script/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="margin-top:50px">
<form>
<textarea class="form-control" rows="3" id="pl"></textarea>
</form>
<div class="col-md-offset-10" style="margin-top:20px">
<div class="btn btn-default">
<span class="glyphicon glyphicon-remove"></span>取消
</div>
<div class="btn btn-default" id="sub">
<span class="glyphicon glyphicon-ok"></span>提交
</div>
</div>
</div>
<div class="col-md-offset-1" style="margin-top:50px">
<ul id="pls">
</ul>
</div>
<script type="text/javascript">
$(function () {
$("#sub").unbind("click").bind("click", function () {
if ($("#pl").val() == "" || $("#pl").val() == null)
{
return;
}
htmlText = "<li>"
+ $("#pl").val()
+ "<div class=‘col-md-offset-8‘>"
+ "评论人："
+ "Admin"
+ " "
+ getDate()
+ "</div>"
+ "<div class=‘ hidden‘>"
+ "<form> "
+ " <textarea class=‘form-control‘ rows=‘3‘ id=‘pl‘></textarea> "
+ "</form> "
+ "<div class=‘col-md-offset-10‘ style=‘margin-top:20px‘> "
+ "<div class=‘btn btn-default‘> "
+ " <span class=‘glyphicon glyphicon-remove‘</span>取消 "
+ "</div> "
+ " <div class=‘btn btn-default‘ onclick=‘replayOk(this)‘> "
+ "<span class=‘glyphicon glyphicon-ok‘></span>提交 "
+ " </div> "
+ " </div> "
+ "</div>"
+ "<div class=‘col-md-offset-10‘>"
+ "<a href=‘#‘ onclick=‘replay(this)‘>回复</a>"
+ "</div>"
+ "<hr/></li>"
$("#pls").append(htmlText);
$("li").mouseenter(function () {
$(this).css("background-color", "#EEEEEE");
});
$("li").mouseleave(function () {
$(this).css("background-color", "#fff");
});
});
});
//点击回复按钮
function replay(t)
{
self = $(t);
self.parent().prev().removeClass("hidden");
}
//回复点击确定按钮
function replayOk(t)
{
self = $(t);
self.parent().parent().addClass("hidden");
htmlText = "<li>"
+ $("#pl").val()
+ "<div class=‘col-md-offset-8‘>"
+ "评论人："
+ "Admin"
+ " "
+ getDate()
+ "</div>"
+ "<div class=‘ hidden‘>"
+ "<form> "
+ " <textarea class=‘form-control‘ rows=‘3‘ id=‘pl‘></textarea> "
+ "</form> "
+ "<div class=‘col-md-offset-10‘ style=‘margin-top:20px‘> "
+ "<div class=‘btn btn-default‘> "
+ " <span class=‘glyphicon glyphicon-remove‘</span>取消 "
+ "</div> "
+ " <div class=‘btn btn-default‘ onclick=‘replayOk(this)‘> "
+ "<span class=‘glyphicon glyphicon-ok‘></span>提交 "
+ " </div> "
+ " </div> "
+ "</div>"
+ "<div class=‘col-md-offset-10‘>"
+ "<a href=‘#‘ onclick=‘replay(this)‘>回复</a>"
+ "</div>"
+ "<hr/></li>"
self.parent().parent().parent().append("<ul>" + htmlText + "</ul>");
$("li").mouseenter(function () {
$(self).css("background-color", "#EEEEEE");
});
$("li").mouseleave(function () {
$(self).css("background-color", "#fff");
});
}
//获取当前时间
function getDate()
{
var d = new Date()
var vYear = d.getFullYear()
var vMon = d.getMonth() + 1
var vDay = d.getDate()
var h = d.getHours();
var m = d.getMinutes();
var se = d.getSeconds();
return s = vYear + "-" + (vMon < 10 ? "0" + vMon : vMon) + "-" + (vDay < 10 ? "0" + vDay : vDay) + " " + (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m) + ":" + (se < 10 ? "0" + se : se);
}
</script>
</body>
</html>
