javascript - 在 JQuery Mobile 中,如何在按钮上实现通知编号?

  显示原文与译文双语对照的内容
0 0

我在做一个 JQuery Mobile 应用。 我想将一个通知号添加到定义如下的按钮中。


<a id="resource-button" href="#" data-role="button" data-icon="info" data-iconpos="left">Resources</a> 

基本上我需要它,如果数字是> 0,那么它应该如下所示:

enter image description here

如果它是 0,那么数字 icon 根本不应该显示。

如何实现这里功能?

谢谢

时间: 原作者:

0 0

HTML


<div id="icon">
 <div id="not">3</div>
</div>

CSS


#icon
{
 height:100px;
 width:100px;
 background-color:#bbb;
 position:relative;

}
#not
{
 position:absolute;
 top:-10px;
 right:-10px;
 background-color:#f00;
 width:20px;
 height:20px;
 color:#fff;
 border-radius:20px
 -moz-border-radius:20px;
 -webkit-border-radius:20px;
 text-align:center;
 border:2px solid #fff;

}

jQuery


$(document).ready(function(){
 if($("#not").html()=="0") $("#not").hide(); 
});

附加

原作者:
0 0

首先,你必须在你的数据库中创建行查看帖子,例如我们将它以英镑英镑和英镑的false 值作为示例。

当用户发送新消息时,将它的添加到具有状态 false的数据库中。 这意味着用户已经没有看到消息。
在你的代码中,我们为 <a> 链接添加新属性作为 notification


<a id="resource-button" notification="4" href="#" data-role="button" data-icon="info" data-iconpos="left">Resources</a> 

在这种情况下,我们有 4个新的notificcation用户。

首先我们必须检查通知属性是否存在或者不等于 0,然后我们将发送通知框。


$(document).ready(function() { 

if( $("#resource-button").hasAttr("notification")) { 
 var num = $("#resource-button").val("notification") ; 
 if (num> 0) { 
 $("#number").css("display","block") ; 
 $("#number").text(num); 
 }
}
});

#number的CSS:


 #number { 
height: 18px;
width: 18px;
background: url("../images/notification-bg-clear.png") no-repeat scroll center center #F56C7E;
position: absolute;
right: 5px;
top: -10px;
color: #FFF;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
text-align: center;
font-size: 9px;
line-height: 18px;
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.17) inset, 0px 1px 1px rgba(0, 0, 0, 0.2);
border-radius: 9px;
font-weight: bold;
cursor: pointer;
}

...