<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="../bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" />
<link href="../kindeditor-4.1.10/themes/default/default.css" rel="stylesheet" />
<script src="../bootstrap-3.3.5-dist/js/jquery-1.10.2.min.js"></script>
<script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="../kindeditor-4.1.10/kindeditor-min.js"></script>
<script src="../kindeditor-4.1.10/lang/zh_CN.js"></script>
<style type="text/css">
.comment {
position: relative;
/*width: 330px;*/
padding: 10px;
}
.comment .ke-toolbar {
/*position: absolute;*/
/*bottom: 6px;*/
}
.btn_pl {
display: block;
float: right;
}
</style>
</head>
<body>
<div class="container" style="margin-top:50px">
<form class="form-horizontal">
<!--<textarea class="form-control" rows="3" id="pl"></textarea>-->
<div class="row">
<div class="comment col-md-10 col-md-offset-1">
<textarea class="form-control " name="content" id="pl"> 回复评论</textarea>
<input type="button" value="评论" name="btn_pl" class="btn_pl form" style="margin-top:7px" />
</div>
</div>
<div class="row col-md-11" >
<div class="col-md-offset-1" style="margin-top:20px" id="pls">
<!--<ul id="pls"></ul>-->
</div>
</div>
</form>
</div>
<script type="text/javascript">
var datas = [
{
id: ‘1‘,
pid: ‘‘,
cont: ‘aaa‘,
user: ‘aaa‘,
userId:‘sdg‘
},
{
id: ‘2‘,
pid: ‘‘,
cont: ‘bbb‘,
user: ‘rtw‘,
userId: ‘213‘
},
{
id: ‘4‘,
pid: ‘2‘,
cont: ‘dd‘,
user: ‘df‘,
userId: ‘1adf4‘
},
{
id: ‘5‘,
pid: ‘1‘,
cont: ‘ee‘,
user: ‘dds‘,
userId: ‘2fa34‘
},
{
id: ‘3‘,
pid: ‘5‘,
cont: ‘ccc‘,
user: ‘123‘,
userId: ‘123tg4‘
}
]
//kinder初始化
var editor;
KindEditor.ready(function (K) {
editor = K.create(‘textarea[name="content"]‘, {
resizeType: 1,
allowPreviewEmoticons: false,
allowImageUpload: false,
width: "100%",
items: [
‘emoticons‘, ‘image‘, ‘link‘]
});
});
$(function () {
//加载评论
$.get("", "", function (res) {
//if ();
for (var i = 0; i < datas.length; i++) {
htmlText = "<div id=‘" + datas[i].id + "‘ style=‘border-bottom:solid #0096ff 1px‘>"
+ datas[i].cont
+ "<div class=‘col-md-offset-8‘>"
+ "评论人："
+ "<span class=‘user_pl‘>" + datas[i].user + "</span>"
+ "<hidden name=‘userId‘ class=‘userId‘ value=‘" + datas[i].userId + "‘/>"
+ " "
+ "<span class=‘date_pl‘>" + getDate() + "<span/>"
+ "</div>"
+ "<div class=‘col-md-offset-10‘>"
+ "<a href=‘#‘ onclick=‘replay(this)‘>回复</a>"
+ "</div>"
+ "<div class=‘hidden‘>"
+ " <form>"
+ " <!--<textarea class=‘form-control‘ rows=‘3‘ class=‘pl‘></textarea>-->"
+ " <div class=‘comment‘>"
+ " <textarea class=‘form-control‘ name=‘content‘ class=‘pl‘> 回复评论</textarea>"
+ " <input type=‘button‘ value=‘评论‘ name=‘btn_pl‘ class=‘btn_pl‘ style=‘margin-top:7px‘ onclick=‘replayOk(this)‘/>"
+ " </div>"
+ " </form> "
+ "</div>"
+ " </div>"
$("#pls").append(htmlText);
}
});
//绑定评论事件
$(".btn_pl").unbind("click").bind("click", function () {
if ($(".pl").val() == "" || $(".pl").val() == null) {
return;
}
htmlText = "<div style=‘border-bottom:solid #0096ff 1px‘>"
+ $(".pl").val()
+ "<div class=‘col-md-offset-8‘>"
+ "评论人："
+ "Admin"
+ " "
+ getDate()
+ "</div>"
+ "<div class=‘col-md-offset-10‘>"
+ "<a href=‘#‘ onclick=‘replay(this)‘>回复</a>"
+ "</div>"
+ "<div class=‘ hidden‘>"
+ " <form>"
+ " <!--<textarea class=‘form-control‘ rows=‘3‘ id=‘pl‘></textarea>-->"
+ " <div class=‘comment‘>"
+ " <textarea class=‘form-control‘ name=‘content‘ class=‘pl‘> 回复评论</textarea>"
+ " <input type=‘button‘ value=‘评论‘ name=‘btn_pl‘ class=‘btn_pl‘ style=‘margin-top:7px‘ onclick=‘replayOk(this)‘/>"
+ " </div>"
+ " </form> "
+ "</div>"
+ "</div>"
$(".pl").append(htmlText);
});
});
//点击回复按钮
function replay(t) {
self = $(t);
if (self.parent().next().hasClass(‘hidden‘)) {
self.parent().next().removeClass("hidden");
} else {
self.parent().next().addClass("hidden");
}
var editor;
KindEditor.ready(function (K) {
editor = K.create(‘textarea[name="content"]‘, {
resizeType: 1,
allowPreviewEmoticons: false,
allowImageUpload: false,
width: "100%",
items: [
‘emoticons‘, ‘image‘, ‘link‘]
});
//评论人
user = self.parent().prev().children(".user_pl").text();
//评论人id
userId = self.parent().prev().children(".userId").attr("value");
//评论内容
cont = self.parent().parent().text();
//评论id
contId = self.parent().parent().attr("id");
alert("评论人" + user + "---评论人ID" + userId + "---评论内容" + cont + "--评论内容ID" + contId)
});
}
//回复点击确定按钮
function replayOk(t) {
htmlText = "<div style=‘border-bottom:solid #0096ff 1px‘>"
+ $(".pl").val()
+ "<div class=‘col-md-offset-8‘>"
+ "评论人："
+ "Admin"
+ " "
+ getDate()
+ "</div>"
+ "<div class=‘col-md-offset-10‘>"
+ "<a href=‘#‘ onclick=‘replay(this)‘>回复</a>"
+ "</div>"
+ "<div class=‘ hidden‘>"
+ " <form>"
+ " <!--<textarea class=‘form-control‘ rows=‘3‘ id=‘pl‘></textarea>-->"
+ " <div class=‘comment‘>"
+ " <textarea class=‘form-control‘ name=‘content‘ class=‘pl‘ > 回复评论</textarea>"
+ " <input type=‘button‘ value=‘评论‘ name=‘btn_pl‘ class=‘btn_pl‘ style=‘margin-top:7px‘ onclick=‘replayOk(this)‘/>"
+ " </div>"
+ " </form> "
+ "</div>"
+ " </div>"
}
//获取当前时间
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>