jQuery对话框:如何控制按钮窗格高度

Question

如何在不更改CSS文件的情况下手动调整/设置jQuery对话框中按钮窗格的高度？我想调整包含消息的DIV的高度和包含来自Javascript的按钮(以绿线标记)的DIV.

function showMessageDialog(title, message, width){
     // create div if it doesn't exist already
     if(!$("#msgDialogDiv").length) {
         $("<DIV></DIV>").appendTo("body").attr("id","msgDialogDiv");
     }
     // set the message
     $("#msgDialogDiv").html(message).css("color","red");

     // show the dialog
     $("#msgDialogDiv").dialog({
        modal: true, resizable: false, draggable: false, title: title, width: width,
        buttons: {OK: function(){$(this).dialog("close");}}
      });

      // This changes the height as I want.
      // $("#msgDialogDiv").css({"overflow":"hidden","height":"10px"});
      // this changes the font on button
      //$("#msgDialogDiv").dialog("widget").find(".ui-button-text").css("font-size", "11px");
      return;
}

showMessageDialog("Hello Stackoverflow!", "This is my first question on stackoverflow",400);

在发布此问题时,我尝试调整DIV高度并且它有效.我也尝试更改按钮的字体大小,但这只会改变按钮的大小.我想控制整个DIV的大小.这是由于按钮周围的填充物？

Answer 1

自己找到了.这就是我想要的.

// set the size of the button
$("#msgDialogDiv").dialog("widget")
                  .find(".ui-button-text").css("font-size", "10px")

// this is not required. but doesn't hurt. To hardcode the height, 
// just change to height instead of minHeight
//$("#msgDialogDiv").css({"minHeight":"10px"})

// button pane style
$("#msgDialogDiv").dialog("widget").find(".ui-dialog-buttonpane")
                  .css({"padding":".1em .1em .1em 0","margin":"0 0 0 0"} )

// button style
$("#msgDialogDiv").dialog("widget").find("button")
                  .css({"padding":"0 .2em 0 .2em","margin":"0 .5em 0 0"} )

Answer 2

将以下内容放在您自己的自定义CSS文件中,在jQuery UI CSS之后加载:

.ui-dialog .ui-dialog-buttonpane {
    margin: 0px;
    padding: 0px;
}

由于CSS特殊性规则,需要双选择器.如果没有.ui-dialog前缀,则无法覆盖先前加载的默认值.

见http://jsfiddle.net/alnitak/UQAqg/