<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>jsplumb-visio</title>
<link href="./lib/fonts/font-awesome.min.css" rel="stylesheet">
<link href="./lib/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="./lib/jqueryui/jquery-ui.css" rel="stylesheet">
<link href="./jvisio.css" rel="stylesheet">
</head>
<body>
<div id="app" style="margin-top: 10px;">
<div class="container-fluid">
<div class="row">
<div id="diagramContainer-left" class="col-md-2 bg-info min-height">
<h4 class="text-center">工具区域</h4>
<div class="col-sm-12">
<div class="jnode-box jnode-round bdc-success" data-template="jnode-template"
data-jnode="start" data-jnode-class="jnode-radius bdc-success"><span>开始</span></div>
</div>
<div class="col-sm-12">
<div class="jnode-box jnode-rectangle bdc-primary" data-template="jnode-template"
data-jnode="task" data-jnode-class="jnode-task bdc-primary"><span>节点</span></div>
</div>
<div class="col-sm-12">
<div class="jnode-box jnode-diamond bdc-warning" data-template="jnode-template"
data-jnode="judge" data-jnode-class="jnode-diamond jnode-judge bdc-warning"><span>判断</span></div>
</div>
<div class="col-sm-12">
<div class="jnode-box jnode-round bdc-danger" data-template="jnode-template"
data-jnode="end" data-jnode-class="jnode-radius bdc-danger"><span>结束</span></div>
</div>
</div>
<div class="col-sm-8 bg-success min-height" id="diagramContainer-main">
<h4 class="text-center">设计区域</h4>
<!-- 定义目标节点的模板 -->
<script type="text/x-mustache" id="jnode-template">
<div class="jnode-panel" id="{{id}}" style="top:{{top}}px;left:{{left}}px">
<div class="jnode-box {{jnodeClass}}">{{{jnodeHtml}}}</div>
</div>
</script>
</div>
<div class="col-sm-2 bg-info min-height" id="diagramContainer-control">
<h4 class="text-center">属性设置</h4>
</div>
</div>
</div>
</div>
<script src="./lib/jquery/jquery.min.js"></script>
<script src="./lib/uuid.min.js"></script>
<script src="./lib/mustache.min.js"></script>
<script src="./lib/jqueryui/jquery-ui.min.js"></script>
<script src="./lib/jquery.jsPlumb-1.7.2.js"></script>
<script src="./jvisio-config.js"></script>
<script src="./jvisio-index.js"></script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
jsPlumb在线流程设计器demo参考源码
共34个文件
js:15个
css:6个
svg:2个
3星 · 超过75%的资源 需积分: 50 49 下载量 75 浏览量
2019-11-01
09:07:26
上传
评论
收藏 1.24MB ZIP 举报
温馨提示
主要在学习jsplumb过程中利用jqueryUI、bootstrap等资源改版的web版在线流程设计器。详情效果图参考地址:https://blog.csdn.net/hexin8888/article/details/83992816
资源推荐
资源详情
资源评论
收起资源包目录
jsPlumb在线流程设计器demo.zip (34个子文件)
jsPlumb在线流程设计器demo
index.html 2KB
jvisio-index.js 5KB
lib
bootstrap
bootstrap.min.css 120KB
bootstrap.js 68KB
bootstrap.min.js 35KB
bootstrap.css 151KB
jsplumb.js 614KB
jqueryui
jquery-ui.min.js 235KB
jquery-ui.css 32KB
jquery-ui.js 476KB
uuid.min.js 2KB
jsplumb.min.js 195KB
jquery
jquery.form.min.js 17KB
jquery.min.js 182KB
jquery.form.js 41KB
jquery.cookie.js 997B
jquery.jsPlumb-1.7.2.js 456KB
fonts
fontawesome-webfont.svg 307KB
glyphicons-halflings-regular.ttf 40KB
font-awesome.min.css 34KB
fontawesome-webfont.woff2 65KB
fontawesome-webfont.eot 69KB
FontAwesome.otf 169KB
fontawesome-webfont.woff 82KB
glyphicons-halflings-regular.woff2 18KB
glyphicons-halflings-regular.eot 20KB
glyphicons-halflings-regular.svg 62KB
font-awesome.css 34KB
glyphicons-halflings-regular.woff 23KB
fontawesome-webfont.ttf 139KB
mustache.min.js 9KB
jvisio-config.js 2KB
jvisio.css 2KB
flow-index1.png 148KB
共 34 条
- 1
资源评论
- 专注研发ERP低代码开发平台2020-06-24没有啥子用,内容太少了,js还混淆了
- 0O00O00O02020-01-04只能看看,非常简单 而且 有bug
吉祥如意0401
- 粉丝: 15
- 资源: 26
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功