0

我正在使用 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>';
                }
            }
        }
    }

提前致谢！

4

2 回答 2

1

有什么问题？

如果您添加一个元素的高度，则循环末尾的 $y 变量包含总高度，在您的情况下为 68pixel (4.6875em)

只需将其打印到一个 javascript 变量中即可。

echo '<script type="text/javascript">totalHeight = '.($y+68).';</script>';
于 2013-10-05T18:03:21.670 回答
0

position()并且outerHeight()对于最底部的定位元素意味着容器的高度；只需用height()or设置它css('min-height: …')。

在 PHP 中输​​出总和可能有效，但请记住 PHP 对客户端上实际显示的内容“视而不见”；也许让 PHP“猜测”高度，然后在 javascript 中完成它。

于 2013-10-11T22:01:59.390 回答