html5流程图制作,基于HTML5小巧精悍流程图绘制工具jsPlumb
jsPlumb是一套開(kāi)源的流程圖創(chuàng)建工具?，小巧精悍，使用簡(jiǎn)單.它可以將html中的元素用箭頭、曲線(xiàn)、直線(xiàn)等連接起來(lái)，適用于開(kāi)發(fā)Web上的圖表、建模工具等。
jsPlumbToolkit.ready(function () {
// ------------------------ toolkit setup ------------------------------------
// This function is what the toolkit will use to get an ID from a node.
var idFunction = function (n) {
return n.id;
};
// This function is what the toolkit will use to get the associated type from a node.
var typeFunction = function (n) {
return n.type;
};
// get the various dom elements
var mainElement = document.querySelector("#jtk-demo-flowchart"),
canvasElement = mainElement.querySelector(".jtk-demo-canvas"),
miniviewElement = mainElement.querySelector(".miniview"),
nodePalette = mainElement.querySelector(".node-palette"),
controls = mainElement.querySelector(".controls");
// Declare an instance of the Toolkit, and supply the functions we will use to get ids and types from nodes.
var toolkit = jsPlumbToolkit.newInstance({
idFunction: idFunction,
typeFunction: typeFunction,
nodeFactory: function (type, data, callback) {
jsPlumbToolkit.Dialogs.show({
id: "dlgText",
title: "Enter " + type + " name:",
onOK: function (d) {
data.text = d.text;
// if the user entered a name...
if (data.text) {
// and it was at least 2 chars
if (data.text.length >= 2) {
// set an id and continue.
data.id = jsPlumbToolkitUtil.uuid();
callback(data);
}
else
// else advise the user.
alert(type + " names must be at least 2 characters!");
}
// else...do not proceed.
}
});
},
beforeStartConnect:function(node, edgeType) {
// limit edges from start node to 1. if any other type of node, return
return (node.data.type === "start" && node.getEdges().length > 0) ? false : { label:"..." };
}
});
....
});
相關(guān)鏈接
總結(jié)
以上是生活随笔為你收集整理的html5流程图制作,基于HTML5小巧精悍流程图绘制工具jsPlumb的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
