css - jQueryMobile 自定义导航

Question

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

与以下 URL 中的图像类似的内容:

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;顶部:0；左:0；背景:url(...)(如有必要，使用负的上边距和左边距)

徽章将覆盖在 li 元素之上，并且不会被截断。