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; 
} 

자바 스크립트

(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으로 지정해야합니다. 다소간이 같은

• 는 position:absolute; top:0; left:0; background: url(...) 으로 .badge 설정
• position:relative로 nav > ul > li 세트 (네거티브 상단을 사용하고 필요하다면 마진 왼쪽)

이 배지는 다음 li 위에 오버레이 될 요소와 잘리지 않습니다.

Answer 2

보기 here

나는 CSS를 JQM 클래스 .ui-li-count에 사용했지만 자신 만의 요소를 만들고 원하는 곳에 배치 할 수있었습니다.

배경 이미지도 먼저 사용했지만 추가 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')"; 
    }