dialogue jquery enregistrer un bouton Annuler le style

Question

J'utilise des boîtes de dialogue ui jquery dans ma demande. Comment puis-je le style de la « Save » et les boutons « cancel » différemment dans une boîte de dialogue de jquery? Donc, « Enregistrer » est plus attrayante que le « Annuler ». Je pourrais utiliser un lien hypertexte pour « Annuler », mais comment dois-je placer que dans le même panneau de bouton?

Answer 1

Voici comment ajouter des classes personnalisées dans jQuery UI Dialog (version 1.8 +):

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

Answer 2

Dans jQueryUI 1.8.9 en utilisant className plutôt que des œuvres de classes.

$('#element').dialog({
  buttons:{
    "send":{
      text:'Send',
      className:'save'
    },
    "cancel":{
      text:'Cancel',
      className:'cancel'
    }
  });

Answer 3

J'utilise jQuery UI 1.8.13 et la configuration suivante fonctionne comme j'ai besoin:

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

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

ps: n'oubliez pas envelopper "classe" avec des guillemets parce que c'est un mot réservé dans js

Answer 4

Il a été un moment depuis que cette question a été publiée, mais le code suivant fonctionne sur tous les navigateurs (notez bien que la réponse de MattPII travaille dans FFox et Chrome, il renvoie 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')}
    }
  ]
});

Answer 5

de jquery version 1.8.16 ci-dessous est ui comment je l'ai eu de travail.

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

Answer 6

Ces solutions sont très bien si vous avez seulement un dialogue sur la page à un moment donné, si vous voulez le style de 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 boutons sélection globalement, cela devient l'objet widget et trouve son volet bouton, puis styles individuellement chaque bouton. Cela permet d'économiser de la douleur de beaucoup de lorsque vous avez plusieurs boîtes de dialogue sur une page

Answer 7

après avoir regardé quelques autres threads Je suis arrivé avec cette solution pour ajouter des icônes aux boutons dans une boîte de dialogue de confirmation, ce qui semble bien fonctionner dans la version 1.8.1 et peut être modifiée pour faire 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é à voir s'il y avait une meilleure façon de le faire, mais cela semble assez efficace.

Answer 8

Je devais utiliser la construction suivante dans jQuery UI 08/01/22:

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

Cela supprime la mise en forme et applique le style de remplacement au besoin.
Fonctionne dans la plupart des principaux navigateurs.

Answer 9

Cette fonction ajoutera une classe à chaque bouton dans la boîte de dialogue vous. Vous pouvez ensuite le style (ou sélectionnez avec jQuery) comme normal:

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

Answer 10

J'ai JQuery UI la version 1.8.11 et c'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 () {}
});

Answer 11

vérifier ui jquery 1.8.5 il est disponible ici http://ajax.googleapis.com/ajax/ libs / jQueryUI / 1.8.5 / jquery-ui.js et il a le nouveau bouton de dialogue mise en œuvre ui

Answer 12

Je regardais le code HTML généré par l'interface utilisateur de dialogue. Il rend volet boutons comme ceci:

<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>

Ajout d'une classe à bouton Annuler devrait être facile.

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

Cela rendra le bouton Annuler peu gris. Vous pouvez définir le style ce bouton comme bon vous semble.

code ci-dessus suppose que le bouton Annuler est le dernier bouton. Le fou ainsi la preuve de le faire serait

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