jQuery मोबाइल आइकन गिनती बैज/बुलबुले

Question

jQuery मोबाइल में आइकन (डेटा-आइकन) के शीर्ष पर गिनती बबल या बैज कैसे जोड़ें। क्या सीएसएस के साथ छेड़छाड़ करने के बजाय इसे विजेट के रूप में जोड़ने का कोई बेहतर तरीका है? मैं उम्मीद करता हूं कि गिनती सर्वर से गतिशील रूप से अपडेट की जाएगी।

Answer 1

HTML:

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

सीएसएस:

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

एचटीएमएल अपनी छवि टैग के बगल में पेस्ट करें। "आप आइकन आकार के आधार पर मार्जिन-टॉप & मार्जिन-बाएं समायोजित कर सकते हैं। मुझे लगता है कि यह काम कर सकता है"। धन्यवाद।

Answer 2

यहाँ एक बैज आइकन के अपने संस्करण आसानी से सीएसएस द्वारा tweakable है, (यह border-radius समर्थन मान लिया गया):

.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 में यह कर रहा हूँ, का एक सरल उदाहरण है। यहाँ एक टैब के लिए मार्कअप का एक उदाहरण है, बिल्ला span मुझे लगता है कि इसके बाद के संस्करण शैलियों का उपयोग करता है जोड़ा सहित:

<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 में होना चाहिए। मैं जैसा कि ऊपर देखा माता पिता li इस मामले में युक्त तत्व में जोड़ने के लिए, एक साधारण श्रेणी का निर्माण:

और यहाँ एक fiddle है, थोड़ा:

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

यहाँ यह क्या लग रहा है की तरह है एक स्थिर उदाहरण के रूप में काम करने के लिए संशोधित।