开发文档
阅读本文档您可以快速学会使用表单设计器和开发扩展控件!
阅读本文档您可以快速学会使用表单设计器和开发扩展控件!
Flowdesign Leipi Org
我们参考了很多相关流程设计器,现重新规划出一个真正好用和易于二次开发的流程设计工具,它具有【精巧、方便、实用】等优点。
兼容:IE7++、Chrome、Firefox 等主流浏览器
请先下载
解压后,参考index.html
示例
//使用低版本JQuery更好兼容低版本IE <script charset="utf-8" src="/Public/js/jquery-1.7.2.min.js"></script> <script charset="utf-8" src="/Public/js/formbuild/bootstrap/js/bootstrap.min.js"></script> //JQuery Ui < 2.x.x <script src="/Public/js/jquery-ui/jquery-ui-1.9.2-min.js" ></script> //1.3.16 兼容性最好 <script src="/Public/js/jsPlumb/jquery.jsPlumb-1.3.16-all-min.js"></script> //右键菜单 <script src="/Public/js/jquery.contextmenu.r2.js"></script> //下拉列表选择器 <script src="/Public/js/jquery.multiselect2side/js/jquery.multiselect2side.js"></script> //表单设计器,必须包括以上的JS <script src="/Public/js/leipi.flowdesign.v3.js"></script>
正在完善中...
部分功能你可以请先阅读代码,我们已经详细注释!
创建流程设计器 和 配置说明
/*创建流程设计器 和 配置说明*/ var _canvas = $("#flowdesign_canvas").Flowdesign({ processData:{"total":2,"list":{ "37":{ "id":"37",//当前步骤ID "flow_id":"8",//所属流程ID "process_name":"填写表单",//步骤名称 "process_to":"38",//下一步 多个用 逗号隔开 "icon":"icon-play",//图标 "style":"left:183px;top:68px;color:#0e76a8;"//样式 }} },//步骤节点数据 fnRepeat:function(){ alert("步骤连接重复"); }, fnClick:function(){ alert("单击"); }, fnDbClick:function(){ alert("双击"); }, canvasMenus : { "one": function(t) {alert('画面右键')} }, processMenus: { "one": function(t) {alert('步骤右键')} }, /*右键菜单样式*/ menuStyle: { border: '1px solid #5a6377', minWidth:'150px', padding:'5px 0' }, itemStyle: { fontFamily : 'verdana', color: '#333', border: '0', /*borderLeft:'5px solid #fff',*/ padding:'5px 40px 5px 20px' }, itemHoverStyle: { border: '0', /*borderLeft:'5px solid #49afcd',*/ color: '#fff', backgroundColor: '#5a6377' }, //这是连接线路的绘画样式 connectorPaintStyle : { lineWidth:3, strokeStyle:"#49afcd", joinstyle:"round" }, //鼠标经过样式 connectorHoverStyle : { lineWidth:3, strokeStyle:"#da4f49" } });