您的位置:首页 > Web前端 > JavaScript

HTML中常用的js技巧和方法

2017-04-11 08:35 288 查看
以评论功能为例

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}    ${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代替
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  html javascript