2011-05-20 5 views
2

Как вручную отрегулировать/установить высоту панели кнопок в диалоговом окне jQuery без изменения файла CSS? Я хочу настроить высоту DIV, которая содержит сообщение, и DIV, который содержит кнопку (отмеченную зелеными линиями) из Javascript.Диалог jQuery: как управлять высотой панели кнопок

jQuery Dialog

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. Это связано с заполнением кнопки?

ответ

6

Нашел себя. Это то, что я искал.

// 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"}) 
-2

Просто измените файл jQueryUI.css

+4

лучше поставить переопределения в своем собственном файле CSS загружен после UI CSS JQuery, так что вы можете обновить jQueryUI позже без необходимости портировать свои изменения. – Alnitak

+0

@alnitak, true true – Neal

+0

Да, я сделал это, и это сработало. Сначала я попытался изменить css, он работал нормально. Затем я включил стиль в '