在html页面添加了评论和回复的显示页面
2018-03-23 17:13
549 查看
在html页面添加了评论和回复的显示页面
先来看看效果图，用了Layui的框架，图片查看用了layui的photos,这功能很赞。
源码如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>挑选电子书制作工具</title>
<link rel="stylesheet" type="text/css" href="common/layui/css/layui.css" media="all">
<link rel="stylesheet" type="text/css" href="common/bootstrap/css/bootstrap.css" media="all">
<link rel="stylesheet" type="text/css" href="common/global.css" media="all">
<link rel="stylesheet" type="text/css" href="css/personal.css" media="all">
<style type="text/css">
.article-container{
background-color: #ffffff;
padding-top:20px;
width:1024px;
margin:20px auto;
}
.article_r{
padding-top:10px;
float:right;
}
.pulisher,.time,.article_view,.article_comments,.article_del{
clear:both;
margin-right:25px;
font-size: 15px;
}
.title{
font-weight:bold;
font-size: 30px;
text-align: center;
}
.article_content{
background: #ffffff;
clear:both;
padding:1em 4em;
margin-top: 40px;
}
p{
text-indent: 2em;
text-overflow: hidden;
font-size:18px;
}
/*话题内容图片*/
.ImgContent{
width:350px;
margin:0px auto;
padding: 5px;
overflow:hidden;
}
.NavLinks{
padding:5px;
width:100px;
height: 100px;
float: left;
overflow: hidden;
}
.NavLinks img{
width: 100%;
height: 100%;
}
.hitShowPic {
width:350px;
clear:both;
margin-left:430px;
}
.hitShowPic span {
font-size: 15px;
text-align: center;
}
/*以下评论的css*/
.show_reply_list {
margin-right:1em;
color: grey;
}
.comment_list {
background-color: #ffffff;
padding-top:5px;
width:900px;
margin:0 auto;
}
.comment {
width:900px;
margin-top:10px;
}
.comment_details {
float:right;
}
.comment_content {
clear:both;
margin:5px 50px;
font-size:16px;
}
.comment_add_or_last {
margin:0 auto;
clear: both;
width:600px;
height:50px;
background: #F0F0F0;
text-align: center;
font-size:20px;
line-height: 40px; //行高（与div保持同高，垂直居中写法）
margin-bottom: 40px;
}
.imgdiv{
width:80px;
height:70px;
float:left;
}
.imgcss {
width:60px;
height:60p
4000
x;
border-radius: 50%;
}
.comment_name {
margin-left:10px;
color:#3D9EEA;
font-size:16px;
font-weight: bolder;
}
.layui-icon {
font-size: 13px;
color: grey;
}
.del {
float:right;
}
.del_comment {
margin-right:50px;
}
.reply_list {
clear:both;
display:none;
width:900px;
padding-right:15px;
margin-top:10px;
font-size:16px;
}
.reply {
clear:both;
width:700px;
margin:4px auto;
}
.reply_name {
color:#3D9EEA;
}
.del_reply {
float:right;
}
.show_remain_reply {
width:600px;
height:40px;
text-align:center;font-size:18px;
background-color: #F0F0F0;
margin:0 auto;
line-height: 40px;
display:none;
}
</style>
</head>
<body>
<div class="article-container">
<div class="article_head">
<h1 class="title">标题标题标题标题</h1>
<div class="article_r">
<span class="pulisher">小白 发表</span>
<span class="time"> 2015:10:10</span>
<span class="article_view" title="阅读"> 阅读(100)</span>
<span class="article_comments" title="评论"> <a href="#" onclick=""> 评论</a>(100)</span>
<span class="article_del" data-id="${articleDto.id}"><a href="javascript:void(0);" onclick="" title="删除">删除</a></span>
</div>
</div>
<div class="article_content">
<p> 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容 话题内容</p>
</div>
<hr/>
<div class="ImgContent layer-photos-demo" id="layer-photos-demo" >
<div class="NavLinks">
<img layer-src="./images/篮板王.jpg" src="./images/篮板王.jpg" alt="图片名图片名图片名">
</div>
<div class="NavLinks">
<img layer-src="./images/篮板王.jpg" src="./images/user.jpg">
</div>
<div class="NavLinks">
<img layer-src="./images/篮板王.jpg" src="./images/篮板王.jpg">
</div>
<div class="NavLinks">
<img layer-src="./images/篮板王.jpg" src="./images/user.jpg">
</div>
<div class="NavLinks">
<img layer-src="./images/篮板王.jpg" src="./images/篮板王.jpg">
</div>
<div class="NavLinks">
<img layer-src="./images/篮板王.jpg" src="./images/user.jpg">
</div>
<div class="NavLinks">
<img layer-src="./images/篮板王.jpg" src="./images/篮板王.jpg">
</div>
<div class="NavLinks">
<img layer-src="./images/篮板王.jpg" src="./images/user.jpg">
</div>
<div class="NavLinks">
<img layer-src="./images/篮板王.jpg" src="./images/篮板王.jpg">
</div>
</div>
<div class="hitShowPic" >点击图片查看原图</span>
</div>
<hr>
<div class="comment_list">
<h3 style="text-indent: 2em;">评论列表</h3>
<hr>
<div class="comment">
<div class="imgdiv">
<img class="imgcss" src="./images/user.jpg"/>
</div>
<div class="conmment_details">
<div style="float:left;">
<span class="comment_name">大白 </span> <span>22分钟前</span>
</div>
<div class="del">
<span class="show_reply_list">查看回复</span>
<i class="icon layui-icon" >赞(164)</i>
<a class="del_comment" data-id="1"> <i class="icon layui-icon" >删除</i></a>
</div>
<div class="comment_content" > 感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒
</div>
</div>
<div class="reply_list" > <!--style="display:none;"-->
<div class="reply" >
<span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好 </span>
<a data-id="1" class="del_reply">
<i class="icon layui-icon " > 删除</i>
</a>
</div>
<div class="reply">
<span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span>
<a data-id="1" class="del_reply">
<i class="icon layui-icon" > 删除</i>
</a>
</div>
<div class="reply">
<span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span>
<a data-id="1" class="del_reply">
<i class="icon layui-icon" > 删除</i>
</a>
</div>
<div class="reply">
<span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span>
<a data-id="1" class="del_reply">
<i class="icon layui-icon" > 删除</i>
</a>
</div>
</div>
<div class="show_remain_reply">查看剩下的回复</div>
<!--回复列表结束-->
</div>
<hr>
<div class="comment">
<div class="imgdiv">
<img class="imgcss" src="./images/user.jpg"/>
</div>
<div class="conmment_details">
<div style="float:left;">
<span class="comment_name">大白 </span> <span>22分钟前</span>
</div>
<div class="del">
<span class="show_reply_list">查看回复</span>
<i class="icon layui-icon" >赞(164)</i>
<a class="del_comment" data-id="1"> <i class="icon layui-icon" >删除</i></a>
</div>
<div class="comment_content" > 感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒
</div>
</div>
<div class="reply_list" > <!--style="display:none;"-->
<div class="reply" >
<span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好 </span>
<a data-id="1" class="del_reply">
<i class="icon layui-icon " > 删除</i>
</a>
</div>
<div class="reply">
<span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span>
<a data-id="1" class="del_reply">
<i class="icon layui-icon" > 删除</i>
</a>
</div>
<div class="reply">
<span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span>
<a data-id="1" class="del_reply">
<i class="icon layui-icon" > 删除</i>
</a>
</div>
<div class="reply">
<span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span>
<a data-id="1" class="del_reply">
<i class="icon layui-icon" > 删除</i>
</a>
</div>
</div>
<div class="show_remain_reply">查看剩下的回复</div>
<!--回复列表结束-->
</div>
<hr>
<div class="comment">
<div class="imgdiv">
<img class="imgcss" src="./images/user.jpg"/>
</div>
<div class="conmment_details">
<div style="float:left;">
<span class="comment_name">大白 </span> <span>22分钟前</span>
</div>
<div class="del">
<span class="show_reply_list">查看回复</span>
<i class="icon layui-icon" >赞(164)</i>
<a class="del_comment" data-id="1"> <i class="icon layui-icon" >删除</i></a>
</div>
<div class="comment_content" > 感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒感觉林丹越来越帅了，好棒
</div>
</div>
<div class="reply_list" > <!--style="display:none;"-->
<div class="reply" >
<span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好 </span>
<a data-id="1" class="del_reply">
<i class="icon layui-icon " > 删除</i>
</a>
</div>
<div class="reply">
<span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span>
<a data-id="1" class="del_reply">
<i class="icon layui-icon" > 删除</i>
</a>
</div>
<div class="reply">
<span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span>
<a data-id="1" class="del_reply">
<i class="icon layui-icon" > 删除</i>
</a>
</div>
<div class="reply">
<span class="reply_name">小白</span>回复<span class="reply_name">小黑</span>：<span class="reply_content">你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊你好没啊 </span>
<a data-id="1" class="del_reply">
<i class="icon layui-icon" > 删除</i>
</a>
</div>
</div>
<div class="show_remain_reply">查看剩下的回复</div>
<!--回复列表结束-->
</div>
<hr>
<div class="comment_add_or_last" >
点击加载更多评论
</div>
<hr>
</div>
</div>
</body>
<script type="text/javascript" src="common/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['form','layer','jquery','element','laypage','form'],function(){
var form = layui.form();
window.layer = layui.layer;
layedit = layui.layedit;
window.jQuery = window.$ = layui.jquery;
var element = layui.element(),form = layui.form();
layer.photos({
photos: '#layer-photos-demo'
,anim: 5
});
$(document).ready(function(){
//alert($(".comment_list").find(".comment")[0] == undefined);
if($(".comment_list").find(".comment")[0] == undefined) {
$(".comment_add_or_last").html("暂无人评论");
}
$(document).on('click','.show_reply_list', function(){
if($(this).closest('.comment').find(".reply_list").css("display") != "none") {
$(this).closest('.comment').find(".show_remain_reply").css("display","none");
$(this).html("查看回复");
}else {
$(this).closest('.comment').find(".show_remain_reply").css("display","block");
$(this).html("收起回复");
}
$(this).closest('.comment').find(".reply_list").toggle(500);
});
$(
c221
document).on('click','.show_remain_reply', function(){
$(this).html("已显示全部回复");
//TODO发送数据
});
$(document).on('click','.comment_add_or_last', function(){
var getMoreComment = $(this);
//TODO如果获取的数据为零
getMoreComment.html("没有更多评论了");
});
});
});
</script>
</body>
</html> layui的框架包得自己下载才能使用
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 在Silverlight宿主html页面添加按钮无法显示
- html页面下拉列表中动态添加后台数据（格式化数据，显示出数据的层次感）
- py编辑器中添加html页面不能显示中文的问题
- 解决:在php配置文件路径下，添加php.ini之后，测试页面无法显示
- html页面在IOS-safari浏览器下绑定点击绑定事件的div时会显示灰色框的问题
- Shop项目后台--1.商品添加页面的类别ajax显示
- html页面显示播放视频
- 解决 ECSHOP v273 产品详情页面评论不显示的问题
- html——a标签添加点击事件，火狐浏览器直接显示0
- html页面不同分辨率下居中显示同样效果
- html百分比页面中两个并列div在添加边框后，div被挤出
- html中实现添加水印的功能 / 在jsp页面上直接打开PDF文件
- html页面中运用CSS为层(div)元素添加滚动条
- extjs 读取数据并显示在页面同时添加修改功能
- VBScript教程 第二课在HTML页面中添加VBscript代码
- HTML页面的控件的显示与隐藏
- ajax接收后台数据在html页面显示
- ASP.NET Web页面(.aspx)添加用户控件(.ascx)无显示的问题
- play freamwork 页面的Html+Groovy模板中添加Java代码
- 在页面中，我们经常看到，一个button按钮，如果属标点击，就会触发一个窗口的显示，如果二次点击并可以隐藏，那么如何通过JAVA配合html来实现这一功能呢？