项目实训——初版的页面优化（2）

再次进行了一次小组会议，找到了更加多的需要优化和完善的地方。比如题目很容易出框，讨论区话题的显示需要限制长度等等。同时也新增一些功能，比如评论的删除。这篇先写完善。

题目太长的解决

我们的设置是把题目和发布时间放在一起。但这样题目太长的时候会把发布时间顶下去，导致页面的显示十分不规范。
overflow:hidden使得过长的题目隐藏超出范围的部分
text-overflow:ellipsis会在字段末尾用“…”来替代超出范围的部分

<div style="width: 80%;overflow: hidden;text-overflow:ellipsis;">
    <a title={{item.title}} style="color: #009688;word-break:keep-all;white-space:nowrap;" href={{url}}>{{item.title}}</a>
</div>

为了能让用户看到题目全貌，还需要在a标签里设置title=标题内容，这样用户鼠标移到题目时上方就能出现显示内容的小方框。

就业帮助具体内容的收起展开

我们的就业帮助的数据有两个来源：一是校友或导师发布的就业帮助信息，二是爬虫爬下来的数据。用户发布的信息能受到规范，然而爬下来的数据常常会过长。因此需要实现内容的展开收起。
第一步，规定内容的最大长度，做出展开收起的按钮。

<script id="imgCardScript" type="text/html">
    <ul>
        {{#  layui.each(d, function(index, item){
                var url = "infodetails?infoid="+ item.info_id;
                var showheight = 120;//div最大高度
                var id = item.info_id;
        }}
        <li>
            <div class="layui-card showcard" style="margin-bottom: 20px" >
                <div class="layui-card-header"  style="padding:5px 0 45px 20px;font-size: 22px;">
                    <!-- 点击进入话题具体页面-->
                    <div style="width: 80%;overflow: hidden;text-overflow:ellipsis;">
                        <a title={{item.title}} style="color: #009688;word-break:keep-all;white-space:nowrap;" href={{url}}>{{item.title}}</a>
                    </div>
                    <span style="float: right;margin-right: 25px;color: #666;font-size: 14px;display: inline-block;margin-top: -40px">{{item.date}}</span>
                </div>
                <div class="layui-card-body" style="overflow: hidden">
                    <div style="max-height: 120px;overflow: hidden"><p class="contentdes">{{item.describe}}</p></div>
                    <span class="seemore" style="float: right;margin-right: 20px;color:#4d2eb3;display: block" onclick="seemore(this)">
                        展开<i class="layui-icon layui-icon-down" style="color:#4d2eb3;"></i></span>
                    <span class="seeless" style="float: right;margin-right: 20px;color:#4d2eb3;display: none;" onclick="seeless(this)">
                        收起<i class="layui-icon layui-icon-up" style="color:#4d2eb3;"></i></span>
                </div>
            </div>
        </li>
        {{#
        }); }}
        {{#  if(d.length === 0){ }}
        无数据
        {{#  } }}
    </ul>
</script>

注意展开收起span的onclick，两个方法都需要this。

<script>
function seemore(obj) {
    $(obj).hide();
    var total =  $(obj).prev().children().height()+'px';
    console.log(total);
    $(obj).prev().css("max-height",total);
    $(obj).next().show();
}
function seeless(obj) {
    $(obj).hide();
    var show = '120px';
    $(obj).prev().prev().css('max-height',show);
    $(obj).prev().show();
}
</script>

$ (xxx).height()可以获取该控件的长度，通过$(xxx).css()改变最大长度。
这样的确可以进行展开收起了，但是大多数帮助信息并不长，不需要对内容进行缩略。那么这意味着需要在数据渲染后对内容长度进行判断。哈，又需要熟悉的老朋友setTimeout()了。

<script>
function repair() {//判断内容长度
    $(".contentdes").each(function () {
        console.log($(this).height());
        if($(this).height()<120){
            $(this).parent().next().hide();//隐藏展开按钮
        }
    });
}
window.onload = function(){
    setTimeout(repair,16);
}
</script>

实现图如下：

表格的美化

需要往表格渲染的执行script中加上：

skin:"line"//行边框风格
,even:true//开启隔行背景
,done:function () {//改变样式
    $(".layui-table-box").css("border-width","0px");
    $(".layui-table-header tr").css("height","46px");
    $(".layui-table-header tr").css("background-color","white");
    $(".layui-table-header tr span").css({"color":"#fd6686","font-size":"16px"});
}

当鼠标移上去的时候表行背景改变，字体变大。鼠标移走的时候背景变成白色，字体恢复。

$('body').on("mouseenter",".layui-table-body tr",function () {
    $(this).siblings().find("div").css("color","#666");
    $(this).css("background-color","#9993ae");
    $(this).find("div").css({"color":"ghostwhite","font-size":"15px"});
});
$('body').on("mouseleave",".layui-table-body tr",function () {
    $(this).siblings().find("div").css("color","#666");
    $(this).css("background-color","white");
    $(this).find("div").css({"color":"#666","font-size":"14px"});
});