les boutons de dialogue jQuery Ui, comment ajouter une classe?
j'ai trouvé cette réponse sur un autre fil..
comment ajouter plusieurs boutons dans la boîte de dialogue jQuery UI?
en utilisant cette syntaxe, comment ajouter de la classe à un bouton particulier?
$("#mydialog").dialog({
buttons: {
'Confirm': function() {
//do something
$(this).dialog('close');
},
'Cancel': function() {
$(this).dialog('close');
}
}
});
5 réponses
il ne semble pas qu'il y ait une bonne façon de faire cela via L'API, cependant vous pouvez ajouter les classes dans un gestionnaire d'événements pour create :
$("#dialog").dialog({
buttons: {
'Confirm': function() {
//do something
$(this).dialog('close');
},
'Cancel': function() {
$(this).dialog('close');
}
},
create:function () {
$(this).closest(".ui-dialog")
.find(".ui-button:first") // the first button
.addClass("custom");
}
});
si vous voulez le deuxième bouton, vous pouvez utiliser:
$(this).closest(".ui-dialog").find(".ui-button").eq(1).addClass("custom") // The second button
la clé est la $(this).closest(".ui-dialog").find(".ui-button") , qui sélectionnera les boutons de votre boîte de dialogue. Après cela, vous pouvez appliquer n'importe quel sélecteur que vous voulez (y compris :contains(...) qui pourrait être utile si vous voulez sélectionnez un bouton en fonction de son texte au lieu de son ordre).
voici un exemple: http://jsfiddle.net/jjdtG /
notez Également que le sélecteur CSS pour le style(s) que vous souhaitez appliquer doit être plus précis que jQueryUI intégré de sélecteurs pour le style à appliquer.
vous pouvez ajouter la classe au bouton dans Dialog...by
$('#mydialog').dialog({
buttons:{
"send":{
text:'Send',
'class':'save'
},
"cancel":{
text:'Cancel',
'class':'cancel'
}
});
je pense que ça va marcher pour vous. et vous pouvez trouver plus de réponses ici .
j'Espère que ça aidera !
$("#mydialog").dialog({
buttons: {
'Confirm': function() {
//do something
$(this).dialog('close');
},
"Cancel": {
click: function () {
$(this).dialog("close");
},
text: 'Cancel',
class: 'custom-class'
}
}
});
utiliser le gestionnaire d'événements ouvert:
open: function(event) {
$('.ui-dialog-buttonpane').find('button:contains("Cancel")').addClass('cancelButton');
}
Propre, simple morceau de gâteau!
Thanks to LintonB, you can add all of the property attached to a button like style, id, etc...
dialog_options.buttons = {
'Modify': {
click: function() {
$(this).dialog('close');
if (inputs.phone !== '') {
inputs.phone.focus();
inputs.phone[0].value="";
}
},
class: 'btn btn-labeled btn-warning',
style: 'margin-right: 30px;',
id: 'modificationId'
},
'Keep': {
click: function() {
$(this).dialog('close');
_this.validatePhone(i);
},
class: 'btn btn-labeled btn-warning',
id: 'conserverId'
}
};