• hcvh
    了解作者
  • JavaScript
    开发工具
  • 824KB
    文件大小
  • rar
    文件格式
  • 0
    收藏次数
  • 10 积分
    下载积分
  • 8
    下载次数
  • 2018-08-06 16:44
    上传日期
Jsplumb 拓扑图demo,研究jsplumb使用,很好的入门小程序,后续会把jsplumb与react结合的demo发上来
使用jsplumb绘制拓扑图.rar
  • 使用jsplumb绘制拓扑图
  • js
  • jsPlumb.js
    129KB
  • endpoint.js
    55.6KB
  • demo-list.js
    3.1KB
  • anchors.js
    53.5KB
  • renderers-vml.js
    21.7KB
  • overlay-component.js
    9.7KB
  • katavorio-0.6.js
    30.1KB
  • connectors-statemachine.js
    9.5KB
  • dom-adapter.js
    22.2KB
  • jquery.ui.touch-punch-0.2.2.min.js
    1.2KB
  • defaults.js
    59.3KB
  • jquery-1.9.0-min.js
    90.9KB
  • jquery.jsPlumb.js
    7.4KB
  • renderers-svg.js
    23.2KB
  • jquery.jsPlumb-1.4.0-all.js
    392.8KB
  • base-library-adapter.js
    1.5KB
  • connectors-bezier.js
    3.3KB
  • mottle-0.6.js
    26.4KB
  • biltong-0.2.js
    8.8KB
  • jquery.jsPlumb-1.3.1-all.js
    216KB
  • jquery-ui-1.9.2.min.js
    232.2KB
  • browser-util.js
    1.9KB
  • connectors-flowchart.js
    17.7KB
  • util.js
    16.9KB
  • demo.js
    2.4KB
  • dom.jsPlumb.js
    8.2KB
  • jsBezier-0.7.js
    17KB
  • connection.js
    25.2KB
  • image
  • 4.png
    4KB
  • 3.png
    6.5KB
  • 7.png
    6.3KB
  • 5.png
    6.7KB
  • 1.png
    1.7KB
  • 2.png
    7.9KB
  • 6.png
    6.4KB
  • css
  • demo.css
    1.6KB
  • jsplumb.css
    6.1KB
  • font-awesome.css
    21.2KB
  • index.html
    2.9KB
  • 使用jsplumb绘制拓扑图.zip
    431.1KB
  • Jsp.html
    6.7KB
  • MyJsp.html
    5.6KB
内容介绍
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jsPlumb</title> <style type="text/css"> .dragActive { border: 2px dotted orange; } // 当拖动一个连接点时,可连接的连接点会自动使用该css .dropHover { border: 1px dotted red; } // 当拖动一个连接点到可连接的点时,该点会自动使用该css .item { border: 1px solid black; background-color: #ddddff; width: 100px; height: 100px; position: absolute; } #state1 { left: 100px; top: 100px; } #state2 { left: 250px; top: 250px; } #state3 { left: 100px; top: 250px; } </style> </head> <body> <div id="state1" class="item"></div> <div id="state2" class="item"></div> <div id="state3" class="item"></div> <!-- JS --> <!-- support lib for bezier stuff --> <script src="js/jsBezier-0.7.js"></script> <!-- event adapter --> <script src="js/mottle-0.6.js"></script> <!-- geometry functions --> <script src="js/biltong-0.2.js"></script> <!-- drag --> <script src="js/katavorio-0.6.js"></script> <!-- jsplumb util --> <script src="js/util.js"></script> <script src="js/browser-util.js"></script> <!-- main jsplumb engine --> <script src="js/jsPlumb.js"></script> <!-- base DOM adapter --> <script src="js/dom-adapter.js"></script> <script src="js/overlay-component.js"></script> <!-- endpoint --> <script src="js/endpoint.js"></script> <!-- connection --> <script src="js/connection.js"></script> <!-- anchors --> <script src="js/anchors.js"></script> <!-- connectors, endpoint and overlays --> <script src="js/defaults.js"></script> <!-- bezier connectors --> <script src="js/connectors-bezier.js"></script> <!-- state machine connectors --> <script src="js/connectors-statemachine.js"></script> <!-- flowchart connectors --> <script src="js/connectors-flowchart.js"></script> <!-- SVG renderer --> <script src="js/renderers-svg.js"></script> <!-- vml renderer --> <script src="js/renderers-vml.js"></script> <!-- common adapter --> <script src="js/base-library-adapter.js"></script> <!-- no library jsPlumb adapter --> <script src="js/dom.jsPlumb.js"></script> <script> jsPlumb.ready(function() { //var color = '#222'; var instance = jsPlumb.getInstance({ //连线 /* Straight:直线 :贝塞曲线 Flowchart:流程图 State Machine状态机 */ Connector : [ 'Bezier' ], /*//拖动时的演示 DragOptions : { cursor : 'pointer', zIndex : 2000 }, //连接线的样式 PaintStyle : { strokeStyle : 'steelblue', lineWidth : 3 }, //连接点的样式 EndpointStyle : { radius : 6, fillStyle : '#222' }, //hover时线样式 HoverPaintStyle : { strokeStyle : 'green' }, //hover时点的样式 EndpointHoverStyle : { fillStyle : 'red' }, Container : 'demo' //Either an element id, a DOM element, or a selector from the underlying library */ }); jsPlumb.importDefaults({ DragOptions : { cursor : 'pointer' }, //拖动时鼠标停留在该元素上显示指针,通过css控制 PaintStyle : { strokeStyle : '#666' },//元素的默认颜色 EndpointStyle : { width : 20, height : 16, strokeStyle : '#666' },//连接点的默认颜色 Endpoint : "Rectangle",//连接点的默认形状 Anchors : [ "TopCenter" ] //连接点的默认位置 }); var exampleDropOptions = { hoverClass : "dropHover",//释放时指定鼠标停留在该元素上使用的css class activeClass : "dragActive"//可拖动到的元素使用的css class }; var color1 = "#316b31"; var exampleEndpoint1 = { endpoint : [ "Dot", { radius : 11 } ],//设置连接点的形状为圆形 paintStyle : { fillStyle : color1 },//设置连接点的颜色 isSource : true, //是否可以拖动(作为连线起点) scope : "green dot",//连接点的标识符,只有标识符相同的连接点才能连接 connectorStyle : { strokeStyle : color1, lineWidth : 6 },//连线颜色、粗细 connector : [ "Bezier", { curviness : 63 } ],//设置连线为贝塞尔曲线 maxConnections : 1,//设置连接点最多可以连接几条线 isTarget : true, //是否可以放置(作为连线终点) dropOptions : exampleDropOptions //设置放置相关的css }; var color2 = "rgba(229,219,61,0.5)"; var exampleEndpoint2 = { endpoint : "Rectangle", //设置连接点的形状为矩形 anchor : "BottomLeft", //设置连接点的位置,左下角 paintStyle : { fillStyle : color2, opacity : 0.5 }, //设置连接点的颜色、透明度 isSource : true, //同上 scope : 'yellow dot', //同上 connectorStyle : { strokeStyle : color2, lineWidth : 4 },//同上 connector : "Straight", //设置连线为直线 isTarget : true, //同上 maxConnections : 3,//同上 dropOptions : exampleDropOptions,//同上 beforeDetach : function(conn) { //绑定一个函数,在连线前弹出确认框 return confirm("Detach connection?"); }, onMaxConnections : function(info) {//绑定一个函数,当到达最大连接个数时弹出提示框 alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id); } }; var anchors = [ [ 1, 0.2, 1, 0 ], [ 0.8, 1, 0, 1 ], [ 0, 0.8, -1, 0 ], [ 0.2, 0, 0, -1 ] ], maxConnectionsCallback = function( info) { alert("Cannot drop connection " + info.connection.id + " : maxConnections has been reached on Endpoint " + info.endpoint.id); }; var e1 = jsPlumb.addEndpoint("state2", { anchor : "LeftMiddle" }, exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state2的元素上 e1.bind("maxConnections", maxConnectionsCallback);//也可以在加到元素上之后绑定函数 jsPlumb.addEndpoint("state1", exampleEndpoint1);//将exampleEndpoint1类型的点绑定到id为state1的元素上 jsPlumb.addEndpoint("state3", exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state3的元素上 jsPlumb.addEndpoint("state1", { anchor : anchors }, exampleEndpoint2);//将exampleEndpoint2类型的点绑定到id为state1 }); </script> </body> </html>
评论
    相关推荐
    • BBS_system_on_java.rar
      BBS论坛系统由JAVA和JSP实现,开发中涉及JavaBean,JSP和服务器Tomcat5.0.7的设置,数据库用SQL2000。有注册登陆,浏览,发帖 回帖,帖子管理,论坛设置,管理版块,用户管理等模块。
    • 30184342396.rar
      jsp图书管理系统,自己看了,感觉还不错,用的mysql的数据库
    • online.rar
      jsp 在线客服 源码 实现在线聊天的功能
    • oa_09.rar
      oa办公系统 java+tomcat+mySQL实现
    • LibraryManage.rar
      是一个用jsp做前台,java做后台的图书管理系统,可供毕业设计做参考
    • demo.zip
      extjs与Struts整合以及与后台数据库的交互 非常值得学习的一个案例,仅供学习
    • exam.rar
      STRUTS的在线考试系统 数据库MYSQL 超完整,超好用的!
    • JSP+Servlet+JavaBean(MVC).rar
      此项目以JSP、servlet、JavaBean实现MVC三层架构.
    • shop.zip
      网上商城开发源码:jsp+servlet+javabean+DAO设计模式+前台+后台+数据库设计文件(mysql)
    • S2.rar
      小组做的一个旅游网站,比较基础,处理器都是用servlet实现的,数据库是sql2005