提示小红点样式

最新推荐文章于 2023-12-15 09:13:53 发布

飞火龙在天

最新推荐文章于 2023-12-15 09:13:53 发布

阅读量8.1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_23145857/article/details/53332762

本文展示了如何使用JavaScript、jQuery和JSP来动态显示或隐藏页面上的小红点提示，根据后台返回的数据更新不同模块的未读消息计数。通过AJAX请求获取数据，并使用CSS控制小红点的显示状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小红点样式：

.con_bot a .span_position{

position:absolute;
border-radius:50%;
background-color:#ff2122;
color:#fff;
font-size:0.3rem;
width:0.4rem;
height:0.4rem;
line-height:0.4rem;
top:-0.1rem;
right:-0.3rem;
z-index:1;

}

js:

$(function(){
$("#mywork").css("display","none");
$("#cmporder").css("display","none");
$("#homeorder").css("display","none");
$("#serviceorder").css("display","none");
$.ajax({
url :context + 'orderconts',
type : 'post',
dataType : 'json',
async:true,
data:{},
success : function(result) {
if(result.success){
$("#mywork").css("display","block");
$("#cmporder").css("display","block");
$("#homeorder").css("display","block");
$("#serviceorder").css("display","block");
var mycomplainCont=result.obj.mycomplainCont;
var cmpOrderwordCont=result.obj.cmpOrderwordCont;
var homeOrderwordCont=result.obj.homeOrderwordCont;
var serviceOrderCont=result.obj.serviceOrderCont;
if(mycomplainCont<=0){
$("#mywork").css("display","none");
}
if(cmpOrderwordCont<=0){
$("#cmporder").css("display","none");
}
if(homeOrderwordCont<=0){
$("#homeorder").css("display","none");
}
if(serviceOrderCont<=0){
$("#serviceorder").css("display","none");
}
$("#mywork").html(mycomplainCont);
$("#cmporder").html(cmpOrderwordCont);
$("#homeorder").html(homeOrderwordCont);
$("#serviceorder").html(serviceOrderCont);

} else {
$("#mywork").css("display","none");
$("#cmporder").css("display","none");
$("#homeorder").css("display","none");
$("#serviceorder").css("display","none");
}
}
});

});

jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="project.property.web.runtime.Runtime"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/bootstrap.min.css<%=Runtime.version()%>" />
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/resources/css/global.css<%=Runtime.version()%>" />
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/resources/css/home.css<%=Runtime.version()%>" />
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/lib.js<%=Runtime.version()%>"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/comp.js<%=Runtime.version()%>"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/js/home.js<%=Runtime.version()%>"></script>
<script>
context = '${pageContext.request.contextPath}/';
</script>
</head>
<body style="font-size: 12px;">
<div class="nav">
<table>
<tr>
<td>
<c:if test="${ST.authInfo.headPhoto ==null ||ST.authInfo.headPhoto ==''}">
<img src='<c:url value='/resources/images/user.png'/>' />
</c:if>
<c:if test="${ST.authInfo.headPhoto !=null &&ST.authInfo.headPhoto !=''}">
<img src='<c:url value='${ST.authInfo.headPhoto}'/>' />
</c:if>
</td>
<td>
<dl>
<dt>${ST.authInfo.userName}</dt>
<dd>部门：<span>${ST.authInfo.deptName}</span></dd>
<dd>编号：<span>${ST.authInfo.userNo}</span></dd>
</dl>
</td>
</tr>
</table>
<c:if test="${ST.authInfo.propertyName!=null&&ST.authInfo.propertyName!=''}">
<div class="nav_fx">

<span><img src='<c:url value='/resources/images/tj_03.png'/>' /></span>
<span>${ST.authInfo.propertyName}</span>
</div>
</c:if>
</div>
<ul class="con_box">
<li class="con_top">
<img src='<c:url value='/resources/images/tj_04.png'/>'/>
<p>订单中心</p>
</li>
<li class="con_bot">
<div>
<a href="${pageContext.request.contextPath}/order/publicorder?orderType=2">
<img src='<c:url value='/resources/images/tj_05.png'/>'/>
<span><p>公共报修<span class="span_position" id="cmporder"></span></p></span>
</a>
</div>
<div>
<a href="${pageContext.request.contextPath}/order/publicorder?orderType=1">
<img src='<c:url value='/resources/images/tj_06.png'/>'/>
<span><p>居家报修<span class="span_position" id="homeorder"></span></p></span>
</a>
</div>
<div>
<a href="${pageContext.request.contextPath}/server/serverorder">
<img src='<c:url value='/resources/images/tj_07.png'/>'/>
<span><p>预约服务<span class="span_position" id="serviceorder"></span></p></span>
</a>
</div>
</li>
</ul>
<ul class="con_box">
<li class="con_top">
<img src='<c:url value='/resources/images/tj_08.png'/>'/>
<p>物业专区</p>
</li>
<li class="con_bot">
<div>
<a href="<c:url value="/prsnl/mycomplain"/>">
<img src='<c:url value='/resources/images/tj_05.png'/>'/>
<span><p>公共报修<span class="span_position" id="mywork"></span></p></span>
</a>
</div>
</li>
<%-- <li class="con_bot">
<div>
<a href="<c:url value="/prsnl/myaddcomm_maintain"/>">
<img src='<c:url value='/resources/images/tj_05.png'/>'/>
<span>我要报修</span>
<span>1</span>
</a>
</div>
</li> --%>
</ul>
<ul class="con_box con_box_a">
<li class="con_top con_top_a">
<a href="${pageContext.request.contextPath}/prsnl">
<img src='<c:url value='/resources/images/tj_09.png'/>'/>
<p>个人设置</p>
</a>
</li>
</ul>
<%-- <li>
<a href="<c:url value="/prsnl/myaddcomm_maintain"/>">我要报修</a>
<img src="images/u21.png">
</li> --%>

</body>
</html>

controller方法：

@RequestMapping(value = "orderconts")
@ResponseBody
public AjaxResult loadOrderConts(HttpServletRequest req) throws Exception {
AjaxResult result = new AjaxResult();
Map<String, Integer> map = new HashMap<String, Integer>();
SessionInfo si = HttpUtils
.getSessionInfo(req);

TEnterpriseUsersModal auth = si.getAuthInfo();
TWorkOrderIntf orderIntf = (TWorkOrderIntf) ImplementorFactory
.getImplemetator(TWorkOrderIntf.class, "TWorkOrderIntf");
TSendASingleIntf singleIntf = (TSendASingleIntf) ImplementorFactory
.getImplemetator(TSendASingleIntf.class, "TSendASingleIntf");
TServiceOrdersIntf serviceIntf = (TServiceOrdersIntf) ImplementorFactory
.getImplemetator(TServiceOrdersIntf.class, "TServiceOrdersIntf");
VariantHolder<List<TWorkOrderModal>> data = new VariantHolder<List<TWorkOrderModal>>();
Criteria criteria = new Criteria(TWorkOrderModal.class);
criteria.addExpression(Restrictions.eq("TWorkOrderModal.UserId", si
.getAuthInfo().getEUserId()));
criteria.setPagination(new Pagination(1, 1));
List<Integer> list = new ArrayList<Integer>();
list.add(1);
list.add(2);
list.add(3);
criteria.addExpression(Restrictions.in("TWorkOrderModal.Status", list));
orderIntf.list(auth, criteria, data);
map.put("mycomplainCont", criteria.getPagination().getTotal());

// 公共报修

VariantHolder<List<TSendASingleModal>> singleList = new VariantHolder<List<TSendASingleModal>>();
Criteria c = new Criteria(TSendASingleModal.class);
OrExpression or = new OrExpression();
or.addExpression(Restrictions.eq("TSendASingleModal.Type",WorkOrderType.TWO));
or.addExpression(Restrictions.eq("TSendASingleModal.Type",WorkOrderType.ONE));
c.addExpression(or);
c.addExpression(Restrictions.eq("TSendASingleModal.RepairsId",
auth.getEUserId()));
c.addExpression(Restrictions.eq("TSendASingleModal.IsInvalid", 0));
singleIntf.list(auth, c, singleList);

data = new VariantHolder<List<TWorkOrderModal>>();
criteria = new Criteria(TWorkOrderModal.class);
criteria.setPagination(new Pagination(1, 1));
list = new ArrayList<Integer>();
List<Integer> typeList = new ArrayList<Integer>();
list.add(-1);
for (int i = 0; i < singleList.value.size(); i++) {
TSendASingleModal single = singleList.value.get(i);
list.add(single.getWorkOrderId());
}

typeList.add(1);
typeList.add(2);
typeList.add(3);
criteria.addExpression(Restrictions.in("TWorkOrderModal.Status",
typeList));
if (list.size() > 0) {
criteria.addExpression(Restrictions.in("TWorkOrderModal.Id", list));
}

criteria.addExpression(Restrictions.eq("TWorkOrderModal.WorkOrderType",
2));
orderIntf.list(auth, criteria, data);
map.put("cmpOrderwordCont", criteria.getPagination().getTotal());

singleList = new VariantHolder<List<TSendASingleModal>>();
c = new Criteria(TSendASingleModal.class);
c.addExpression(Restrictions.eq("TSendASingleModal.Type",
WorkOrderType.FOUR));
c.addExpression(Restrictions.eq("TSendASingleModal.RepairsId",
auth.getEUserId()));
c.addExpression(Restrictions.eq("TSendASingleModal.IsInvalid", 0));
singleIntf.list(auth, c, singleList);

criteria = new Criteria(TWorkOrderModal.class);
criteria.setPagination(new Pagination(1, 1));
data = new VariantHolder<List<TWorkOrderModal>>();
criteria.addExpression(Restrictions.in("TWorkOrderModal.Status",
typeList));
if (list.size() > 0) {
criteria.addExpression(Restrictions.in("TWorkOrderModal.Id", list));
}
criteria.addExpression(Restrictions.eq("TWorkOrderModal.WorkOrderType",
1));
criteria.addExpression(Restrictions.eq("TWorkOrderModal.IsTurn", 0));

orderIntf.list(auth, criteria, data);
map.put("homeOrderwordCont", criteria.getPagination().getTotal());

// 预约服务
singleList = new VariantHolder<List<TSendASingleModal>>();
c = new Criteria(TSendASingleModal.class);
c.addExpression(Restrictions.eq("TSendASingleModal.Type",
WorkOrderType.FOUR));
c.addExpression(Restrictions.eq("TSendASingleModal.RepairsId",
auth.getEUserId()));
c.addExpression(Restrictions.eq("TSendASingleModal.IsInvalid", 0));
singleIntf.list(auth, c, singleList);

VariantHolder<List<TServiceOrdersModal>> orders = new VariantHolder<List<TServiceOrdersModal>>();
criteria = new Criteria(TServiceOrdersModal.class);

criteria.setPagination(new Pagination(1, 1));
list = new ArrayList<Integer>();
typeList = new ArrayList<Integer>();
list.add(-1);

for (int i = 0; i < singleList.value.size(); i++) {
TSendASingleModal single = singleList.value.get(i);
list.add(single.getWorkOrderId());
}

typeList.add(1);
typeList.add(2);
typeList.add(3);
criteria.addExpression(Restrictions.in("TServiceOrdersModal.Status",typeList));
criteria.addExpression(Restrictions.in("TServiceOrdersModal.Id", list));

serviceIntf.list(auth, criteria, orders);
map.put("serviceOrderCont", criteria.getPagination().getTotal());

result.setSuccess(true);
result.setObj(map);
return result;

}