shortcodes - jQuery Ui Dialog Buttons, ¿Cómo agregar clase?

shortcodes para wordpress

Question

Encontré esta respuesta en otro hilo ...

¿Cómo agregar varios botones en el cuadro de diálogo de la interfaz de usuario de Jquery?

Usando esta sintaxis, ¿cómo agregas clase a un botón en particular?

 $("#mydialog").dialog({
      buttons: {
        ''Confirm'': function() {
           //do something
           $(this).dialog(''close'');
        },
        ''Cancel'': function() {
           $(this).dialog(''close'');
        }
      }
    });

Answer 1

Espero que ayude!

$("#mydialog").dialog({
          buttons: {
            ''Confirm'': function() {
               //do something
               $(this).dialog(''close'');
            },
            "Cancel": {
                    click: function () {
                        $(this).dialog("close");
                    },
                    text: ''Cancel'',
                    class: ''custom-class''
                }
          }
        });

Answer 2

No parece que haya una gran manera de hacerlo a través de la API; sin embargo, podrías agregar las clases en un controlador de eventos para 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 quisiera el segundo botón, podría usar:

$(this).closest(".ui-dialog").find(".ui-button").eq(1).addClass("custom") // The second button

La clave es $(this).closest(".ui-dialog").find(".ui-button") , que seleccionará los botones en su cuadro de diálogo. Después de eso, puede aplicar cualquier selector que desee (incluido :contains(...) que podría ser útil si desea seleccionar un botón en función de su texto en lugar de su orden).

Aquí hay un ejemplo: http://jsfiddle.net/jjdtG/

También tenga en cuenta que el selector de CSS para el (los) estilo (s) que desea aplicar debe ser más específico que los selectores incorporados de jQueryUI para que se aplique el estilo.

Answer 3

Puede agregar clases a los botones en Diálogo ... por

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

Creo que esto funcionará para ti. y puedes encontrar más respuestas here .

Answer 4

Use el controlador de evento abierto:

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

Limpio, simple, pedazo de pastel!

Answer 5

 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''
                    }
            };