纯JavaScript实现HTML业务流程图

etfired

流程！又是流程！
流程无时无处存在我们的身边，最近项目当中需要使用一种在网页上生成流程的工具，并且工具支持鼠标事件和样式表。
在网上搜索大多数都是工作流的生成的XML，在XML内附带位置信息的基础上采用一个名为WZ_Grahpic矢量库进行链接。和自己的业务在原理上类似，但是业务千差万别。
那么，这次给大家带来的是一个简单，方便，实用的JQuery插件，废话不多说，看预览效果图


网页代码：

 
<div id="spanBefore"><div class="before" begin=-1 id="1" next="2,3,11">环节一</div><div class="before" id="2" next="4">环节二</div><div class="before" id="3" next="5">环节三</div><div class="before" id="4" next="6">环节四</div><div class="before" id="5" next="6">环节五</div><div class="before" id="6" next="7,8">环节六</div><div class="before" id="7" next="9">环节七</div><div class="before" id="8" next="10,11">环节八</div><div class="before" id="9" next="12">环节九</div><div class="before" id="10" next="12">环节10</div><div class="before" id="11" next="12">环节11</div><div class="before" id="12" next="-1">环节12</div></div><div style="padding:30px;border:1px dotted black;"><div style="position:relative; width:300px; height:300px;" id="draw"></div></div><input type=button value='生成流程图'  /> 
<script type="text/javascript">var createFlow = function(){$("#spanBefore").flow({hover:function(){$(this).addClass("hover");},remove:function(){$(this).removeClass("hover");},click:function(){alert($(this).attr("id") + "->" + $(this).attr("next") + " Click");}});}</script> 从HTML结构当中，不难看出非常，每个class属性为before的div层为一个节点，起点节点含有begin＝－1的属性。每个节点的下一节点在next属性当中填写，当存在多分支时，采用“，”分割。
 
具体演示程序和代码以及插件见下载