【java web】--Beetl+html鼠标悬停提示气泡

业务需求

　　用户中心有三个图标：手机、邮箱、银行卡绑定。如果完成了相应的绑定工作，图标就显示深色，未完成图标就是浅色，气泡中提示相应的文字和链接。示意图如下，主要要实现气泡弹出功能。

实现思路

　　１．鼠标移到图片上，隐藏的div弹层属性改成：显示，弹层背景是一个类似qq会话的图片，如上图所示。

　　２．鼠标离开图片，关闭div弹层 。

　　３．鼠标移动到气泡内，显示文字，并关闭其他气泡。

　　４．鼠标移出气泡，关闭本气泡。

完成代码

html+beetl

	<div class="phone_r"><h1>${user.userName},欢迎您！</h1><P>认证信息：<%if(phone==0){%><img src="${request.contextPath}/resources/img/htel.jpg" class="wimg"  onmouseover="showdiv('p_01');closediv('p_02');closediv('p_03');" /><%}else if(phone.certifiedStatus==1) {%><img src="${request.contextPath}/resources/img/ztel.jpg" class="wimg"  onmouseover="showdiv('p_01');closediv('p_02');closediv('p_03');" /><%}%><%if(email==0){%><img src="${request.contextPath}/resources/img/tb1.jpg" class="wimg1" onmouseover="showdiv('p_02');closediv('p_01');closediv('p_03')" /><%}else if(email.certifiedStatus==1) {%><img src="${request.contextPath}/resources/img/z-mail.jpg" class="wimg1" onmouseover="showdiv('p_02');closediv('p_01');closediv('p_03')" /><%}%><%if(bank==0){%><img src="${request.contextPath}/resources/img/htuoguan.jpg" class="wimg2" onmouseover="showdiv('p_03');closediv('p_01');closediv('p_02')" /><%}else if(bank.bankCardStatus==2){%>	<img src="${request.contextPath}/resources/img/z-tuoguan.jpg" class="wimg2" onmouseover="showdiv('p_03');closediv('p_01');closediv('p_02')" /><%}else if(bank.bankCardStatus==1){%><img src="${request.contextPath}/resources/img/z-tuoguan.jpg" class="wimg2" onmouseover="showdiv('p_03');closediv('p_01');closediv('p_02')" /><%}%><span>资料完整度${percent!}%，完成“ ${unfishedPart!}”可获得${partialIntegral!}积分奖励；</span></P><div id="p_01" class="bubble1" onmouseout="closediv('p_01')" ><img src="${request.contextPath}/resources/img/bubble.png" onmouseover="showdiv('p_01')" ><%if(phone==0){%><span  onmouseover="showdiv('p_01')" >您还没验证手机， <a href="${request.contextPath}/ssl/account/toSetting.htm">立即验证 </a></span><%}else if(phone.certifiedStatus==1) {%><span  onmouseover="showdiv('p_01')" >您已验证手机: ${strutil.subStringTo(phone.mobile,0,3)}****${strutil.subStringTo(phone.mobile,7,11)}</span><%}%>						</div><div id="p_02" class="bubble2" onmouseout="closediv('p_02')" ><img src="${request.contextPath}/resources/img/bubble.png" onmouseover="showdiv('p_02')"><%if(email==0){%><span  onmouseover="showdiv('p_02')">您还没验证邮箱， <a href="${request.contextPath}/ssl/account/toSetting.htm">立即验证 </a></span><%}else if(email.certifiedStatus==1) {%><span  onmouseover="showdiv('p_02')">您已验证邮箱:${strutil.subStringTo(email.email,0,2)}*****${ strutil.split (email.email,"@")[1]}</span><%}%></div><div id="p_03" class="bubble3"  onmouseout="closediv('p_03')" ><img src="${request.contextPath}/resources/img/bubble.png" onmouseover="showdiv('p_03')"><%if(bank==0){%><span  onmouseover="showdiv('p_03')">您还没有绑定银行卡， <a href="${request.contextPath}/ssl/account/toSetting.htm">立即绑定 </a></span><%}else if(bank.bankCardStatus==2){%><span  onmouseover="showdiv('p_03')">您已绑定银行卡: ${strutil.subStringTo(bank.bankCard,0,3)}***********${strutil.subStringTo(bank.bankCard,bankLength-5,bankLength-1)}</span><%}else if(bank.bankCardStatus==1){%><span  onmouseover="showdiv('p_03')">您绑定银行卡正在认证中</span><%}%></div>

css

/*我的普惠----手机，邮箱，银行卡，鼠标滑动显示气泡*/
.phone_r{position:relative;
}
.phone_r div.bubble1{margin-bottom:10px;display:block;position:absolute;left:30px;bottom:-10px;display:none;
}
.phone_r div.bubble1 img{display:inline-block;width:220px;height:35px;position:relative;
}.phone_r div.bubble1>span{position:absolute;left:-35px;top:20px;color:#666666;
}
.phone_r div.bubble1>span>a{color:#ed345a;
}.phone_r div.bubble2{margin-bottom:10px;display:block;position:absolute;left:62px;bottom:-10px;display:none;
}
.phone_r div.bubble2 img{display:inline-block;width:220px;height:35px;position:relative;
}.phone_r div.bubble2>span{position:absolute;left:-35px;top:20px;color:#666666;
}
.phone_r div.bubble2>span>a{color:#ed345a;
}.phone_r div.bubble3{margin-bottom:10px;display:block;position:absolute;left:95px;bottom:-10px;display:none;
}
.phone_r div.bubble3 img{display:inline-block;width:220px;height:35px;position:relative;
}.phone_r div.bubble3>span{position:absolute;left:-35px;top:20px;color:#666666;
}
.phone_r div.bubble3>span>a{color:#ed345a;
}

js

//显示气泡function showdiv(obj){if(obj==1){$(".bubble1").hide();}else if (obj==2){$(".bubble2").hide();}else if (obj==3){$(".bubble3").hide();}document.getElementById(obj).style.display = "block";}//隐藏气泡function closediv(obj){document.getElementById(obj).style.display = "none";}

字符串转换成数组（例如：2496868487转换成[2],[4]……[7]）

StringbankCard=accountCapitalService.getCustBankByUserId(user.getId()).getBankCard();
char[] arrayBankCard=bankCard.toCharArray();//字符串转换成数组
int bankLength=arrayBankCard.length;

开发前二期的jsp代码

function authInfo(){//实名认证if("${realName.certifiedStatus}"==1){$("#nameMsg").html("您已开通资金托管:"+'${fn:substring(realName.realName,0,1)}**');$("#nameStatus").addClass("card_red");$("#security").html("安全等级：高");}else{$("#nameMsg").html("您未开通资金托管，<a href=\"toSetting.htm?realName\" >立即开通</a>");$("#nameStatus").addClass("red");$("#security").html("安全等级：低");}//手机认证if("${phone.certifiedStatus}"==1){$("#telMsg").html("您已验证手机:"+'${fn:substring(phone.mobile,0,3)}****${fn:substring(phone.mobile,7,-1)}');$("#telStatus").addClass("tel_red");}else{$("#telMsg").html("您还没验证手机，<a href=\"toSetting.htm?mobile\">立即验证</a>");$("#telStatus").addClass("red");}//邮箱认证if("${email.certifiedStatus}"==1){$("#emailMsg").html("您已验证邮箱:"+'${fn:substring(email.email,0,2)}*****${fn:split(email.email,"@")[1]}');$("#emailStatus").addClass("email_red");}else{$("#emailMsg").html("您还没验证邮箱，<a href=\"toSetting.htm?email\" >立即验证</a>");$("#emailStatus").addClass("red");}//银行卡认证if("${bank.bankCardStatus}"==1){$("#bankMsg").html("您绑定银行卡正在认证中");$("#bankStatus").addClass("red");}else if("${bank.bankCardStatus}"==2){$("#bankMsg").html("您已绑定银行卡:"+'${fn:substring(bank.bankCard,0,3)}**********${fn:substring(bank.bankCard,14,-1)}');$("#bankStatus").addClass("bank_red");}else{$("#bankMsg").html("您还没有绑定银行卡，<a href=\"toSetting.htm?bank\" >立即绑定</a>");$("#bankStatus").addClass("red");}
}

个人感受

       思路很重要，有很多细节是需要基础的。比如一些截取字符串subString ,分割字符spilt，这些都是我们学习的基础。不管是js,beetl还是el,jstl，这些都是很核心的东西，学会一个思路，下一个再用的时候变通一下就好啦！