Question

我正在使用jQuery Mobile构建移动应用程序，我想在单个导航元素的左上角/右上角实现一个苹果风格的通知图标。

以下网址中图片的某些内容：

http://elephant.merryfull.com/images/mail_icon.jpg

我已经设法使用以下html / css / js

获得基本功能

HTML

<header data-role="header" data-position="fixed">
    <h1>Title</h1>
    <nav data-role="navbar">
    <ul>
      <li><a href="a.html" class="ui-btn-active">link1</a></li>
      <li><a href="b.html" data-icon="check" data-iconpos="top right">link2</a></li>
            <li><a href="c.html">link3</a></li>
            <li>
                <div id="firstBadge" class="badges">
                    <a href="d.html">link4</a>
                </div>
            </li>
            <li><a href="e.html">link5</a></li>
    </ul>
  </nav><!-- /navbar -->
</header><!-- /header -->

CSS

.badge  
{  
   background-image: url(themes/base/images/notiwindow.png);  
   width: 16px;  
   height: 16px;  
   z-index: 20000;
}

的Javascript

(function ($) {
    $.fn.badge = function (action, options) {
        // these are the default options  
        var defaults = {
            top: '-8px',
            left: '-8px',
            cssClass: 'badge'
        };
        return this.each(function () {
            var obj = $(this);
            var eleId = this.id + "-badge";
            // these are the 2 additional options  
            switch (action) {
                case 'toggle':
                    $('#' + eleId).toggle();
                    return;
                case 'hide':
                    $('#' + eleId).hide();
                    return;
            }
            // this merges the passed in settings with the default settings  
            var opts = $.extend({}, defaults, options);
            if (!$("#" + eleId).length) {
                var badge_html = "<div style='position:relative;float:left;'><div id='" + eleId + "' />8</div>";
                obj.prepend(badge_html);
            }
            var badgeEle = $('#' + eleId);
            badgeEle.addClass(opts.cssClass);
            badgeEle.show().css({
                position: 'absolute',
                left: opts.left,
                top: opts.top
            });
            return;
        });
    };
})(jQuery);

$(function () {
    $('.badges').badge();
});

问题不在于通知图标的定位，它应该是应该的。问题是图像的顶部被父元素截断。我尝试设置元素和父元素的索引，以确保它始终位于顶部，但我还没有成功。代码的输出类似于以下URL中的图像：

http://elephant.merryfull.com/images/notification_icon.png

如果有人偶然发现了这个特殊问题并且有一个想要分享的解决方案，那将非常感激。

Answer 1

单独设置z-index对您的案例不会有任何帮助。您必须将徽章定位为absolute，其父元素位于relative。或多或少是这样的：

将nav > ul > li设为position:relative
将.badge设为position:absolute; top:0; left:0; background: url(...) （必要时使用负顶部和左边距）

徽章将叠加在li元素上方，不会被切断。

Answer 2

看看here 。

我在JQM类.ui-li-count上使用了CSS，但您可以创建自己的元素并将其放置在您想要的任何位置。

我还首先使用了背景图片，但这是额外的HTTP请求，所以我只使用CSS做了我的解决方案。

我没有尝试将其附加到普通的JQM导航栏，但它在我的修改版本加上其他一些places上看起来很好。我将其打开。

这是CSS：

.apple-navbar-ui li a .ui-li-count { 
   // setup
   color: #ffffff; 
   right: 0.5em; 
   font-size: 90%; 
   text-shadow: none; 
   font-weight: bold; 
   font-family: arial; 
   // shadow
   -moz-box-shadow: 0 1px 2px #999;  
   -webkit-box-shadow: 0 1px 2px #999; 
   box-shadow: 0 1px 2px #999; 
   padding-bottom: 1px;
   // border
   border: 0.15em solid #ffffff; 
   border-radius: 14px; 
   -moz-border-radius: 14px; 
   -webkit-border-radius: 14px; 
   // background
   background-color: #72b0d4; 
   line-height: 16px; 
   display: inline-block; 
   background-position: 0 0 !important; 
   // position CHANGE TO FIT YOUR NEED
   margin-right: 38%; 
   margin-top: -18px;
   // background gradient
   background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0,#72b0d4),color-stop(1,#4b88b6)); 
   background-image: -webkit-linear-gradient(top, #72b0d4, #4b88b6);
   background-image: linear-gradient(top, #72b0d4, #4b88b6);
   background-image: -moz-linear-gradient(top, #72b0d4, #4b88b6);
   background-image: -o-linear-gradient(top, #72b0d4, #4b88b6);
   background-image: -ms-linear-gradient(top, #72b0d4, #4b88b6);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#72b0d4', EndColorStr='#4b88b6');
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#72b0d4', EndColorStr='#4b88b6')";
   }

jQueryMobile自定义导航

2 个答案: