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。或多或少像这样：

• set nav > ul> li as position:relative
• 将 .badge 设置为 position:absolute;顶部：0；左：0；背景：url(...)
  （如有必要，请使用负的上边距和左边距）

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

Answer 2

看看这里。

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

我还首先使用了背景图像，但这是额外的 HTTP 请求，因此我仅使用 CSS 完成了我的解决方案。

我没有尝试将其附加到普通的 JQM 导航栏，但它在我的修改版本加上其他一些 我把它拨到的地方。

这是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')";
   }