我正在使用jquery和html创建一个流程图,其中包含连接这些圆圈的节点(圆圈)和箭头。需要完成两个操作,一个是工具提示操作,当您将光标悬停时将显示特定文本在特定的圈子上。而另一个功能是每当我们点击这些圈子时,另一个html页面会弹出AKA超链接。我有18个圈子,我创建了所需的18个HTML页面。 BUt m卡在超链接。我不知道如何将这些超链接传递给我的Jquery插件。以下是工具提示功能的附加代码
function oncanvasmousemove(evt) {
clearTimeout(timer);
lastTimeMouseMoved = new Date().getTime();
timer = setTimeout(function () {
var currentTime = new Date().getTime();
if (currentTime - lastTimeMouseMoved > 300) {
var mousePos = getMousePos(canvas, evt);
var tC, isMatched = false;
for (c = 0; c < circles.length; c++) {
tC = circles[c];
if (mousePos.DistanceTo(tC.centerX, tC.centerY) < tC.Radius + 5) {
isMatched = true;
break;
}
}
if (isMatched === true) {
$("#tooltip").html(tC.Text).css({
'top': mousePos.Y + canvasoffset.top - 40,
'left': mousePos.X + canvasoffset.left - $("#tooltip").width() / 2
}).show();
} else {
$("#tooltip").hide();
}
}
}, 300);
}
我正在附上页面
的图片答案 0 :(得分:1)
您需要为每个圈子分配一个CSS ID。
就我的例子而言,我只会使用“#circle-1”,“#circle-2”......“#circle-18”。
还为每个圆圈添加一个CSS类。对于我的例子,我将使用“.circle-link”。
//On clicking anything with the circle-link class...
$('.circle-link').click(function() {
var link_id = $(this).attr("id"); //Get ID of circle that was clicked
//Get ID number
link_id = link_id.split("-"); //Split the string on the dash/hyphen (returns array)
link_id = link_id[2]; //Get second array element (should be the number)
//Use the above number to determine which link to call
});