更新:抱歉，我让这个问题变得复杂。
我想问的是，当对话框高度变大时，如何将按钮的位置“固定”到 jQueryUI 对话框的底部。
我有一个 jQueryUI 对话框，如下所示:
<head>
$(function(){
$("#ChooseStoryCategory").dialog({
autoOpen: false,
title: "Upload",
height: 600,
width: 500,
modal: true
});
});
</head>
我在对话框中添加了两个按钮，并且我总是想将它们放在对话框的底部。这是代码:
<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 对话框的底部？
我试图获取两个按钮的初始顶部位置。当每个按钮添加到对话框中时，我只需更改两个按钮的位置。
$("#CategoryCancel").css("height") = $("#ChooseStoryCategory").css("height") * 0.85 + $btn.css("height");
但是
$("#ChooseStoryCategory").css("height") * 0.85 + $btn.css("height");
没有添加px，它只是组合了数字和字符串...
是否有任何简单的替代方法可以将两个按钮停靠在 jqueryUI 对话框底部？
最佳答案
为什么不使用按钮选项？
$( "#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 fiddle 并从那里开始)。
关于javascript - 随着对话框内部内容的增加，如何将按钮停靠到 jQueryUI 对话框底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17278467/