J'utilise des boîtes de dialogue jquery ui dans mon application . Comment attribuer un style différent aux boutons "Enregistrer" et "Annuler" dans une boîte de dialogue jquery? Je pourrais utiliser un hyperlien pour "Annuler", mais comment puis-je le placer dans le même panneau de boutons?
Voici comment ajouter des classes personnalisées dans la boîte de dialogue jQuery UI (version 1.8+):
$('#foo').dialog({
'buttons' : {
'cancel' : {
priority: 'secondary', class: 'foo bar baz', click: function() {
...
},
},
}
});
Dans jQueryUI 1.8.9, utiliser className
au lieu de classes
fonctionne.
$('#element').dialog({
buttons:{
"send":{
text:'Send',
className:'save'
},
"cancel":{
text:'Cancel',
className:'cancel'
}
});
J'utilise jQuery UI 1.8.13 et la configuration suivante fonctionne selon mes besoins:
var buttonsConfig = [
{
text: "Ok",
"class": "ok",
click: function() {
}
},
{
text: "Annulla",
"class": "cancel",
click: function() {
}
}
];
$("#foo").dialog({
buttons: buttonsConfig
// ...
ps: n'oubliez pas d'envelopper "class" avec des guillemets car c'est un mot réservé en js!
Cela fait longtemps que cette question n’a pas été publiée, mais le code suivant fonctionne sur tous les navigateurs (remarque: bien que la réponse de MattPII
fonctionne dans FFox et Chrome, elle génère des erreurs de script dans 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')}
}
]
});
À partir de la version 1.8.16 de jquery ui ci-dessous, voici comment je le fais fonctionner.
$('#element').dialog({
buttons: {
"Save": {
text: 'Save',
class: 'btn primary',
click: function () {
// do stuff
}
}
});
Ces solutions sont très bien si vous n’avez qu’une boîte de dialogue à la fois dans la page, mais si vous souhaitez styliser plusieurs boîtes de dialogue à la fois, essayez:
$("#element").dialog({
buttons: {
'Save': function() {},
'Cancel': function() {}
}
})
.dialog("widget")
.find(".ui-dialog-buttonpane button")
.eq(0).addClass("btnSave").end()
.eq(1).addClass("btnCancel").end();
Au lieu de sélectionner globalement des boutons, l'objet de widget est trouvé et son panneau de boutons est ensuite stylisé individuellement. Cela évite beaucoup de difficultés lorsque vous avez plusieurs boîtes de dialogue sur une page.
après avoir examiné d'autres discussions j'ai proposé cette solution pour ajouter des icônes aux boutons d'une boîte de dialogue de confirmation, qui semble bien fonctionner dans la version 1.8.1 et peut être modifiée pour effectuer un autre style:
$("#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>");
Je serais intéressé de voir s'il y avait une meilleure façon de le faire, mais cela semble assez efficace.
J'ai dû utiliser la construction suivante dans jQuery UI 1.8.22:
var buttons = $('.ui-dialog-buttonset').children('button');
buttons.removeClass().addClass('button');
Cela supprime toute la mise en forme et applique le style de remplacement en fonction des besoins.
Fonctionne dans la plupart des principaux navigateurs.
J'ai la version 1.8.11 de JQuery UI et ceci est mon code de travail. Vous pouvez également personnaliser sa hauteur et sa largeur en fonction de vos besoins.
$("#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 () {}
});
Cette fonction ajoutera une classe à chaque bouton de votre boîte de dialogue. Vous pouvez ensuite styler (ou sélectionner avec jQuery) comme d'habitude:
$('.ui-dialog-buttonpane :button').each(function() {
$(this).addClass($(this).text().replace(/\s/g,''));
});
jetez un oeil à jquery ui 1.8.5 qui est disponible ici http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js et il a le nouveau bouton pour la mise en œuvre de l'interface utilisateur de dialogue