如何在Jquery Ui确认对话框中更改按钮大小?
我的代码是below.i需要更改按钮大小,在确定和取消按钮。
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>
感谢
你可以用一点CSS来做到这一点,你所需要做的就是减小字体大小:
You can do this with a little bit of CSS, all you need to do is reduce the font size:
#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. */
}
这些调整特定于您的对话框(因此 #dialog
),以避免混淆您使用的任何其他jQuery-UI按钮。如果你想让所有的按钮更小,然后将更改应用到你的jQuery-UI主题CSS。
These adjustments are specific to your dialog (hence the #dialog
in 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.
最简单的方法来确定哪些类要调整是使用一个DOM检查器(Firebug有一个,WebKit有一个更好的(IMHO)一个)。
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).