使用jsPlumb和jquery-ui的行不正確的偏移量

我想連接div的使用jsPlumb。它在我使用樣式時有效，但當我使用像accordion這樣的jquery-ui裝飾時，最後一行的偏移量不正確。使用jsPlumb和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>

產地： Result of code

的預期效果（不手風琴飾）是： Desired result

我做錯了嗎？看起來這條線是在手風琴裝飾之前呈現的。

來源

2012-11-15 logoff

我已經找到了解決辦法改變腳本的順序，包括風格之一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>

，其結果是： Desired reuslt

來源

2012-11-15 16:04:31 logoff

使用jsPlumb和jquery-ui的行不正確的偏移量

回答

相關問題