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 に答える