无法将图像设置为 jsPlumb 端点
Can't set image to jsPlumb endpoint
我在我的项目中使用了 jsPlumb 库,并且我有一个函数可以在端点图像连接时更改它们。我在页面加载时调用它并且一切正常,但是当我在连接事件上调用它时,什么也没有发生。这是我的代码:
function changeEndpointImage(){
var elem = $('.tableBody'); //These are my connectable elements
for(var i=0;i<elem.length;i++)
{
var eps=jsPlumb.getEndpoints($(elem[i])); //Getting endpoints for each of the connectable elements
for(var j=0;j<eps.length;j++)
{
if(eps[j].connections.length!=0) //Checking if any of them have connections
eps[j].setImage("images/styled_radiobutton.png"); //Setting another image
}
}
}
jsPlumb.bind("connection", function(connection) {
changeEndpointImage();
//I have also tried this method commented below, but nothing.
//connection.sourceEndpoint.setImage("images/styled_radiobutton.png");
//connection.targetEndpoint.setImage("images/styled_radiobutton.png");
});
如果连接断开,我也尝试将端点图像更改回第一眼,但在这种情况下,只有源端点发生变化,目标保持不变:
jsPlumb.bind("connectionDetached", function(connection) {
connection.targetEndpoint.setImage("images/rsz_styled_radiobutton.png");
connection.sourceEndpoint.setImage("images/rsz_styled_radiobutton.png");
});
我错过了什么或者我该如何解决这个问题?
编辑:这是 jsfiddle:
https://jsfiddle.net/vaxobasilidze/cg3hkde7/
向右拖动几个项目 div,按 "Add new link" 并尝试附加分离连接。您会看到端点没有改变。
我在 jsPlumb google 组中找到了解决方案。我设置了端点 Blank
而不是 Image
,添加了 cssClass: 'myClass'
属性,然后设置了样式 .myClass { background: url(...) }
。这就是我想要的,因为连接的端点获得额外的 class 'jsplumb-endpoint-connected'
,我可以将另一个图像设置为这个 class.
的背景
我在我的项目中使用了 jsPlumb 库,并且我有一个函数可以在端点图像连接时更改它们。我在页面加载时调用它并且一切正常,但是当我在连接事件上调用它时,什么也没有发生。这是我的代码:
function changeEndpointImage(){
var elem = $('.tableBody'); //These are my connectable elements
for(var i=0;i<elem.length;i++)
{
var eps=jsPlumb.getEndpoints($(elem[i])); //Getting endpoints for each of the connectable elements
for(var j=0;j<eps.length;j++)
{
if(eps[j].connections.length!=0) //Checking if any of them have connections
eps[j].setImage("images/styled_radiobutton.png"); //Setting another image
}
}
}
jsPlumb.bind("connection", function(connection) {
changeEndpointImage();
//I have also tried this method commented below, but nothing.
//connection.sourceEndpoint.setImage("images/styled_radiobutton.png");
//connection.targetEndpoint.setImage("images/styled_radiobutton.png");
});
如果连接断开,我也尝试将端点图像更改回第一眼,但在这种情况下,只有源端点发生变化,目标保持不变:
jsPlumb.bind("connectionDetached", function(connection) {
connection.targetEndpoint.setImage("images/rsz_styled_radiobutton.png");
connection.sourceEndpoint.setImage("images/rsz_styled_radiobutton.png");
});
我错过了什么或者我该如何解决这个问题?
编辑:这是 jsfiddle:
https://jsfiddle.net/vaxobasilidze/cg3hkde7/
向右拖动几个项目 div,按 "Add new link" 并尝试附加分离连接。您会看到端点没有改变。
我在 jsPlumb google 组中找到了解决方案。我设置了端点 Blank
而不是 Image
,添加了 cssClass: 'myClass'
属性,然后设置了样式 .myClass { background: url(...) }
。这就是我想要的,因为连接的端点获得额外的 class 'jsplumb-endpoint-connected'
,我可以将另一个图像设置为这个 class.