मैं एक मानक jQuery यूआई थीम में एक कस्टम आइकन कैसे जोड़ूं?

Question

यह उपलब्ध आइकनों में से एक मानक चिह्न सेट से उपयोग करने के लिए आसान है:

$("#myButton").button({icons: {primary: "ui-icon-locked"}}); 

लेकिन क्या होगा अगर मैं अपने ही प्रतीक है कि ढांचे आइकन सेट का हिस्सा नहीं है में से एक जोड़ना चाहते हैं?

मैंने सोचा कि यह यह एक पृष्ठभूमि छवि के साथ अपने स्वयं CSS वर्ग देने के रूप में के रूप में आसान होगा, लेकिन वह काम नहीं करता:

.fw-button-edit { 
    background-image: url(edit.png); 
} 

कोई सुझाव?

Answer 1

मैं यह भी अनुशंसा कर सकता है:

.ui-button .ui-icon.your-own-custom-class { 
    background-image: url(your-path-to-normal-image-file.png); 
    width: your-icon-width; 
    height: your-icon-height; 
} 

.ui-button.ui-state-hover .ui-icon.your-own-custom-class { 
    background-image: url(your-path-to-highlighted-image-file.png); 
    width: your-icon-width; 
    height: your-icon-height; 
} 

तो बस जे एस कोड में टाइप करें:

 jQuery('selector-to-your-button').button({ 
     text: false, 
     icons: { 
      primary: "you-own-cusom-class" // Custom icon 
     }}); 

यह मेरे लिए काम किया है और आशा है कि यह आप के लिए काम करता है भी!

Answer 2

मुझे विश्वास है कि उसका काम क्यों नहीं करेगा क्योंकि आप आइकन की background-image संपत्ति को jQuery UI डिफ़ॉल्ट स्प्राइट आइकन पृष्ठभूमि छवि द्वारा ओवरराइड किया जा रहा है। सवाल में शैली है:

.ui-state-default .ui-icon { 
    background-image: url("images/ui-icons_888888_256x240.png"); 
} 

यह आपके .fw-button-edit चयनकर्ता की तुलना में अधिक विशिष्टता है, इस प्रकार पृष्ठभूमि छवि proerty अधिभावी। चूंकि वे sprites का उपयोग करते हैं, .ui-icon-locked नियमसेट में केवल background-position स्प्राइट छवि की स्थिति प्राप्त करने के लिए आवश्यक है। मेरा मानना ​​है कि इसका उपयोग करने पर काम होगा:

.ui-button .ui-icon.fw-button-edit { 
    background-image: url(edit.png); 
} 

या पर्याप्त विशिष्टता वाले कुछ और। सीएसएस विशिष्टता के बारे में यहाँ और अधिक जानकारी प्राप्त: http://reference.sitepoint.com/css/specificity

Answer 3

यह यी जियांग और ऊपर Panayiotis द्वारा प्रदान की जानकारी पर आधारित है, और jquery ui button sample code:

जैसा कि मैंने पहले के एक JSP अनुप्रयोग है कि प्रति बटन छवियों के साथ एक उपकरण पट्टी था पलायन हुआ था, मैं अंदर छवि है चाहता था प्रत्येक टूलबार बटन के लिए एक अलग वर्ग बनाने के बजाय बटन घोषणा स्वयं।

<div id="toolbarDocs" class="tableCaptionBox"> 
    <strong>Checked Item Actions: </strong> 

    <button id="btnOpenDocs" data-img="<s:url value="/images/multi.png"/>">Open Documents</button> 
    <button id="btnEmailDocs" data-img="<s:url value="/images/email.png"/>">Attach to Email</button> 
</div> 

बेशक उपरोक्त दोनों की तुलना में बहुत अधिक बटन थे। ऊपर रों टैग एक struts2 टैग है, लेकिन आप बस किसी भी यूआरएल

 <button id="btnOpenDocs" data-img="/images/multi.png">Open Documents</button> 

नीचे स्क्रिप्ट बटन टैग से विशेषता डेटा-img के लिए लग रहा है, और फिर सेट है कि के लिए पृष्ठभूमि छवि के रूप से बदलने सकता है बटन।

यह अस्थायी रूप से यूई-आइकन-बुलेट (किसी भी मनमानी मौजूदा शैली) को सेट करता है जो बाद में बदल जाता है।

यह कक्षा अस्थायी शैली को परिभाषित करती है (यदि आप इसका उपयोग करने की योजना बना रहे हैं तो विशिष्ट टूलबार के लिए और चयनकर्ताओं को बेहतर जोड़ने के लिए बेहतर है, ताकि आपका शेष पृष्ठ अप्रभावित रहे)।

button.ui-button .ui-icon { 
    background-image: url(blank.png); 
    width: 0; 
    height: 0; 
} 

और निम्नलिखित जावास्क्रिप्ट: वास्तविक छवि नीचे जावास्क्रिप्ट द्वारा प्रतिस्थापित किया जाएगा

$(document).ready(function() { 
    $("#toolbarDocs button").each(
      function() { 
      $(this).button(
       { text: $(this).attr('data-img').length === 0? true: false, // display label for no image 
       icons: { primary: "ui-icon-bullet" } 
       }).css('background-image', "url(" + $(this).attr('data-img') +")") 
       .css('background-repeat', 'no-repeat'); 
      }); 
    }); 

Answer 4

JQuery यूआई के लिए कस्टम चिह्न जोड़ने के लिए मेरे समाधान (स्प्राइट का उपयोग करके):

सीएसएस:

.icon-example { 
    background-position: 0 0; 
} 

.ui-state-default .ui-icon.custom { 
    background-image: url(icons.png); 
} 

.icon-example कस्टम आइकन फ़ाइल में आइकन की स्थिति को परिभाषित करता है। .ui-icon.custom कस्टम आइकन के साथ फ़ाइल को परिभाषित करता है।

नोट: आपको अन्य JQuery UI कक्षाएं (जैसे .ui-state-hover) को परिभाषित करने की आवश्यकता हो सकती है।

जावास्क्रिप्ट:

$("selector").button({ 
    icons: { primary: "custom icon-example" } 
}); 

Answer 5

बिल्डिंग msanjay जवाब पर मैं इस विस्तारित रूप में अच्छी तरह दोनों jQuery ui बटन और रेडियो बटन के लिए कस्टम आइकन के लिए काम करने के लिए:

<div id="toolbar"> 
    <button id="btn1" data-img="/images/bla1.png">X</button> 
    <span id="radioBtns"> 
     <input type="radio" id="radio1" name="radName" data-mode="scroll" data-img="Images/bla2.png"><label for="radio1">S</label> 
     <input type="radio" id="radio2" name="radName" data-mode="pan" data-img="Images/bla3.png"><label for="radio2">P</label> 
    </span> 
</div>  

$('#btn1').button(); 
$('#radioBtns').buttonset(); 

loadIconsOnButtons('toolbar'); 

function loadIconsOnButtons(divName) { 
    $("#" + divName + " input,#" + divName + " button").each(function() { 
     var iconUrl = $(this).attr('data-img'); 
     if (iconUrl) { 
     $(this).button({ 
      text: false, 
      icons: { 
      primary: "ui-icon-blank" 
      } 
     }); 
     var imageElem, htmlType = $(this).prop('tagName'); 
     if (htmlType==='BUTTON') imageElem=$(this); 
     if (htmlType==='INPUT') imageElem=$("#" + divName + " [for='" + $(this).attr('id') + "']"); 
     if (imageElem) imageElem.css('background-image', "url(" + iconUrl + ")").css('background-repeat', 'no-repeat'); 
     } 
    }); 
} 

Answer 6

// HTML 

<div id="radioSet" style="margin-top:4px; margin-left:130px;" class="radio"> 
     <input type="radio" id="apple" name="radioSet" value="1"><label for="apple">Apple</label> 
     <input type="radio" id="mango" name="radioSet" value="2"><label for="mango">Mango</label> 
</div> 


// JQUERY 

// Function to remove the old default Jquery UI Span and add our custom image tag 

    function AddIconToJQueryUIButton(controlForId) 
    { 
     $("label[for='"+ controlForId + "'] > span:first").remove(); 
     $("label[for='"+ controlForId + "']") 
     .prepend("<img position='fixed' class='ui-button-icon-primary ui-icon' src='/assets/images/" + controlForId + ".png' style=' height: 16px; width: 16px;' />"); 

    } 

// We have to call the custom setting to happen after document loads so that Jquery UI controls will be there in place 

    // Set icons on buttons. pass ids of radio buttons 
    $(document).ready(function() { 
       AddIconToJQueryUIButton('apple'); 
       AddIconToJQueryUIButton('mango'); 
    }); 

    // call Jquery UI api to set the default icon and later you can change it   
    $("#apple").button({ icons: { primary: "ui-icon-gear", secondary: null } }); 
    $("#mango").button({ icons: { primary: "ui-icon-gear", secondary: null } }); 

Answer 7

इस पर समाधान लिंक मेरे लिए बहुत अच्छा काम करता है: http://www.jquerybyexample.net/2012/09/how-to-assign-custom-image-to-jquery-ui-button.html

$(document).ready(function() { 
    $("#btnClose") 
    .text("") 
    .append("<img height="100" src="logo.png" width="100" />") 
    .button(); 
});​ 

Answer 8

सीएसएस

.ui-button .ui-icon.custom-class { 
    background-image: url(your-path-to-normal-image-file.png); 
    width: your-icon-width; 
    height: your-icon-height; 
} 

.ui-state-active .ui-icon.custom-class, .ui-button:active .ui-icon.custom-class { 
    background-image: url(your-path-to-highlighted-image-file.png); 
    width: your-icon-width; 
    height: your-icon-height; 
} 

में HTML

<button type="button" class="ui-button ui-widget ui-corner-all"> 
    <span class="custom-class"></span> CAPTION TEXT 
</button> 

में जावास्क्रिप्ट

$("selector").button({ 
    icons: { primary: "custom-class" } 
});