Applica CSS ai pulsanti di dialogo jQuery

Quindi attualmente ho una finestra di dialogo jQuery con due pulsanti: Salva e chiudi. Creo la finestra di dialogo utilizzando il seguente codice:

$dialogDiv.dialog({ autoOpen: false, modal: true, width: 600, resizable: false, buttons: { Cancel: function() { // Cancel code here }, 'Save': function() { // Save code here } }, close: function() { // Close code here (incidentally, same as Cancel code) } }); 

Tuttavia, entrambi i pulsanti sono dello stesso colore quando viene utilizzato questo codice. Mi piacerebbe che il mio pulsante Annulla fosse di un colore diverso dal mio Salva. C’è un modo per farlo usando alcune opzioni jQuery integrate? Non ho avuto molto aiuto dalla documentazione.

Tieni presente che il pulsante Annulla che sto creando è un tipo predefinito, ma “Salva” sto definendo me stesso. Non sono sicuro se questo avrà qualche relazione con il problema.

Qualsiasi aiuto sarebbe apprezzato. Grazie.

AGGIORNAMENTO: il consenso era che c’erano due strade da percorrere qui:

  1. Ispeziona l’HTML usando un plug-in di Firefox come firebug e osserva le classi CSS che jQuery applica ai pulsanti e prendi una pugnalata per ignorarle. Nota: nel mio HTML, entrambi i pulsanti sono stati utilizzati esattamente le stesse classi CSS e nessun ID univoco, quindi questa opzione era fuori.
  2. Usa un selettore jQuery nella finestra di dialogo aperta per prendere il pulsante che volevo e aggiungi una class CSS.

Sono andato con la seconda opzione, e ho usato il metodo jQuery find () perché penso che sia più appropriato dell’uso: first o: first-child b / c il pulsante che volevo cambiare non era necessariamente il primo pulsante elencato in il markup. Utilizzando find, posso solo specificare il nome del pulsante e aggiungere CSS in questo modo. Il codice che ho trovato è il seguente:

 $dialogDiv.dialog({ autoOpen: false, modal: true, width: 600, resizable: false, buttons: { Cancel: function() { // Cancel code here }, 'Save': function() { // Save code here } }, open: function() { $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButtonClass'); } close: function() { // Close code here (incidentally, same as Cancel code) } }); 

Sto ripubblicando la mia risposta a una domanda simile perché nessuno sembra averlo dato qui ed è molto più pulito e ordinato:

Utilizza la syntax delle proprietà dei buttons alternativi:

 $dialogDiv.dialog({ autoOpen: false, modal: true, width: 600, resizable: false, buttons: [ { text: "Cancel", "class": 'cancelButtonClass', click: function() { // Cancel code here } }, { text: "Save", "class": 'saveButtonClass', click: function() { // Save code here } } ], close: function() { // Close code here (incidentally, same as Cancel code) } }); 

È ansible utilizzare il gestore eventi aperto per applicare uno stile aggiuntivo:

  open: function(event) { $('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton'); } 

Penso che ci siano due modi in cui puoi gestirlo:

  1. Controlla usando qualcosa come firebug se c’è una differenza (in class, id, ecc.) Tra i due pulsanti e usalo per indirizzare il pulsante specifico
  2. Usa qualcosa come: first-child per selezionare ad esempio il primo pulsante e uno stile diverso

Quando guardo il sorgente con firebug per una delle mie windows di dialogo, si presenta qualcosa del tipo:

 

Così potrei ad esempio indirizzare il pulsante Send aggiungendo alcuni stili a .ui-state-focus (con forse alcuni selettori aggiuntivi per assicurarmi di sovrascrivere gli stili di jquery).

A proposito, per la seconda volta opterei per la seconda opzione per evitare problemi quando il focus cambia …

Dovresti cambiare la parola “className” per “class”

 buttons: [ { text: "Cancel", class: 'ui-state-default2', click: function() { $(this).dialog("close"); } } ], 

Forse qualcosa del genere?

 $('.ui-state-default:first').addClass('classForCancelButton'); 

Seleziona il div con la finestra di dialogo dei ruoli, quindi prendi i pulsanti appropriati e imposta il CSS.

 $("div[role=dialog] button:contains('Save')").css("color", "green"); $("div[role=dialog] button:contains('Cancel')").css("color", "red"); 

C’è anche una semplice risposta per la definizione di stili specifici che verranno applicati solo a quel pulsante specifico e si può avere Jquery dichiarare lo stile dell’elemento quando si dichiara la finestra di dialogo:

 id: "button-delete", text: "Delete", style: "display: none;", click: function () {} 

dopo averlo fatto ecco cosa mostra l’html: inserisci la descrizione dell'immagine qui

questo ti permette di impostarlo, ma non è necessariamente facile cambiare usando jquery in seguito.

Perché non ispezionare solo il markup generato, annotare la class sul pulsante di scelta e metterla in pratica da solo?

Ti suggerisco di dare un’occhiata all’HTML che il codice sputa e vedere se c’è un modo per identificare in modo univoco (o entrambi) i pulsanti (possibilmente l’id o gli attributi del nome), quindi usare jQuery per selezionare quell’elemento e applicare un class css ad esso.

Se ancora noti che stai lavorando per te aggiungi i seguenti stili sul foglio di stile della tua pagina

 .ui-widget-content .ui-state-default { border: 0px solid #d3d3d3; background: #00ACD6 50% 50% repeat-x; font-weight: normal; color: #fff; } 

Cambierà il colore di sfondo dei pulsanti di dialogo.