jQuery 모바일 아이콘 카운트 배지/거품

jQuery 모바일의 아이콘 (데이터 아이콘) 위에 카운트 버블이나 배지를 추가하는 방법. CSS로 조작하는 대신 위젯으로 추가하는 더 좋은 방법이 있습니까? 나는 그 카운트가 서버에서 동적으로 업데이트 될 것으로 기대한다.jQuery 모바일 아이콘 카운트 배지/거품

출처

2012-08-01 ManKum

HTML :

<span class="ui-li-count ui-btn-corner-all countBubl">12</span>

CSS :

.countBubl {float:left;margin-top:-42px;margin-left:35px;background:#ed1d24;color:#fff;padding:2px;}

이 이미지 태그 옆에 HTML을 붙여 넣습니다. "여백 - 상단에 & 여백을 조정할 수 있습니다. 아이콘이 제대로 작동한다고 생각됩니다." 감사합니다. .

출처

2012-10-05 07:05:22

여기 (이 border-radius 지원을 가정), CSS로 쉽게 tweakable 배지 아이콘의 내 버전입니다 :

.my-badge { 
    display: none; 
    background: #BA070F; 
    color: #fff; 
    padding: 1px 7px; 
    position: absolute; 
    right: 4px; 
    top: -12px; 
    z-index: 999; 
    border-radius: .8em; 
    border: 2px solid #fff; 
}

그것은 기본 (display: none)에 의해 숨겨진, 숨겨진/표시되어야 카운트 프로그래밍 방식으로 업데이트 필요합니다.

$('#badge-page1').html(++badgeCount).fadeIn();

내가 순서없는 목록을 기반으로 jQuery를 모바일 Navbar의 사용하기 위해 이런 짓을 : 여기 YMMV, jQuery를에하고 있어요 방법에 대한 간단한 예입니다. 배지가 위치 절대 것을

가

<li class="ui-badge-container"> 
    <span id="badge-page1" class="my-badge"></span> 
    <a href="#page-tab1" data-role="tab">Tab 1</a> 
</li>

주, 그래서 position: relative있는 용기에 있어야합니다 : 여기에 내가 그 위의 스타일을 사용하여 추가 배지 span을 포함하여, 하나 개의 탭에 대한 마크 업의 예입니다. fiddle의 여기

enter image description here

그리고 약간 :

여기

.ui-badge-container { 
    position: relative; 
}

는 것 같습니다 무엇 : 위에서 본대로 나는이 경우, 포함하는 요소에 부모 li을 추가하는 간단한 클래스를 생성 정적 예제로 작동하도록 수정되었습니다.

출처

2013-06-03 23:13:52

길 청소 및 간단한 솔루션,이 대답해야합니다. 부트 스트랩과 함께 클래스 이름'badge'를 사용하면 약간의 효과가 있음을 알아 두십시오. 그것을 명심하십시오. –

@CesarBielich 멋진 점 - 충돌을 피하기 위해 예제를 업데이트했습니다. 감사! –

jQuery 모바일 아이콘 카운트 배지/거품

답변

관련 문제