jquery对话框保存取消button样式
我在我的应用程序中使用jQuery UI对话框。 如何在jquery对话框中设置不同的“保存”和“取消”button？ 所以“保存”比“取消”更有吸引力。 我可以使用“取消”的超链接，但我怎么把它放在同一个button面板？
这里是如何添加自定义类在jQuery UI对话框（版本1.8 +）：
$('#foo').dialog({ 'buttons' : { 'cancel' : { priority: 'secondary', class: 'foo bar baz', click: function() { ... }, }, } }); 在jQueryUI 1.8.9中使用className而不是classes作品。
$('#element').dialog({ buttons:{ "send":{ text:'Send', className:'save' }, "cancel":{ text:'Cancel', className:'cancel' } });
我正在使用jQuery UI 1.8.13和以下configuration工作，因为我需要：
var buttonsConfig = [ { text: "Ok", "class": "ok", click: function() { } }, { text: "Annulla", "class": "cancel", click: function() { } } ]; $("#foo").dialog({ buttons: buttonsConfig // ...
ps： 记得用“引用”来包装“class”，因为它是js中的保留字！
这个问题已经发布了一段时间，但是下面的代码适用于所有的浏览器（注意，尽pipeMattPII的答案在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')} } ] });
至于下面的jquery ui 1.8.16版本是如何得到它的工作。
$('#element').dialog({ buttons: { "Save": { text: 'Save', class: 'btn primary', click: function () { // do stuff } } });
如果你一次只在页面上有一个对话框，这些解决scheme都是非常好的，但是如果你想一次设置多个对话框的样式，那就试试：
$("#element").dialog({ buttons: { 'Save': function() {}, 'Cancel': function() {} } }) .dialog("widget") .find(".ui-dialog-buttonpane button") .eq(0).addClass("btnSave").end() .eq(1).addClass("btnCancel").end();
取而代之的是全局selectbutton，这会得到窗口小部件对象并find它的button窗格，然后单独设置每个button的样式。 当您在一个页面上进行多个对话时，可以节省很多痛苦
在看了一些其他的线程后，我想出了这个解决scheme，在确认对话框中为button添加图标，这似乎在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>");
我有兴趣看看是否有更好的方法来做到这一点，但这似乎相当有效。
我不得不在jQuery UI 1.8.22中使用下面的构造：
var buttons = $('.ui-dialog-buttonset').children('button'); buttons.removeClass().addClass('button');
这将删除所有格式并根据需要应用replace样式。
适用于大多数主stream浏览器。
此function将为您的每个button添加一个类对话框。 然后你可以正常的样式（或者用jQueryselect）：
$('.ui-dialog-buttonpane :button').each(function() { $(this).addClass($(this).text().replace(/\s/g,'')); });
我有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 () {} });
检查jQuery的用户界面1.8.5它可以在这里http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.js和它有对话框UI执行的新button
我看了UI对话框生成的HTML。 它呈现像这样的button窗格：
<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>
添加一个类到取消button应该很容易。
$（'。ui-dialog-buttonpane：last-child'）。css（'background-color'，'#ccc'）;
这将使取消button灰色。 不pipe你喜欢，你都可以devise这个button。
上面的代码假定取消button是最后一个button。 傻瓜式的方式来做到这一点
$('.ui-dialog-buttonpane :button') .each( function() { if($(this).text() == 'Cancel') { //Do your styling with 'this' object. } } );
