微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

JsPlumb 流程图设计器

程序名称:JsPlumb

授权协议: MIT

操作系统: 跨平台

开发语言: JavaScript

JsPlumb 介绍

jsPlumb是一个比较强大的绘图组件,它提供了一种方法,主要用于连接网页上的元素。在现代浏览器中,它使用SVG或者Canvas技术,而对于IE8以下(含IE8)的古董浏览器,则使用VML技术。

作为插件,主要支持jQuery/MooTools/YUI3三种js库,目前最新版本为1.4.1。其中作为jQuery的插件需要用到jQuery、jQuery
UI,建议使用最新版本的库避免一些bug。

示例代码

jsPlumb.bind("ready", function() {
  // chrome fix.
  document.onselectstart = function() { return false; };
  // render mode
  var resetRenderMode = function(desiredMode) {
    var newMode = jsPlumb.setRenderMode(desiredMode);
    $(".rmode").removeClass("selected");
    $(".rmode[mode='" + newMode + "']").addClass("selected");
    $(".rmode[mode='canvas']").attr("disabled", !jsPlumb.isCanvasAvailable());
    $(".rmode[mode='svg']").attr("disabled", !jsPlumb.isSVGAvailable());
    $(".rmode[mode='vml']").attr("disabled", !jsPlumb.isVMLAvailable());
    nodeFlow.init();
  };
  $(".rmode").bind("click", function() {
    var desiredMode = $(this).attr("mode");
    if (jsPlumbDemo.reset) jsPlumbDemo.reset();
    jsPlumb.reset();
    resetRenderMode(desiredMode);
  });
  resetRenderMode(jsPlumb.SVG);
});

JsPlumb 官网

http://jsplumbtoolkit.com/

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐