如何在Jquery Ui确认对话框中更改按钮大小？ [英] How To change the button size in the Jquery Ui confirmation dialog?

问题描述

我的代码是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).

这篇关于如何在Jquery Ui确认对话框中更改按钮大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！