jquery dialog save cancel button styling

Question

Sto usando i dialoghi ui jquery nella mia applicazione. Come si impostano i pulsanti "Salva" e "Annulla" in modo diverso in una finestra di dialogo jQuery? Quindi "Salva" è più attraente di "Annulla". Potrei usare un hyper link per "Annulla", ma come lo posiziono nello stesso pannello dei pulsanti?

Answer 1

Ecco come aggiungere classi personalizzate in jQuery UI Dialog (versione 1.8+):

$('#foo').dialog({ 
    'buttons' : { 
     'cancel' : { 
      priority: 'secondary', class: 'foo bar baz', click: function() { 
       ... 
      }, 
     }, 
    } 
}); 

Answer 2

Ho esaminato l'HTML generato dal Dialogo UI. Rende il pannello dei pulsanti in questo modo:

<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix"> 
    <button type="button" class="ui-state-default ui-corner-all">Delete all items in recycle bin</button> 
    <button type="button" class="ui-state-default ui-corner-all different" style="border: 1px solid blue;">Cancel</button> 
</div> 

L'aggiunta di una classe al pulsante Annulla dovrebbe essere semplice.

$ ('. Ui-dialog-buttonpane: last-child'). Css ('background-color', '#ccc');

Ciò renderà il pulsante Annulla poco grigio. Puoi modellare questo pulsante come preferisci.

Sopra il codice presuppone che il pulsante Annulla sia l'ultimo pulsante. Il modo infallibile per farlo sarebbe

$('.ui-dialog-buttonpane :button') 
    .each(
     function() 
     { 
      if($(this).text() == 'Cancel') 
      { 
       //Do your styling with 'this' object. 
      } 
     } 
    ); 

Answer 3

dopo aver guardato some other threads sono arrivato fino a questa soluzione per aggiungere icone per i pulsanti in una finestra di conferma, che sembra funzionare bene in versione 1.8.1 e può essere modificato per fare altro stile:

$("#confirmBox").dialog({ 
    modal:true, 
    autoOpen:false,   
    buttons: { 
     "Save": function() { ... },     
     "Cancel": function() { ... } 
     } 
}); 

var buttons = $('.ui-dialog-buttonpane').children('button'); 
buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon'); 

$(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>"); 
$(buttons[1]).append("<span class='ui-icon ui-icon-close'></span>"); 

sarei interessato a vedere se ci fosse una migliore w a farlo, ma sembra abbastanza efficiente.

Answer 4

Questa funzione aggiungerà una classe a ogni pulsante nella finestra di dialogo. È quindi possibile lo stile (o selezionare con jQuery) come normale:

$('.ui-dialog-buttonpane :button').each(function() { 
    $(this).addClass($(this).text().replace(/\s/g,'')); 
}); 

Answer 5

check out jQuery UI 1.8.5 è disponibile qui http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js e ha il nuovo pulsante per l'attuazione di dialogo ui

Answer 6

Queste soluzioni sono tutto molto bene se si dispone di un solo dialogo con la pagina in qualsiasi momento, se si desidera per lo stile più finestre di dialogo in una sola volta quindi provare:

$("#element").dialog({ 
    buttons: { 
     'Save': function() {}, 
     'Cancel': function() {} 
    } 
}) 
.dialog("widget") 
.find(".ui-dialog-buttonpane button") 
.eq(0).addClass("btnSave").end() 
.eq(1).addClass("btnCancel").end(); 

Invece di selezionare a livello globale pulsanti, questo diventa th L'oggetto widget e trova il riquadro dei pulsanti, quindi individua ogni pulsante singolarmente. Ciò consente di risparmiare molto dolore quando si hanno più finestre di dialogo in una pagina

Answer 7

In jQueryUI 1.8.9 utilizzando className anziché classes funziona.

Answer 8

A partire da jquery ui versione 1.8.16 di seguito è come ho funzionato.

$('#element').dialog({ 
    buttons: { 
     "Save": { 
      text: 'Save', 
      class: 'btn primary', 
      click: function() { 
       // do stuff 
      } 
     } 
}); 

Answer 9

Sto usando jQuery UI 1.8.13 e la seguente configurazione funziona come ho bisogno:

var buttonsConfig = [ 
    { 
     text: "Ok", 
     "class": "ok", 
     click: function() { 
     } 
    }, 
    { 
     text: "Annulla", 
     "class": "cancel", 
     click: function() { 
     } 
    } 
]; 

$("#foo").dialog({ 
    buttons: buttonsConfig 
// ... 

ps: ricordarsi di avvolgere "classe" con le virgolette perché è una parola riservata in js!

Answer 10

E 'stato un po' di tempo da quando questa domanda è stata postata, ma il codice seguente funziona su tutti i browser (nota anche se la risposta di MattPII funziona in FFox e Chrome, genera errori di script in IE).

$('#foo').dialog({ 
    autoOpen: true, 
    buttons: [ 
    { 
     text: 'OK', 
     open: function() { $(this).addClass('b') }, //will append a class called 'b' to the created 'OK' button. 
     click: function() { alert('OK Clicked')} 
    }, 
    { 
     text: "Cancel", 
     click: function() { alert('Cancel Clicked')} 
    } 
    ] 
}); 

Answer 11

ho dovuto usare il seguente costrutto in jQuery UI 1.8.22:

var buttons = $('.ui-dialog-buttonset').children('button'); 
buttons.removeClass().addClass('button'); 

Ciò elimina tutta la formattazione e si applica lo stile di sostituzione, se necessario.
Funziona nella maggior parte dei browser principali.

Answer 12

Ho la versione 1.8.11 di JQuery UI e questo è il mio codice di lavoro. Puoi anche personalizzare la sua altezza e larghezza a seconda delle tue esigenze.

$("#divMain").dialog({ 
    modal:true, 
    autoOpen: false, 
    maxWidth: 500, 
    maxHeight: 300, 
    width: 500, 
    height: 300, 
    title: "Customize Dialog", 
     buttons: { 
      "SAVE": function() { 
       //Add your functionalities here 
      }, 
      "Cancel": function() { 
       $(this).dialog("close"); 
      } 
     }, 
     close: function() {} 
});