Finestra di dialogo dell'interfaccia utente jQuery, aggiunta di elementi accanto a un pulsante

Question

Una delle cose belle della finestra di dialogo dell'interfaccia utente jQuery è che ha un'opzione per i pulsanti, che li posiziona automaticamente correttamente. Mi chiedo solo: posso in qualche modo posizionare gli elementi accanto ai pulsanti? Ho una piccola gif Ajax-Loader che vorrei visualizzare nell'angolo in basso a sinistra della finestra di dialogo, mentre i pulsanti rimangono in basso a destra?

So che posso semplicemente rimuovere i pulsanti e crearli manualmente in HTML, ma poiché jQuery si occupa già del posizionamento e dello stile, mi piacerebbe mantenere questa funzionalità se ha senso.

$("#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

Tutto quello che fondamentalmente dovete fare è

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

di sotto di una versione più elaborata con alcune considerazioni incorporati.

---

immagino #ajax-loader di simile a questo

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

o solo questo

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

JavaScript può apparire così

... 
'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'); 
    } 
}, 
... 

Una nota

• Si dovrebbe chiamare .dialog('destroy') in complete caso di richiesta Ajax altrimenti il ​​dialogo può ottenere distrutto prima che la richiesta ajax finito e l'utente non può nemmeno vedere il "loader".

Answer 2

Che ne dici di inserire lo spinner prima del primo pulsante della finestra di dialogo ui?

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