jQueryMobile Custom Navigation

问题

I'm building a mobile application using jQuery Mobile and I would like to implement an apple style notification icon in the top left/right corner of a single navigational element.

Something along the lines of the image in the following URL:

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

I've managed to get something basic using the following 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();
});

The problem isn't with the positioning of the notification icon, it appears as it should. The problem is that the top of the image is cut off by the parent element. I've try setting the index of both the element and the parent to ensure that it always sits on top, but I've had no success as yet. The output of the code looks like the image in the following URL:

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

If anyone has stumbled on this particular problem and has a solution that would like to share, it would be greatly appreciated.

回答1:

setting a z-index alone will not prove any useful in your case. You would have to position the badge as absolute with its parent element positioned relative. More or less like this:

set nav > ul > li as position:relative
set .badge as position:absolute; top:0; left:0; background: url(...) (use a negative top and left margin if necessary)

the badge will then be overlayed above the li element and will not be cut off.

回答2:

Have a look here .

I have used the CSS on the JQM class .ui-li-count but you could create your own element and place it whereever you want.

I also used a background image first, but that's extra HTTP request, so I did my solution using CSS only.

I have not tried to append this to a normal JQM navbar, but it looks good on my modified version plus some other places I plucked it on.

Here is the 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')";
   }

来源：https://stackoverflow.com/questions/7885160/jquerymobile-custom-navigation

标签

css

html5

user-interface

jquery-mobile