jQueryMobile自定義導航

Question

我建立使用jQuery Mobile和我想實現在一個單一的導航元素的左上角/右上角的蘋果風格通知圖標的移動應用程序。

沿着圖像的行

東西在以下網址：

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

看一看here。

我已經用在JQM類.ui-li-count的CSS，但你可以創建自己的元素，並把它徘徊無論你想要的。

我還使用了背景圖片第一，但這是額外的HTTP請求，所以我只用CSS我的解決辦法做了。

我還沒有試圖將其添加到普通的JQM導航欄，但它看起來不錯，在我的修改版本加上其他一些places我摘下它。

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