頁面特效 UI組件庫 菜單導航 窗口特效 幻燈片滑動 圖像相冊 表單 選項卡 表格 評分星級 手風琴 文本鏈接 布局 日歷 顏色選擇器 按鈕 圖表 html5 提示 ExtJS 在線客服 其他特效 地圖 樹形控件 移動開發 BootStrap 滑動條 文件上傳 表單驗證 分頁 播放器 Angular VUE

基于HTML5小巧精悍流程圖繪制工具jsPlumb

布局 圖表 HTML我幫您 1年前  次瀏覽

jsPlumb是一套開源的流程圖創建工具 ,小巧精悍,使用簡單.它可以將html中的元素用箭頭、曲線、直線等連接起來,適用于開發Web上的圖表、建模工具等。

基于HTML5小巧精悍流程圖繪制工具jsPlumb

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:"..." };
            }
        });
....
  });



相關鏈接

發表評論

腾讯彩票兑奖