myflow.js实现一个流程编辑器效果代码
代码语言:html
所属分类:其他
代码描述:myflow.js实现一个流程编辑器效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery-ui-1.11.0.min.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/raphael.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-ui-1.10.3.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/myflow.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/myflow.jpdl4.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/myflow.editors.js"></script> <style type="text/css"> html{ height: 100%; width: 100%; } body { margin: 0; pading: 0; text-align: left; font-family: Arial, sans-serif, Helvetica, Tahoma; font-size: 12px; line-height: 1.5; color: black; background-image: url(//repo.bfw.wiki/bfwrepo/images/myflow/bg.png); position: relative; } .mover { /*border: 1px solid #ddd;*/ background-color: #ddd; } .selected { background-color: #ddd; } #pointer { background-repeat: no-repeat; background-position: center; } #path { background-repeat: no-repeat; background-position: center; } #task { background-repeat: no-repeat; background-position: center; } #state { background-repeat: no-repeat; background-position: center; } img { display: inline-block; vertical-align: middle; } .node { width: 100%; height: 30px; line-height: 30px; padding: 0 8px; margin: 3px 0; box-sizing: border-box; text-align: left; vertical-align: middle; } .node:hover{ background-color: #ddd } .node img { display: inline-block; width: 30px; height: 30px; margin-right: 10px; vertical-align: middle; } .ui-widget-header{ line-height: 36px; font-size: 12px; text-align: center; color: #fff; background: #353c48; } .ui-widget-content{ border: 1px solid #dfe2e5; background: #fff; } #myflow_tools { position: fixed; top: 10px; left: 10px; cursor: default; z-index: 10; padding: 10px; border: 2px solid #dfe2e5; background-color: #ffffff; } #myflow_props { position: fixed; top: 30px; right: 50px; z-index: 101; background-color: #fff; width: 220px; padding: 3px; } #myflow_props table { width: 100%; border: none; cellpadding:0; cellspacing:0; } #myflow_props th, #myflow_props td{ padding: 2px 5px; color: #94a1b2; background: #fff; border: none; border: none; } #myflow_props th { width: auto; letter-spacing: 2px; text-align: left; } #myflow_props td { min-width: 90px; } #myflow_props input { line-height: 30px; height: 34px; width: 100%; padding: 0 5px; box-sizing: border-box; border: 1px solid #ced0da } .tools_box, .props_box { position: relative; z-index: 11; } #delete { width: 90px; padding: 0 8px; text-align: left; } .readonly { position: absolute; top: 0; left: 0; cursor: pointer; background-color: transparent; width: 100%; height: 100%; z-index: 102; } .cover { position: absolute; top: 0; left: 0; cursor: pointer; background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; z-index: 10001; } .cover>.box{ position: absolute; top: 15%; left: 50%; width: 400px; height:180px; margin-left: -200px; border: 1px solid #cccccc; background-color: #ffffff; z-index: 10002; cursor: pointer; } .cover>.box>h4{ padding: 0; margin: 0; height: 35px; line-height: 35px; font-size: 18px; border-bottom: 1px solid #edeeee; background: #f8f8f8; } .cover>.box>h4>.title{ float: left; margin-left: 15px; } .cover>.box>h4>.cancel{ float: right; display: block; margin: 8px 8px 0 0; width: 17px; height: 17px; background:url("//repo.bfw.wiki/bfwrepo/images/myflow/cls.png") no-repeat left top; } .cover>.box>p{ margin-top: 40px; text-align: center; font-size: 14px; } .line { width: 100%; height: 2px; margin: 5px 0; background-color: #dfe2e5; } </style> <script type="text/javascript"> $(function () { var is_save=true; $(document).click(function(e){ is_save=true; e.stopPropagation(); //防止冒泡 }); //暂存事件 $("#linshi_save").click(function(e){ is_save=false; $("#myflow_save").trigger("click"); //触发保存事件 e.stopPropagation(); //防止冒泡 }); $('#myflow').myflow( { basePath: "", restore: eval("({\"states\":{\"rect1\":{\"type\":\"join\",\"text\":{\"text\":\"合并\"},\"attr\":{\"x\":752,\"y\":259,\"width\":48,\"height\":48},\"props\":{\"show\":{\"value\":\"合并\"},\"transformationGlobal\":{\"value\":\"\"}}},\"rect2\":{\"type\":\"start\",\"text\":{\"text\":\"开始\"},\"attr\":{\"x\":249,\"y\":265,\"width\":48,\"height\":48},\"props\":{\"show\":{\"value\":\"开始\"}}.........完整代码请登录后点击上方下载按钮下载查看
网友评论0