实现效果就是多余的内容用三个点表示,然后点击查看详情弹出来一个模态框展示全部内容,实现过程就是下面代码里的两个js方法,再替换前把全部内容存入到数组当中去,然后点击查看详情根据数组下标获取出对应的值.内容两边的div即style样式必须加上.如果想使用模态框的话,导入bootstrap的js和css就可以了,如果只想实现...的功能的话,用js里的正则表达式就可以.
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<link href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/witkey.css"></link>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/table/bootstrap-table.css"></link>
<script src="${pageContext.request.contextPath}/static/common/jquery-2.2.3.min.js"></script>
<link href="${pageContext.request.contextPath}/static/css/projectdetails.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<style>
.contentp{ /*这个样式是必须定义的*/
height: 100px;
overflow: hidden;
text-indent:35px;
}
.span1{
margin-left: 400px;
}
</style>
<div class="container">
<c:forEach items="${app}" var="app" varStatus="th">
<br>
<div style="border:1px solid black;">
<div class="row">
<div class="col-xs-2">
<img style="width: 150px;text-align: center;"
src="${pageContext.request.contextPath}/uploads/logo/${app.logo}"/>
</div>
<div class="col-xs-7">
<p><a href="${pageContext.request.contextPath}/witkeyUserComplete/toCompleteDetails/${app.userId}">${app.corporateName}</a></p>
<p>
项目费用:${app.projectBudget}万元
项目周期:${app.projectPeriod}月
</p>
<p>报名函 <span class="span1" onclick="viewDetails('${th.index}')">查看详情</span></p>
<div class="contentp"> <p>${app.applyContent}</p> </div>
</div>
<div class="col-xs-3">
<button class="btn btn-primary receivep" <c:if test="${app.createId!=sessionScope.witkeyUser.id}">disabled="disabled"</c:if>>
<c:if test="${app.applyStatus==1}">已报名</c:if>
<c:if test="${app.applyStatus==0}">雇佣此服务商</c:if>
<c:if test="${app.applyStatus==2}">已报名</c:if>
</button>
<img style="width: 210px;height:200px;text-align: center;"
src="${pageContext.request.contextPath}/uploads/logo/xinred.png"/>
</div>
</div>
</div>
</c:forEach>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body" id="model1">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭按钮</button>
<button type="button" class="btn btn-primary">保存按钮</button>
</div>
</div>
</div>
</div>
<script>
var contentArray = new Array(); //定义一个数组存放全部的内容
$(function() {
//解决报名函中内容太多,如果大于4行,用点点代替
$(".contentp").each(function (i) {
var divH = $(this).height();
var $p = $("p", $(this)).eq(0);
contentArray[i]=$p.text(); //把完整的内容存到数组中
while ($p.outerHeight() > divH) {
$p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
}
;
});
});
//模态框展示全部内容
function viewDetails(i) {
$("#model1").text(contentArray[i]);
$("#myModal").modal("show");
}
</script>
</div>