效果

實(shí)現(xiàn)

jsp頁面代碼

<dd class="fl rel ml_05em text_12em">接貨確認(rèn)<span id="orderComfirmRed" class="abs pl_05em pr_05em mt_05em top_0 right_0 c_white bor_rad_05em minus_mr_1em line_h_14em text_al_c bg_red-orange " style="display:none"></span> </dd>

頁面通過一個(gè)隱藏的span標(biāo)簽實(shí)現(xiàn)，其中span標(biāo)簽的大小 通過class屬性來控制，這里不是原生jquery的class的屬性，不要全部復(fù)使用。

記住span的id。

jquery代碼

實(shí)現(xiàn)思想是：

當(dāng)頁面加載完之后，通過ajax提交后臺去查詢數(shù)據(jù)，將查到的消息數(shù)傳回前段，如果為0，則不顯示span，如果不為0，則顯示span，并將消息數(shù)量作為span的內(nèi)容。

在js中：

?$(function(){var url = "${ctx}/front/tbOnPurchaseAction/waitReceived";$.ajax({async : false,cache : false,type : 'POST',url : url,data :{dsType:'sysDs'},dataType:"json",success : function(data) {if(data.data==0){$("#orderComfirmRed").hide();}else{$("#orderComfirmRed").css("display","block");$("#orderComfirmRed").text(data.data);?}}});});

后臺action代碼

@ResponseBody@RequestMapping("/waitReceived" )public Json waitReceived(@QueryParam("dsType")?? @DefaultValue("sysDs") String dsType) {Json jsonResult = new Json();jsonResult.setTitle("紅點(diǎn)");Integer count=0;String num=null;Map<String, Object>map=new HashMap<String,Object>();List<orderComfirm> data = new ArrayList<>();try {String code=SubjectUtil.getCurrentUser().getOrgCode();map.put("code", code);data = tbComfirmService.queryOrderComfirm(map);if (data.size()>0) {count=data.size();}if(count>=100) {num="99+";}else {num=count.toString();}jsonResult.setData(num);jsonResult.setStatus(true);jsonResult.setMessage("接口訪問成功！");} catch (Exception ex) {LogService.getInstance(this).error("獲取數(shù)據(jù)失敗：" + ex.getMessage(), ex);}return jsonResult;}

?

總結(jié)

以上是生活随笔為你收集整理的Jquery中 实现气泡消息提示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。