HTML中常用的js技巧和方法

1 篇文章 0 订阅

以评论功能为例

1.ajax动态加载评论列表
js:

// 加载评论列表
    var postId = $("#postId").html();
    $.post("post/commentList.action?postId="+postId, function(data) {
        $("#comment-list").html(data);
    });

html:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<%--comment list--%>
<c:forEach items="${page.beanList}" var="comment" varStatus="status">
    <li class="media">
        <a class="pull-left" href="ta/show.action?userId=${comment.userId}">
            <img class="thumbnail img-responsive center-block" src="${comment.portrait}" style="width: 65px"/>
        </a>
        <div class="media-body">
            <a href="javascript:;" class="btn btn-primary btn-xs pull-right reply"
               onclick="replyComment('回复 #${(page.pageIndex-1)*10 + status.index + 1} ${comment.trueName}:')">回复
            </a>
            <h4>#${(page.pageIndex-1)*10 + status.index + 1} &nbsp;&nbsp; ${comment.trueName}</h4>
            <small class="text-muted"><fmt:formatDate value="${comment.createTime}" pattern=" Y-M-d  HH:mm "></fmt:formatDate></small>
            <p>${comment.content}</p>
        </div>
    </li><!-- media -->
</c:forEach>
<%--btn-load-more--%>
<c:if test="${page.beanList.size()>=10}">
<button class="btn btn-default btn-sm btn-block" onclick="loadMoreComment(${page.pageIndex+1})" id="btn-load-more">
    <i class="fa fa-plus-square-o"></i> 加载更多
</button>
</c:if>

2.点击评论按钮,页面滚动到评论框,评论框获取焦点

$("html,body").animate({scrollTop:$("#comment-content").offset().top},500);//500是ms,也可以用slow代替
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值