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; top:0; left:0; background: url(...) (при необходимости используйте отрицательный верхний и левый поля)

значок будет наложен на элемент li и не будет обрезан.

Answer 2

Посмотрите здесь .

Я использовал CSS в классе JQM .ui-li-count, но вы можете создать свой собственный элемент и разместить его там, где вы хотите.

Сначала я также использовал фоновое изображение, но это дополнительный 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')";
   }