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

Question

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

<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>

谢谢

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 有一个更好的(恕我直言))。