jQueryMobile自定义导航 [英] jQueryMobile Custom Navigation

问题描述

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

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.

以下网址中的图片行：

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

我已使用以下html / css / js设置了一些基本功能

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

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.

推荐答案

设置 z-index 单独将不会证明在您的情况下有用。您必须将徽章定位为 absolute ，其父元素位于 relative 。或多或少这样：

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:

• 设置 nav> ul> li 位置：相对


• 设置 .badge as position：absolute; top：0; left：0; background：url（...）
  （如有必要，使用负顶部和左侧边距）

• 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)

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

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

这篇关于jQueryMobile自定义导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！