Question

更新：抱歉，我提出这个问题很复杂。

我想问的是，当对话框高度越来越大时，如何将按钮位置“固定”到jQueryUI对话框的底部。

我有一个jQueryUI对话框如下：

<head>
$(function(){
    $("#ChooseStoryCategory").dialog({
        autoOpen: false,
        title: "Upload",
        height: 600,
        width: 500,
        modal: true
    }); 
});
</head>

我在对话框中添加了两个按钮，我总是希望将它们放在bottom of the dialog。这是代码：

<body>
<div id= "ChooseStoryCategory">
    <div id="storyCategory"></div>      

    <div><button id="ChooseCategory"><img src= "../pic/chooseOk.png"/></button></div>
    <div><button id="CategoryCancel"><img src= "../pic/close.png"/></button></div>
</div>
</body>

css设置：

#ChooseCategory{
    position: absolute;
    left: 30%;
    top: 85%;
    bottom: 0;

}

#CategoryCancel{
    position: absolute;
    left: 70%;
    top: 85%;
    bottom: 0;
}

但是我总是会在对话框中增加元素：

for(multiple times)://pseudocode
var categoryName= "PressNum1";
var value= 3;
var $btn= $('<button/>').text(categoryName).width(400).height(80);
$btn.bind('click', function(){console.log(value)});
$("#storyCategory").append($btn);

随着添加的按钮增加，它们的位置将超过两个按钮（ChooseCategory和CategoryCancel）。如何将两个按钮停靠在jQueryUI对话框的底部？

我试图获得两个按钮的初始顶部位置。当每个按钮添加到对话框中时，我只需更改two buttons的位置。

$("#CategoryCancel").css("height") = $("#ChooseStoryCategory").css("height") * 0.85 + $btn.css("height");

但是

$("#ChooseStoryCategory").css("height") * 0.85 + $btn.css("height");

没有添加px，只是将数字和字符串组合在一起......

是否有任何简单的替代方法可以将两个按钮停靠在jqueryUI对话框的底部？

Answer 1

为什么不使用buttons选项？

$( "#ChooseStoryCategory" ).dialog({
  autoOpen: false,
  title: "Upload",
  height: 600,
  width: 500,
  modal: true
  buttons: {
    "Choose category": function() {
      // Do something
      $( this ).dialog( "close" );
    },
    Cancel: function() {
      $( this ).dialog( "close" );
    }
  }
});

查看jquery-ui页面中的示例：http://jqueryui.com/dialog/或查看API文档：http://api.jqueryui.com/dialog/#option-buttons

这是jsFeedle：http://jsfiddle.net/6gb4v/（取出@rusln小提琴并从那里开始）。

当对话框内容增加时，如何将按钮停靠到jQueryUI对话框底部？

1 个答案: