如何更改Jquery Ui确认对话框中的按钮大小？

我的代码在下面。我需要在ok中更改按钮大小并在按钮中取消。

 Story Will Be Deleted?? 
  $(document).ready(function() { $("#dialog").dialog({ autoOpen: false, width:300, hight:400, fontSize:10, modal: true }); }); $(".confirmLink").click(function(e) { e.preventDefault(); var targetUrl = $(this).attr("href"); // $dialog.attr('font-size', '8px'); $("#dialog").dialog({ buttons : { "OK" : function() { window.location.href = targetUrl; }, "Cancel" : function() { $(this).dialog("close"); } } }); $("#dialog").dialog("open"); });  

谢谢

Answer 1

你可以用一点CSS做到这一点，你需要做的就是减小字体大小：

 #dialog .ui-button-text { font-size: 10px; /* Or whatever smaller value works for you. */ } 

你也可以删除填充：

 #dialog .ui-button-text { font-size: 10px; padding: 1px 1px 1px 1px; /* Or whatever makes it small enough. */ } 

这些调整特定于您的对话框（因此CSS选择器中的#dialog ），以避免弄乱您正在使用的任何其他jQuery-UI按钮。 如果要将所有按钮缩小，请将更改应用于jQuery-UI主题CSS。

确定要调整哪些类的最简单方法是使用DOM检查器（Firebug有一个，WebKit有一个更好的（恕我直言））。

Answer 2

您可以像此示例中那样设置按钮宽度：

 $('#MyDialog').dialog("option", "buttons", [ { text: "Reset", width: "100", click: function () { Reset(className); } }, { text: "Save", width: "100", click: function () { Update(className); } }, { text: "Cancel", width: "100", click: function () { Close(); } } ]); 

Answer 3

使用CSS试试这个：smoothness / jquery-ui-1.8.9.custom.css JS：jquery-1.4.4.min.js和jquery-ui-1.8.9.custom.min.js

Answer 4

 .ui-button .ui-button-text{ font-size: 12px; } 

这对我有用