如何将图标添加到jsplumb中的连接?
问题描述:
我想知道如何添加图标连接。这就是我打算做的事:如何将图标添加到jsplumb中的连接?
- 当用户将鼠标悬停的连接,一个垃圾桶图标应该出现以上/连接
- 下面当用户点击它,它应该删除该连接
现在,要将垃圾桶图标添加到连接,我使用以下代码添加connectorOverlay。
["Custom",{create:function(component){
return $('<img class="delete-connection" style="display:block;" src="../static/img/Delete.png">');
},location:0.5
}]
我试图将事件添加到该图标通过
$('.delete-connection').click(function(){
//jsplumb.detach code goes here
})
删除上点击连接,但它被调用连接click事件,而不是图标的事件。
按照答案的建议,我尝试了下面的代码:
$(document).on('click','.delete-connection',function(){
console.log('hit')
//detach connection code goes here
});
请纠正我,如果我做的代码错误。
的的jsfiddle链接的问题:jsfiddle.net/cipher42/p9gdc4vm
答
连接是动态的,因此创建的,当你安装的单击处理程序的删除图标叠加的叠加可能不会出现在DOM。
尝试连接如下单击处理:
$(document).on('click','.delete-connection',function(e){
//detach the connection here
});
有许多原因,为什么在这个问题的小提琴不起作用。
-
覆盖
<img>
标签是没有delete-connection
类。覆盖类的正确属性是cssClass
。["Custom", { create: function (component) { return $('<img style="display:block;" src="https://lh6.ggpht.com/5I4BgwoxVAZH5vcPXwdjuNQ6Ellx9YCGgOYif7o2rMwJ2X7sCV96CqXy3OG4XCfwwhGm2C4=w20">'); }, location: 0.5, cssClass: 'delete-connection' }]
小提琴已于jsPlumb.animate &抛出错误,因此,点击处理程序从未被摆在首位连接。
这里是工作提琴:http://jsfiddle.net/nitincool4urchat/p9gdc4vm/9/
参考文献:
答
我们可以添加这样的活动:
["Custom", {
create: function (component) {
return $('<img style="display:block;background-color:transparent;" src="img/delete.png">');
},
location: 0.5,
cssClass: 'delete-connection',
events:{
click:function(params) {
alert("hello!");
}
}
}]
你检查的文档和演示?另外,你有什么尝试? https://jsplumbtoolkit.com/docs.html https://jsplumbtoolkit.com/community/demo/flowchart/index.html –
也阅读 - http://*.com/help/how-to-ask –
嗨,感谢您对这个问题表现出兴趣。现在,我使用自定义覆盖图来添加图标。我已经添加了在问题中使用的代码。我试图弄清楚如何将点击事件绑定到图标的类 – cipher42