我正在制作一个jQuery移动应用程序。我想在一个像这样定义的按钮上添加通知数字。
<a id="resource-button" href="#" data-role="button" data-icon="info" data-iconpos="left">Resources</a>
基本上,如果数字大于0,则应该像这样显示:
![enter image description here](https://istack.dev59.com/kreNc.webp)
我正在制作一个jQuery移动应用程序。我想在一个像这样定义的按钮上添加通知数字。
<a id="resource-button" href="#" data-role="button" data-icon="info" data-iconpos="left">Resources</a>
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();
});
Attached Fiddle
//HTML
<ul data-role="listview">
<li><a href="http://www.shreerangpatwardhan.blogspot.com">Spatial Unlimited</a>
<div class="ui-li-count">158</div>
</li>
<li><a href="http://shreerangpatwardhan.blogspot.in/p/code-samples.html">Google Maps API Examples</a>
<div class="ui-li-count">0</div>
</li>
<li><a href="http://shreerangpatwardhan.blogspot.in/p/jquery-mobile.html">Jquery Mobile Examples</a>
<div class="ui-li-count">1</div>
</li>
<li><a href="http://www.facebook.com/SpatialUnlimited">Facebook likes - Spatial Unlimited</a>
<div class="ui-li-count">12</div>
</li>
</ul>
//JS
$(document).ready(function () {
$.each($('.ui-li-count'), function (i, v) {
if($(this).html() == 0) {
$(this).hide();
}
});
});
//html
<span class="ui-li-count ui-btn-corner-all countBubl">12</span>
//css
.countBubl {float:left;margin-top:-42px;margin-left:35px;background:#ed1d24;color:#fff;padding:2px;}
<a id="resource-button" notification="4" href="#" data-role="button" data-icon="info" data-iconpos="left">Resources</a>
在这种情况下,我们为用户提供了4个新通知。
首先,我们必须检查通知属性是否存在或不等于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;
}
<a ... > Resource</a>
是什么意思?你想要实现什么功能?这是图标还是通知数量? - void