jsPlumb & bootstrap 水龙头:连接显示不正确
jsPlumb & bootstrap taps: Connections are not displayed correctly
问题: 我目前正在构建过程模拟。我有 2 个 bootstrap 个水龙头,一个包含一个编辑器(工作正常),另一个用于在模拟期间显示内容。 JsPlumb 用于显示不同的模拟对象。问题是如果点击从编辑器切换到模拟,这些对象之间的连接将无法正确显示。在拖动元素后它们 "snap" 到正确的位置,但我希望它们在点击开关上正确呈现。
这是一个fiddle:Problem fiddle
代码:
html:
<div class="container-fluid">
<ul class="nav nav-pills">
<li class="active">
<a href="#editor" data-target="#editor" data-toggle="tab">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Editor
</a>
</li>
<li>
<a href="#display" data-target="#display" data-toggle="tab" id="testlink">
<span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span> Simulation
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="editor"> </div>
<div class="tab-pane fade" id="display">
<div class="container center-block content">
<div id="test1" class="window">
a
</div>
<div id="test2" class="window">
b
</div>
</div>
</div>
Javascript:
jsPlumb.ready(function() {
jsPlumb.Defaults.Container = $('#display');
jsPlumb.connect({
source: $('#test1'),
target: $('#test2'),
anchor: "Continuous",
endpoint: "Blank",
detachable: false
});
jsPlumb.draggable($(".window"));
});
我所知道的:问题直接与加载时不显示选项卡内容这一事实有关,因为将测试 div 放入编辑器点击(加载时处于活动状态)解决了问题。 fiddle: placing divs in aktive tab
不是最佳解决方案,但这个可行:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
if (event.target.id == 'display-tab') {
jsPlumb.detachEveryConnection();
redrawEveryConnection();
}
});
此代码删除了标签切换到模拟的每个连接并调用重绘函数,该函数必须根据情况实现(起点和端点必须保存在某个地方,例如服务器)。
问题: 我目前正在构建过程模拟。我有 2 个 bootstrap 个水龙头,一个包含一个编辑器(工作正常),另一个用于在模拟期间显示内容。 JsPlumb 用于显示不同的模拟对象。问题是如果点击从编辑器切换到模拟,这些对象之间的连接将无法正确显示。在拖动元素后它们 "snap" 到正确的位置,但我希望它们在点击开关上正确呈现。
这是一个fiddle:Problem fiddle
代码:
html:
<div class="container-fluid">
<ul class="nav nav-pills">
<li class="active">
<a href="#editor" data-target="#editor" data-toggle="tab">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>Editor
</a>
</li>
<li>
<a href="#display" data-target="#display" data-toggle="tab" id="testlink">
<span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span> Simulation
</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade in active" id="editor"> </div>
<div class="tab-pane fade" id="display">
<div class="container center-block content">
<div id="test1" class="window">
a
</div>
<div id="test2" class="window">
b
</div>
</div>
</div>
Javascript:
jsPlumb.ready(function() {
jsPlumb.Defaults.Container = $('#display');
jsPlumb.connect({
source: $('#test1'),
target: $('#test2'),
anchor: "Continuous",
endpoint: "Blank",
detachable: false
});
jsPlumb.draggable($(".window"));
});
我所知道的:问题直接与加载时不显示选项卡内容这一事实有关,因为将测试 div 放入编辑器点击(加载时处于活动状态)解决了问题。 fiddle: placing divs in aktive tab
不是最佳解决方案,但这个可行:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (event) {
if (event.target.id == 'display-tab') {
jsPlumb.detachEveryConnection();
redrawEveryConnection();
}
});
此代码删除了标签切换到模拟的每个连接并调用重绘函数,该函数必须根据情况实现(起点和端点必须保存在某个地方,例如服务器)。