jquery对话框保存取消按钮样式

Question

我在我的应用程序中使用jQuery UI对话框。 如何在jquery对话框中以不同的方式设置“保存”和“取消”按钮？ 所以“保存”比“取消”更有吸引力。 我可以使用“取消”的超链接，但是如何将它放在同一个按钮面板中？

Answer 1

这里是如何在jQuery用户界面对话框（版本1.8+）添加自定义类：

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

Answer 2

我看了UI对话框生成的HTML。它呈现如下的按钮窗格：

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

向取消按钮添加一个类应该很容易。 （'。ui-dialog-buttonpane：last-child'）。css（'background-color'，'#ccc'）;

这将使取消按钮变成灰色。不管你喜欢，你都可以设计这个按钮。

上面的代码假定取消按钮是最后一个按钮。傻瓜证明的方式做这将是

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

Answer 3

看着some other threads后，我想出了这个解决方案将图标添加到按钮的确认对话框，这似乎在1.8.1版本很好地工作，并且可以进行修改，以做其他造型：

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

我很感兴趣，那么有一个更好的w ^唉，这样做，但这似乎很有效。

Answer 4

该函数将为您的每个按钮添加一个类对话框。然后，您可以风格（或使用jQuery选择）为正常：

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

Answer 5

退房jQuery UI的1.8.5它是可用在这里 http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js 和它有对话框UI实现新的按钮

Answer 6

这些解决方案所有的非常好，如果你只需要在页面一个对话框在任何一个时间，但是如果你想一次多样式对话框，然后尝试：

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

而不是全球选择按钮，这得到次e widget对象并找到它的按钮窗格，然后单独设置每个按钮的样式。这节省了很多的痛苦，当你在一个页面上有几个对话框

Answer 7

在jQueryUI 1.8.9使用className而不是classes的作品。

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

Answer 8

截至jquery ui版本1.8.16以下是我如何得到它的工作。

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

Answer 9

我正在使用jQuery UI 1.8。13和下面的配置工作，因为我需要：

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

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

PS：记得包装“类”加上引号，因为它是在JS的保留字！

Answer 10

发布此问题已经有一段时间了，但以下代码适用于所有浏览器（请注意，虽然MattPII的答案在FFox和Chrome中可用，但会在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 11

我不得不使用jQuery UI的22年8月1日下面的结构：

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

这将删除所有的格式，并根据需要适用更换造型。
适用于大多数主流浏览器。

Answer 12

我有JQuery UI 1.8.11版本，这是我的工作代码。您还可以根据您的要求定制其高度和宽度。

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