Условная кнопка, добавленная в jQuery modal

Question

У меня есть мода jQuery, где я хочу добавить дополнительную кнопку, если выполняется условное утверждение.

Оригинальный образец кода (урезывание):

$("#dialog").html("<div></div>").dialog({ 
    title: "Some Title", 
    modal: true, 
    width: 550, 
    buttons: { 
     Ok: function() { 
      // 
     }, 
     'A Button': function() { 
      // 
     } 
    } 
}).dialog('open'); 

Итак, как вы видите выше, есть модальный с 2-мя кнопками, но я также хочу добавить туда какой-то динамический код, чтобы иметь возможность обслуживать дополнительные если установлена ​​переменная. например

var some_variable = 0; 

$("#dialog").html("<div></div>").dialog({ 
    title: "Some Title", 
    modal: true, 
    width: 550, 
    buttons: { 
     Ok: function() { 
      // 
     }, 
     'A Button': function() { 
      // 
     } 
     /* ??? */ 
     if (some_variable==1) //then add the other button's code here.. 
     /* ??? */ 
    } 
}).dialog('open'); 

Answer 1

Вы можете создать buttons объект перед созданием диалога:

//Create the buttons object 
var buttons = { 
    Ok: function() {}, 
    'A Button': function() {} 
}; 

//Add another button to that object if some condition is true 
if(something) { 
    buttons['B button'] = function() {}; 
} 

//Create the dialog, passing in the existing buttons object 
$("#dialog").html("<div></div>").dialog({ 
    buttons: buttons, 
    //Other options 
}); 

Answer 2

В настоящее время не существует способа изменить только одну кнопку, но вы можете сбросить полную кнопку хэша, используя метод опции:

Если ваше состояние встречается, то снова перезагружайте кнопки.

$('#contactform').dialog('option', 'buttons', {...});

http://old.nabble.com/jQuery-dialog-add-remove-button-on-the-fly-td22036498s27240.html

Answer 3

В качестве альтернативы, вы можете создать все кнопки, необходимые, а затем отобразить или скрыть их в зависимости от дела, и в зависимости от того, что происходит в вашем диалоге. Одним из таких способов является использование события jqueryui create create.

Вы можете обратиться к рабочему примеру по адресу: http://jsfiddle.net/eCLuy/

$("#dialog").dialog({ 
    buttons: { 
     'prev': { 
     text: 'prev', 
     id: "prevB", 
     click: function() { 
      $(this).closest(".ui-dialog").find(".ui-button#prevB").addClass("hidden");    
      $(this).closest(".ui-dialog").find(".ui-button#nextB").removeClass("hidden");    
     } 
     },   
     'next': { 
      text: 'next', 
      id: "nextB", 
      click: function() { 
       $(this).closest(".ui-dialog").find(".ui-button#prevB").removeClass("hidden");    
       $(this).closest(".ui-dialog").find(".ui-button#nextB").addClass("hidden");    
      } 
     }   
    }, 
    // http://api.jqueryui.com/dialog/#event-create 
    // Triggered when the dialog is created. 
    // Initialize the dialog with the create callback 
    create:function() { 
     $(this).closest(".ui-dialog").find(".ui-button#prevB").addClass("hidden"); 
    } 
});