jQuery UI संवाद, बटन के बगल में तत्व

Question

jQuery UI संवाद के बारे में अच्छी चीजों में से एक यह है कि इसमें बटन के लिए एक विकल्प है, जो स्वचालित रूप से उन्हें सही ढंग से स्थान देता है। मुझे आश्चर्य है: क्या मैं किसी भी तरह बटन के बगल में तत्व रख सकता हूं? मेरे पास थोड़ा अजाक्स-लोडर gif है जो मैं संवाद के निचले बाएं कोने में प्रदर्शित करना चाहता हूं, जबकि बटन निचले दाएं भाग पर रहते हैं?

मुझे पता है कि मैं सिर्फ बटन को हटा सकता हूं और उन्हें मैन्युअल रूप से HTML में बना सकता हूं, लेकिन जैसा कि jQuery पहले से ही मेरे लिए स्थिति और स्टाइलिंग का ख्याल रखता है, मैं समझ में आता हूं तो मैं उस कार्यक्षमता को रखना चाहता हूं।

$("#newProjectDialog").dialog({ 
     bgiframe: true, 
     resizable: false, 
     width: 400, 
     modal: true, 
     overlay: { 
      backgroundColor: '#000', 
      opacity: 0.5 
     }, 
     buttons: { 
      'Create': function() { 
       $("#ajax-loader").show(); 
       // Make the Ajax Call and whatever else is needed 
       $(this).dialog('destroy'); 
      }, 
      Cancel: function() { 
       $(this).dialog('destroy'); 
      } 
     } 
    }); 

Answer 1

आप सभी मूल रूप से करने की जरूरत है

//depending on what #ajax-loader is you maybe need to style it (float:left, ...) 
$("#ajax-loader").clone(true).appendTo("div.ui-dialog-buttonpane").show(); 

शामिल कुछ मान्यताएं के साथ एक अधिक सजावटी संस्करण नीचे है।

---

मैं #ajax-loader कल्पना इस

<div id='ajax-loader'><img src='loader.gif' /><span>loading...</span></div> 

या सिर्फ इस

<img id='ajax-loader' src='loader.gif' /> 

जावास्क्रिप्ट के समान दिखाई करने के लिए इस

... 
'Create': function() { 
    var btnpane = $("div.ui-dialog-buttonpane"); 
    //prevent bad things if create is clicked multiple times 
    var there = btnpane.find("#ajax-loader").size() > 0; 
    if(!there) { 
     $("#ajax-loader").clone(true).appendTo(btnpane).show(); 
     // Make the Ajax Call and whatever else is needed 
     // if ajax call fails maybe add $("#ajax-loader", btnpane).remove(); 
     $(this).dialog('destroy'); 
    } 
}, 
... 

एक नोट

की तरह लग सकता है पहले ajax अनुरोध समाप्त

• आपसे किसी और संवाद ajax अनुरोध के complete घटना में .dialog('destroy') बुलाना चाहिए नष्ट हो सकता है और उपयोगकर्ता यहाँ तक कि "लोडर" नहीं दिखाई देगी।

Answer 2

पहले यूई-संवाद-बटन से पहले अपने स्पिनर को कैसे डालने के बारे में?

buttons: { 
    'Create' : function() { 
     $('<img src="spinner.gif" style="float: left;" />').insertBefore('.ui-dialog-buttonpane > button:first'); 
     ...ajax stuff... 
     $(this).dialog('destroy'); 
    } 
}