如何在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. */
}

这些调整特定于您的对话框(因此#dialog在CSS选择器中),以避免弄乱您正在使用的任何其他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(); }
    }
]);