如何更改 Jquery Ui 确认对话框中的按钮大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5386478/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To change the button size in the Jquery Ui confirmation dialog?
提问by Renukshan Saputhanthri
My code is below.i need to change the button size in the ok and cancel in the button.
我的代码在下面。我需要在确定中更改按钮大小并在按钮中取消。
<div style="font-size: medium" id="dialog" title="Confirmation Required">
Story Will Be Deleted??
</div>
<script type="text/javascript">
$(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");
});
</script>
Thanks
谢谢
回答by mu is too short
You can do this with a little bit of CSS, all you need to do is reduce the font size:
你可以用一点 CSS 来做到这一点，你需要做的就是减小字体大小：
#dialog .ui-button-text {
font-size: 10px; /* Or whatever smaller value works for you. */
}
You can also drop the padding:
您还可以删除填充：
#dialog .ui-button-text {
font-size: 10px;
padding: 1px 1px 1px 1px; /* Or whatever makes it small enough. */
}
These adjustments are specific to your dialog (hence the #dialogin the CSS selector) to avoid messing up any other jQuery-UI buttons you're using. If you want to make all the buttons smaller, then apply the changes to your jQuery-UI theme CSS.
这些调整特定于您的对话框（因此#dialog在 CSS 选择器中），以避免弄乱您正在使用的任何其他 jQuery-UI 按钮。如果您想让所有按钮变小，那么将更改应用到您的 jQuery-UI 主题 CSS。
The easiest way to figure out which classes to adjust is to use a DOM inspector (Firebug has one, WebKit has a better (IMHO) one).
确定要调整哪些类的最简单方法是使用 DOM 检查器（Firebug 有一个，WebKit 有一个更好的（恕我直言））。
回答by live-love
You can set the button width like in this example:
您可以像本示例中那样设置按钮宽度：
$('#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(); }
}
]);
回答by BEDI
.ui-button .ui-button-text{
font-size: 12px;
}
this worked for me
这对我有用
回答by jaychapani
<style type="text/css">
.ui-widget, .ui-widget button {
font-family: Verdana,Arial,sans-serif;
font-size: 0.8em;
}
</style>
Try this i m using CSS : smoothness/jquery-ui-1.8.9.custom.css JS : jquery-1.4.4.min.js and jquery-ui-1.8.9.custom.min.js
试试这个使用 CSS 的 im：smoothness/jquery-ui-1.8.9.custom.css JS：jquery-1.4.4.min.js 和 jquery-ui-1.8.9.custom.min.js
