2

我想使用 jsPlumb 连接 div。当我使用样式时它可以工作，但是当我使用 jquery-ui 装饰（如手风琴）时，最后一行的偏移量不正确。

代码：

<!doctype html>
<html lang="us">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Example Page</title>
    <link href="css/ui-lightness/jquery-ui-1.9.1.custom.css" rel="stylesheet"/>
    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/jquery-ui-1.9.1.custom.js"></script>
    <script src="js/jquery.jsPlumb-1.3.16-all.js"></script>

    <script>
    $(function() {
        $( "#top" ).accordion({
            collapsible: false,
            icons: false
            });
    });
    </script>
</head>

<body>

<h1>jsPlumb tests</h1>

<div id="top"  style="border-width: 2px; border-style: solid; border-color: red;">
    <h1>TOP</h1>
</div>
<div>
    <p>Text Text Text</p>
</div>
<div id="bottom" style="margin: 0px 100px 0px 50px; border-width: 2px; border-style: solid; border-color: red;">
    <h1>Bottom</h1>
</div>

<script>
jsPlumb.ready(function() {

jsPlumb.importDefaults({
    ConnectorZIndex:5
});

var jsP = jsPlumb.getInstance({
    PaintStyle:{ lineWidth:1, strokeStyle:"#567567", outlineColor:"black", outlineWidth:1 },
    Connector: "Straight",
    Endpoint: "Blank"
});

var e0 = jsP.addEndpoint("top", { 
    anchor: ["Perimeter", {shape:"square", anchorCount:100}]
});

var e1 = jsP.addEndpoint("bottom", { 
    anchor: ["TopCenter"]
});

jsP.connect({ source:e0, target:e1});

}); 

</script>


</body>
</html>

产生： 代码结果

想要的效果（没有手风琴装饰）是： 期望的结果

我做错了什么？似乎在手风琴装饰之前渲染了线条。

4

1 回答 1

2

我找到了一个改变脚本顺序的解决方案，包括 jsPlumb 中的样式之一：

<!doctype html>
<html lang="us">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Example Page</title>
    <link href="css/ui-lightness/jquery-ui-1.9.1.custom.css" rel="stylesheet"/>
    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/jquery-ui-1.9.1.custom.js"></script>
    <script src="js/jquery.jsPlumb-1.3.16-all.js"></script>
</head>

<body>

<h1>jsPlumb tests</h1>

<div id="top"  style="border-width: 2px; border-style: solid; border-color: red;">
    <h1>TOP</h1>
</div>
<div>
    <p>Text Text Text</p>
</div>
<div id="bottom" style="margin: 0px 100px 0px 50px; border-width: 2px; border-style: solid; border-color: red;">
    <h1>Bottom</h1>
</div>

<script>
        $( "#top" ).accordion({
            collapsible: false,
            icons: false
            });


jsPlumb.ready(function() {

jsPlumb.importDefaults({
    ConnectorZIndex:5
});

var jsP = jsPlumb.getInstance({
    PaintStyle:{ lineWidth:1, strokeStyle:"#567567", outlineColor:"black", outlineWidth:1 },
    Connector: "Straight",
    Endpoint: "Blank"
});

var e0 = jsP.addEndpoint("top", { 
    anchor: ["Perimeter", {shape:"square", anchorCount:100}]
});

var e1 = jsP.addEndpoint("bottom", { 
    anchor: ["TopCenter"]
});

jsP.connect({ source:e0, target:e1});

}); 

</script>


</body>
</html>

结果是： 期望的结果

于 2012-11-15T16:04:31.170 回答