用hml5實現留言功能

    對于這個簡單評論，還有一個難點就是CSS該如何寫？才能達到圖1中的效果。下面給出CSS代碼。

.commentList li:first-child {
    border-top: 1px solid #eee;
}
.commentList .item {
    font-size: 1rem;
}
.commentList li {
    position: relative;
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}
.item {
    text-align: left;
    cursor: pointer;
}

li {
    display: list-item;
}

.item .pic {
    float: left;
    margin-right: 10px;
}
div, a, p, ul, li, img, span {
    margin: 0;
    padding: 0;
    border: 0;
}

.item .info {
    overflow: hidden;
}

.commentList .name {
    float: left;
}

.commentList .time {
    float: right;
    color: #666;
}

.commentList .content {
    clear: both;
    color: #666;
    width: 100%;
    font-size: 1.5rem;
    display: inline-block;
    line-height: 28px;
}

2.可蓋樓留言

圖2

? ? ? ?可蓋樓評論如圖2所示。實現方式大部分和簡單評論中的一樣，唯一不同的是從服務端返回的數據中有了源評論這個字段，需要在js模板中添加對源評論拼接字符串的代碼。下面只給出不同的代碼。

? ? ? ?js代碼如下：

/**
 * 添加評論列表，帶蓋樓功能（即源評論）
 * @param list 評論列表
 * @param parent html模板要加載到的父級元素
 * @param pullDirection 加載方式?！皍p”:對應上拉評論動作，加載在父元素后面；“down”：對應下拉評論動作，加載在父元素前面
 */
function addComment(list, parent, pullDirection) {
    var template = "";
    var html = "";
    var innerTemplate = "";
    var innerHtml = "";
    var buttonTemplate = "";

    template  = '
';              // 評論模板
    template += '   ';
    template += '       ';
%20%20%20%20template%20+=%20'%20%20%20';
%20%20%20%20template%20+=%20'%20%20%20';
%20%20%20%20template%20+=%20'%20%20%20%20%20%20%20{fullname}';
%20%20%20%20template%20+=%20'%20%20%20%20%20%20%20{createtime}';
%20%20%20%20template%20+=%20'%20%20%20%20%20%20%20';
%20%20%20%20template%20+=%20'%20%20%20%20%20%20%20{content}';
%20%20%20%20template%20+=%20'%20%20%20%20%20%20%20';
%20%20%20%20template%20+=%20'%20%20%20';
%20%20%20%20template%20+=%20'
';

%20%20%20%20$(list).each(function%20(i)%20{%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20//%20加載評論
%20%20%20%20%20%20%20%20var%20item%20=%20list[i];
%20%20%20%20%20%20%20%20var%20timestamp%20=item.createtime;%20%20%20%20%20%20%20%20%20%20%20//%20時間戳設置為北京時間
%20%20%20%20%20%20%20%20item.createtime%20=%20formatDate(timestamp);

%20%20%20%20%20%20%20%20var%20userimg%20=%20item.userimg;%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20//%20如果headImgUrl等于null,替換為默認路徑
%20%20%20%20%20%20%20%20if%20(userimg%20==%20null){
%20%20%20%20%20%20%20%20%20%20%20%20item.userimg%20=%20"headPortrait/default_head_img.png";
        }
        html += template.formatString(item);
    });
    if (pullDirection == "up") {
        $(parent).append(html);
    }
    else {
        $(parent).prepend(html);
    }

    // if ($(parent).attr("class") == "direct-broadcast-list") {      // 如果是直播間列表，需要在列表中添加“上榜”、“置頂”按鈕
    //     buttonTemplate  = '置頂';
    //     buttonTemplate += '上榜';
    //     $(parent).find(".name").after(buttonTemplate);
    // }

    $(list).each(function (i) {             // 加載源評論
        var srcContent = list[i].srcContent;
        var commentId = list[i].id;
        if (srcContent != null) {
            innerHtml = "";
            $(srcContent).each(function (j) {
                innerTemplate = '
';             // 源評論模板
                innerTemplate += '    {name}';
                innerTemplate += '    ' + parseInt(j + 1) + '樓';
                innerTemplate += '    {content}';
                innerTemplate += '
';
                innerHtml += innerTemplate.formatString(srcContent[j]);
            });
            $("#src-comment-" + commentId).html(innerHtml);
        }

        if (list[i].imgs != null) {
            var imgSrc = imagesPrefix + list[i].imgs[0];
            $("#small-img-" + commentId).html('');
        }
    });
}

/**
 * 字符串格式化，用于在模板中注入值
 * 例：var s = "id={id}".formatString(obj);
 * @param obj 對象
 * @returns {string} 注入后的字符串
 */
String.prototype.formatString = function (obj) {
    var reg = /{([^{}]+)}/gm;
    return this.replace(reg, function (match, name) {
        return obj[name];
    });
}