在Layui框架里设计一个评论列表的前端界面

本想找个模板随便写个评论界面，结果找了大半天，木有找到，只能自己动手丰衣足食了。可以点击删除，点击加载更多也能拼接获取更多内容，只是写了个大概模拟逻辑的功能，用的时候还得再修改。
layui的图标，如何扩展第三方的图标：http://blog.csdn.net/guang_liang_/article/details/79160334

效果图：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>评论列表页面</title><link rel="stylesheet" type="text/css" href="common/layui/css/layui.css" media="all"></head>
<style type="text/css">.comment_list {padding-top:40px;width:700px;margin:0 auto;}.comment_details {float:left;}.comment_content {margin-top:10px;font-size:16px;}.comment_add_or_last {margin:0 auto;clear: both;width:600px;height:40px;background: #F0F0F0;text-align: center;line-height: 40px;   //行高（与div保持同高，垂直居中写法）}.imgdiv{float:left;}.imgcss {width:50px;height:50px;border-radius: 50%;}.comment_name { margin-left:10px;color:#3D9EEA;font-size:15px;font-weight: bolder;}.layui-icon {font-size: 10px; color: grey;}.del {margin-left: 55px;}
</style>
<body ><div class="comment_list"><h2 >全部评论</h2><hr><div class="comment"><div class="imgdiv"><img class="imgcss"  src="./images/user.jpg"/></div><div class="conmment_details"><span class="comment_name">大白 </span>     <span>22分钟前</span><div class="comment_content" >  感觉林丹越来越帅了，好棒</div><div class="del"> <i class="icon layui-icon"  >赞(164)</i><a class="del_comment" data-id="1"> <i class="icon layui-icon" >删除</i></a></div></div><hr></div><div class="comment"><div class="imgdiv"><img class="imgcss"  src="./images/user.jpg"/></div><div class="conmment_details"><span class="comment_name">大白 </span>     <span>22分钟前</span><div class="comment_content" >  感觉林丹越来越帅了，好棒</div><div class="del"> <i class="icon layui-icon"  >赞(164)</i><a class="del_comment" data-id="1"> <i class="icon layui-icon" >删除</i></a></div></div><hr></div><div class="comment"><div class="imgdiv"><img class="imgcss"  src="./images/user.jpg"/></div><div class="conmment_details"><span class="comment_name">大白 </span>     <span>22分钟前</span><div class="comment_content" >  感觉林丹越来越帅了，好棒</div><div class="del"> <i class="icon layui-icon"  >赞(164)</i><a class="del_comment" data-id="1"> <i class="icon layui-icon" >删除</i></a></div></div><hr></div></div><div class="comment_add_or_last" >没有更多评论了</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(),laypage = layui.laypage;//删除用户$(document).on('click', '.del_comment', function() {var id = $(this).attr("data-id");alert(typeof id);$(this).closest('.comment').css("display", "none");  });$(document).on('click', '.comment_add_or_last', function() {add();$(this).html( "点击加载更多");});function  delComment(id) {alert(id);}function  add() {var s = " ";s += '<div class="comment">';s += '<div class="imgdiv"><img class="imgcss"  src="./images/user.jpg"/></div>';s += '<div class="conmment_details">';s +=  '<span class="comment_name">大白 </span>     <span>22分钟前</span>';s +=  '<div class="comment_content" >  感觉林丹越来越帅了，好棒</div>';s +=     '<div class="del"> <i class="icon layui-icon"  >赞(164)</i>';s +=   '<a class="del_comment"  data-id="1"><i class="icon layui-icon" >删除</i></a></div></div><hr></div>';$('.comment_list').append(s);}});
</script>
</html>

在Layui框架里设计一个评论列表的前端界面相关推荐

如何设计一个优秀的向导式界面（Wizard）
软件界面设计中的"向导式界面"这个术语翻译自英语中的"Wizard"一词.大部分字典上对于Wizard的解释是男巫.奇才的意思.不过从其用途来看,似乎向导的译法 ...
高仿网易评论列表效果之界面分析
Hello大家好我是周杰伦~!@#￥#@￥%￥%--%&*&--**)--*%&￥%#￥!!!! 不好意思,刚忘了吃药了~~~~扯正事,前几天有个小哥来面试,因为前些天面试了很 ...
在刷抖音的时候发了一个评论，但是App界面没有显示出来，如何排查这个问题?（软件测试面试高频）
1.检查网络问题网络问题如何进行分析,举个例子.在我们使用的多种多样的软件当中,经常会有网卡导致页面停顿反应慢的时候.那么软件测试面试的被问得到的时候应该如何去解析呢?根据这个我们所了解的这个功能实 ...
初学者-如何使用bootstrap框架设计一个简单的网页主界面HTML+CSS+Bootstrap
自己也刚刚开始接触框架,在学习了bootstrap框架过后,练习写了一个简单的主界面,主界面的图如下: 这个页面主要用的bootstrap的栅格系统进行整体布局,网页效果简约大方,最重要的是比较简单吧 ...
利用Django框架简单设计一个登陆页面
这里写自定义目录标题 1.创建project django-admin startproject "你项目的名字" 2.创建app python manage.py startap ...
用Android Studio设计一个简单个性的登录界面
一.用到的组件: LinearLaout.TableLayout.FrameLayout.RelativeLout 二.效果图展示: 三.步骤及过程: 1.首先新建一个Project,并在app -& ...
用Vue.js开发一个电影App的前端界面
我们要构建一个什么样的App? 我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目.这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WEB交互界 ...
推荐一个基于 Vue 的前端界面可视化设计器项目
点击▲关注 "爪哇笔记" 给公众号标星置顶更多摄影技巧第一时间直达简介基于 Vue 开发的界面可视化设计器,前端小白可以直接拖拽生成前端代码. 特性可视化拖拽布局支 ...
json可视化编辑器_推荐一个基于 Vue 的前端界面可视化设计器项目
简介基于 Vue 开发的界面可视化设计器,前端小白可以直接拖拽生成前端代码. 特性可视化拖拽布局支持数据关联和交互行为的可视化编辑支持扩展组件.组件属性.属性编辑器依赖 vjform,可视化 ...

在Layui框架里设计一个评论列表的前端界面

在Layui框架里设计一个评论列表的前端界面

在Layui框架里设计一个评论列表的前端界面相关推荐

最新文章

热门文章