我正在使用js-graph.it(http://js-graph-it.sourceforge.net/index.html)来创建由应用程序的最终用户创建的工作流的可视化表示。我有一个灯箱(Fancybox)弹出窗口来显示流程图,一切正常。但是,这些步骤都是绝对定位的元素,因此我无法设置容器的高度,因为可能有任意数量的元素行。
所以我的问题是,有没有办法计算绝对定位元素的总高度,然后使用该值来更新容器元素的高度?
我意识到相对定位/浮点数会更好但不幸的是,这不是js-graph-it的选项,因为它需要绝对定位来绘制连接箭头。
这是我正在处理的JSFiddle:http://jsfiddle.net/db3ef/1/并且由于代码是必需的,所有的HTML都是由PHP创建的,所以这里是我如何将它设置为连续显示4个项目并计算绝对定位:
<?php
if ($steplist) {
$oddcounter = 0;
$evencounter = false;
$row = 1;
foreach ($steplist as $step) {
if (is_int($oddcounter)) {
$oddcounter++;
$counter = $oddcounter;
}
else {
$evencounter--;
$counter = $evencounter;
}
if ((is_int($oddcounter) && $oddcounter > 0 && ($oddcounter % 5 == 0)) || (is_int($evencounter) && ($evencounter == 0))) {
$row++;
if ($row & 1) { // Odd row
$evencounter = false;
$oddcounter = 1;
$counter = $oddcounter;
}
else { // Even row
$evencounter = 4;
$oddcounter = false;
$counter = $evencounter;
}
}
$x = ($counter - 1) * 280;
$y = ($row - 1) * 100;
// Set status classes
switch ($step['status']) {
case 1:
$statusclass = ' active';
break;
case 2:
$statusclass = ' complete';
break;
case 0:
$statusclass = ' pending';
break;
}
$map .= '<div class="block draggable' . $statusclass . '" id="step' . $step['pgsid'] . '" style="left:' . $x . 'px; top:' . $y . 'px;"><p><strong>' . stripslashes(neat_trim($step['stepname'], 50, '...')) . '</strong><br />';
$map .= $step['assignee'] . '<br />';
($step['enddate'] != '') ? $map .= date('n/j/Y g:ia', strtotime($step['enddate'])) . '</p></div>' : $map .= '</p></div>';
if (isset($step['links'][0])) {
foreach ($step['links'] as $connection) {
$connectors .= '<div class="connector step' . $step['pgsid'] . ' step' . $connection . '">
<img src="/images/arrow.png" class="connector-end">
</div>';
}
}
}
}
提前致谢!
答案 0 :(得分:1)
问题是什么?
如果你添加一个元素的高度,你的循环结尾的$ y变量包含总高度,在你的情况下是68像素(4.6875em)
只需将其打印出来,例如进入javascript变量。
echo '<script type="text/javascript">totalHeight = '.($y+68).';</script>';
答案 1 :(得分:0)
position()
和outerHeight()
表示容器的高度;只需使用height()
或css('min-height: …')
设置它。
在PHP中输出总和可能会有效但请记住PHP对客户端上实际显示的内容“视而不见”;也许有PHP“猜测”高度,然后在javascript中完成。