我对jQuery很新,但我非常喜欢它!赞成开发人员! :)
我的问题是关于可调整大小的功能。情况如下:
我有一个div(parent-div),而且我有另外5个div(彼此直接相邻,我们称之为div-a到div-e)。 parent-div代表一个时间跨度(它越长,代表的时间越长),五个childrendiv代表该时间跨度内的五个阶段。
现在,我希望能够调整大小(让我们说)child-div-c(它表示的fase需要更多时间)。当我调整C大小时,div的D和E必须向左移动,因为他们的花絮只是稍后发生,而不是更短或更长。当我调整C大小时,parent-div也必须调整大小,因为总时间跨度会更长。
我希望这很清楚。问题是:
如何在调整大小的div旁边移动div? 如何调整父div的大小?
我知道$(“。选择器).resizable({})事件,我得到了它的工作。但是当我有两个div在彼此旁边,我正在调整其中一个,它没有移动allong。
提前致谢!
编辑:尽管这个问题被低估了,但我找到了答案,并成了一个JSfiddle。请参阅我对接受的答案的评论。
我的第二个问题的答案是:
$(".selector").resizable( {
resize: function(event, ui) {
var widthTotal = 0;
$(".travelcontainer > .travelfase").each(function(index, element) {
widthTotal = $(this).innerWidth() + widthTotal;
});
});
希望这也有助于其他人:)
答案 0 :(得分:3)
如果您的孩子div使用float:left
或display:inline-block
进行展示,那么在调整前一个孩子的尺寸后,您不应该采取任何措施来移动孩子。
如果您的父div具有固定宽度,则您必须计算子项的总数并手动设置(或设置动画)。
答案 1 :(得分:2)
http://jsfiddle.net/MjSfy/1/这很直接。只需将子级与float:left
或display:inline-block
对齐即可。然后,每当你改变一个child-div的宽度时,父级也会调整。
<强>更新强>
使用类似的东西在运行时设置div的宽度:
$("#div-a").css("width", "50px");
更新了小提琴:http://jsfiddle.net/MjSfy/2/和http://jsfiddle.net/MjSfy/3/