jQueryMobileカスタムナビゲーション

Question

jQuery Mobileを使用してモバイルアプリケーションを構築しています。単一のナビゲーション要素の左上/右隅にリンゴスタイルの通知アイコンを実装したいと考えています。

次のURLにある画像の線に沿って

何か：私は、次のHTMLを使用して、基本的な何かを得ることができた

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

/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に設定する必要があります。多かれ少なかれこのような：バッジは、次にli上にオーバーレイする

（必要に応じて負の上部と左余白を使用） position:absolute; top:0; left:0; background: url(...)としてposition:relative

は.badgeセットとして

• nav > ul > liを設定します要素は切り取られません。

Answer 2

hereをご覧ください。

私はJQMクラス.ui-li-countでCSSを使用しましたが、独自の要素を作成していつでも自由に配置することができます。

私は背景画像を最初に使用しましたが、それは余分なHTTP要求です。そのため、私は自分のソリューションをCSSだけで行いました。

これを通常のJQM navbarに追加しようとはしませんでしたが、変更されたバージョンと他のいくつかの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')"; 
    }