如何在jquery mobile上的按钮中实现通知数字？

Question

如何在jquery mobile上的按钮中实现通知数字？

4

我正在制作一个jQuery移动应用程序。我想在一个像这样定义的按钮上添加通知数字。

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

基本上，如果数字大于0，则应该像这样显示： enter image description here

如果数字等于0，则不应该显示数字图标。如何实现这个功能？谢谢。

- omega

3个回答

1

http://jsfiddle.net/gwqn2eqa/

//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();
        }
    });
});

没有ListView：

//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;}

- lv0gun9

这很不错。有没有一种方法可以在不将其放入列表视图中的情况下完成它？ - omega

我该如何在按钮标签中添加 countBubl？ - omega

0

首先，您必须在数据库中创建行以检查帖子是否被查看，例如我们将其命名为状态（status），并且具有真（true）和假（false）两个值。

当用户发送新消息时，您将其添加到数据库中，并将状态设置为false。这意味着用户尚未查看该消息。
在您的代码中，我们为链接<a>添加了一个新属性，即通知（notification）。

<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;
}

- Pedram marandi

这个硬编码了图标的某些位置。jQuery Mobile 根据屏幕大小/密度调整按钮大小。这个有考虑到吗？ - omega

你可以使用CSS来显示通知，你可以用这段代码做任何你需要做的事情。 - Pedram marandi

@omega 你也可以使用JQuery Mobile按钮。 - Pedram marandi

你没有真正回答我的问题。看起来你是在固定某个维度的位置。我想要的是，在按钮任何尺寸大小时都能够工作。 - omega

我正在使用jQuery Mobile按钮。我只想自定义一个按钮，在其顶部动态添加一个数字。 - omega

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- void · Accepted Answer

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