बटन इनपुट करने के लिए jQuery यूआई बटन आइकन कैसे जोड़ें?

Question

jQuery UI Button icons<input type="submit"> तत्वों के साथ उपयोग करना संभव है?

प्रलेखन उदाहरण <button> तत्वों का उपयोग करता है, लेकिन यह स्पष्ट रूप से यह नहीं कहता कि आइकन इनपुट बटन के साथ काम करते हैं या नहीं। मैं ASP.NET बटन नियंत्रण में आइकन जोड़ना चाहता हूं जो <input type="submit"> के रूप में प्रस्तुत करता है।

यह मैं क्या कोशिश की है है:

$("input.add").button({ icons: { primary: "ui-icon-circle-plus" } }); 

बटन लापता आइकन के लिए छोड़कर सही ढंग से स्टाइल है। क्या मैं कुछ भूल रहा हूँ?

Answer 1

आप इसे सही कर रहे हैं। यह इनपुट तत्वों पर काम नहीं करता प्रतीत होता है। JQuery UI बटन के स्रोत कोड पर एक सरसरी रूप से पता चलता है कि यह आइकन प्राप्त करने वाले तत्व के लिए <span class='ui-button-icon-primary ui-icon " + icons.primary + "'></span> को प्रीपेड करता है लेकिन यह इनपुट तत्वों पर ऐसा प्रतीत नहीं होता है।

वास्तव में थोड़ा करीब देखा। सुनिश्चित नहीं हैं कि मैं यह पहली बार याद किया लेकिन स्रोत निम्नलिखित शामिल हैं:

if (this.type === "input") { 
    if (this.options.label) { 
    this.element.val(this.options.label); 
    } 
    return; 
} 

कौन सा मूल रूप से पहले काल prepended/इनपुट तत्वों पर जोड़ा जाता है बाहर निकलने के लिए कोड बताता है। तो यह डिजाइन द्वारा है।

Answer 2

ब्रैडली माउंटफ़ोर्ड कहता है, सबमिट तत्वों को डिज़ाइन द्वारा आइकन के साथ स्टाइल नहीं किया जाता है (यह डिज़ाइन क्यों है, मुझे कोई जानकारी नहीं है)।

अपना एएसपी बदलें: एक एएसपी बटन: लिंकबटन और सब कुछ दुनिया में सही है। हाँ, यह वास्तव में इतना आसान है।

Answer 3

मेरे समस्या को अधिलेखित किया गया शैलियों, तो यह समाधान मुझे मदद मिली:

$('input.add').each(function(){ 
      $(this).replaceWith('<button class="add" type="' + $(this).attr('type') + '">' + $(this).val() + '</button>'); 
}); 
$('.add').button({ icons: { primary: 'ui-icon-circle-plus' } }); 

Answer 4

मैं इस समाधान के लिए देख रहा हूँ और मैं अपने एक है कि काम करता है सही

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

$(function() { 

    //botoes de login 

    $("#btnLogin").button({ 
      icons: { primary: "ui-icon-key" } 
     }).hide().after('<button>').next().button({ 
      icons: 
      { 
       primary: 'ui-icon-key' 
      }, 
      label: $("#btnLogin").val() 
     }).click(function (event) { 
      event.preventDefault(); 
      $(this).prev().click(); 
     }); 
    $("#close").button({ icons: { primary: "ui-icon-close" } }); 
}); 

पाया वेबफॉर्म

<asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" />