jsPlumb学习实例_jsplumb项目实战资源-CSDN下载

共10个文件

js：6个

css：2个

html：2个

jsPlumb

需积分: 50 102 浏览量 2018-06-04 11:03:28 上传评论收藏 231KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

jsPlumbDemo.rar （10个子文件）

jsPlumbDemo

jsPlumb-2.2.8.js 591KB

metadata.js 1009B

jquery-ui.custom.min.css 3KB

bootstrap.min.css 113KB

demo - 副本.html 4KB

bootstrap.min.js 36KB

demo.js 6KB

jquery-ui.min.js 248KB

jquery-2.1.4.min.js 82KB

demo.html 4KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>社会主义好</title> <link rel="stylesheet" href="bootstrap.min.css" /> <link rel="stylesheet" href="jquery-ui.custom.min.css" /> <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <script type="text/javascript" src="jquery-ui.min.js"></script> <script src="bootstrap.min.js"></script> <script type="text/javascript" src="jsPlumb-2.2.8.js"></script> <script type="text/javascript" src="metadata.js"></script> <script type="text/javascript" src="demo.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ setLeftMenu(metadata); //监听新的连接 instance.bind("connection", function (connInfo, originalEvent) { init(connInfo.connection); }); instance.bind("dblclick", function (conn, originalEvent) { if (confirm("要删除从 " + conn.source.getElementsByTagName("span")[0].innerHTML + " —— " + conn.target.getElementsByTagName("span")[0].innerHTML + " 的连接么?")){ instance.detach(conn); } }); }); </script> <style> #container { min-height: 700px; position: relative; border: 1px solid #666666; background-color: #ffffff; border-radius: 5px; z-index: 0; overflow: auto; } #container .model { border: 1px solid #ddd; border-radius: 5px; margin-bottom: 0; min-width: 160px; } #container .model h4{ background-color: #438eb9; text-align: center; background-image: none; font-size: 16px; color: #fff; border: 1px solid #438eb9; margin: 0px; height: 35px; vertical-align: middle; padding: 0 3px; line-height: 30px; } #container .model h4 a{ color: #fff!important; } #container .model ul{ border: 1px solid #62a8d1; max-height: 320px; overflow: auto; margin: 0px; width: 100%; padding: 0px; } #container .model ul li{ border-bottom: 1px solid #62a8d1; font-size: 15px; list-style-type: none; } .jtk-endpoint, .endpointTargetLabel, .endpointSourceLabel { cursor: pointer; } #leftMenu li{ height: 40px; width: 150px; background-color: #438eb9; border-radius: 5px; font-size: 18px; color: #fff; text-align: center; margin-bottom: 10px; list-style-type: none; vertical-align: middle; line-height: 40px; z-index: 1; cursor: pointer; } </style> </head> <body> <div id="demo" style="margin:20px;"> <div class="container-fluid"> <div class="row"> <div class="col-xs-2" style="min-height: 700px;background-color: #62a8d1;border-radius:5px;padding-top: 12px;width: auto;"> <div class="content_wrap" style="width: 100%;"> <div class="left" style="width: 100%;"> <ul id="leftMenu" style="overflow: auto;margin: 0px;padding:0px;"></ul> </div> </div> </div> <div class="col-xs-10"> <div id="container"></div> </div> </div> </div> <div style="padding-top: 10px;"> 模型名称：<input type="text" value='' id="modelName" style="height: 32px;margin-right:5px;"/> 模型描述：<input type="text" value='' id="modelDesc" style="height: 32px;margin-right:5px;"/> <button class="btn btn-white btn-info" type="button" onclick="save()" style="display: inline-block;"> <i class="ace-icon fa fa-check bigger-120 blue"></i> 保存</button> </div> <div id="myModal" class="modal fade" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">请选择模型联系条件</h4> </div> <div class="modal-body"> 连线类型:<select id="twoWay"> <option value="false">单向</option> <option value="true">双向</option> </select> 条件:<select id="select_sourceList"> </select> <select id="select_comparison" > <option value="=" selected="selected">=</option> </select> <select id="select_targetList"> </select> </div> <div class="modal-footer"> <button id="submit_label" type="button" class="btn btn-primary" data-dismiss="modal">确定</button> </div> </div> </div> </div> </div> </body> </html>

评论收藏

内容反馈