example - el diálogo jquery save cancel button styling

jquery ui dialog example

Question

Estoy usando los cuadros de diálogo jquery ui en mi aplicación. ¿Cómo doy estilo a los botones "Guardar" y "Cancelar" de forma diferente en un diálogo de jquery? Entonces, "Guardar" es más atractivo que "Cancelar". Podría usar un hiperenlace para "Cancelar", pero ¿cómo lo coloco en el mismo panel de botones?

Answer 1

A continuación se detalla cómo agregar clases personalizadas en el diálogo de jQuery UI (versión 1.8+):

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

Answer 2

A partir de jquery ui versión 1.8.16 a continuación es cómo lo conseguí trabajando.

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

Answer 3

Después de mirar otros hilos, se me ocurrió esta solución para agregar íconos a los botones en un cuadro de diálogo de confirmación, que parece funcionar bien en la versión 1.8.1 y se puede modificar para hacer otro diseño:

$("#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>");

Me interesaría ver si había una mejor manera de hacerlo, pero parece bastante eficiente.

Answer 4

En jQueryUI 1.8.9 se usa className lugar de classes .

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

Answer 5

Esta función agregará una clase a cada botón en su cuadro de diálogo. A continuación, puede aplicar estilo (o seleccionar con jQuery) de forma normal:

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

Answer 6

Estas soluciones están muy bien si solo tiene un cuadro de diálogo en la página en cualquier momento, sin embargo, si desea aplicar estilos a varios diálogos a la vez, intente:

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

En lugar de seleccionar botones globalmente, obtiene el objeto widget y encuentra su panel de botones, y luego individualiza cada botón. Esto ahorra mucho dolor cuando tiene varios cuadros de diálogo en una página

Answer 7

Estoy usando jQuery UI 1.8.13 y la siguiente configuración funciona como la necesito:

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

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

ps: recuerda envolver "clase" con comillas porque es una palabra reservada en js!

Answer 8

Ha pasado un tiempo desde que se publicó esta pregunta, pero el siguiente código funciona en todos los navegadores (tenga en cuenta que aunque la respuesta de MattPII funciona en FFox y Chrome, arroja errores de script en 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 9

Miré el HTML generado por el cuadro de diálogo de la interfaz de usuario. Muestra paneles de botones como este:

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

Agregar una clase al botón Cancelar debería ser fácil.

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

Esto hará que el botón Cancelar sea poco gris. Puede darle estilo a este botón como lo desee.

El código anterior asume que el botón Cancelar es el último botón. La forma infalible de hacerlo sería

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

Answer 10

Tengo la versión de JQuery UI 1.8.11 y este es mi código de trabajo. También puede personalizar su altura y ancho según sus requisitos.

$("#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

Tuve que usar la siguiente construcción en jQuery UI 1.8.22:

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

Esto elimina todo el formato y aplica el estilo de reemplazo según sea necesario.
Funciona en la mayoría de los principales navegadores.

Answer 12

echa un vistazo a jquery ui 1.8.5. Está disponible aquí http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js y tiene el nuevo botón para implementar el diálogo ui