纯JavaScript实现HTML业务流程图

核心提示：流程！又是流程！流程无时无处存在我们的身边，最近项目当中需要使用一种在网页上生成流程的工具，纯JavaScript实现HTML业务流程图，并且工具支持鼠标事件和样式表，在网上搜索大多数都是工作流的生成的XML，当存在多分支时，采用“，在XML内附带位置信息的基础上采用一个名为WZ_Grahpic矢量库进行链

流程！又是流程！

流程无时无处存在我们的身边，最近项目当中需要使用一种在网页上生成流程的工具，并且工具支持鼠标事件和样式表。

在网上搜索大多数都是工作流的生成的XML，在XML内附带位置信息的基础上采用一个名为WZ_Grahpic矢量库进行链接。和自己的业务在原理上类似，但是业务千差万别。

那么，这次给大家带来的是一个简单，方便，实用的JQuery插件，废话不多说，看预览效果图

网页代码：

Html代码

<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='生成流程图'　　/>

Js代码 <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属性当中填写，当存在多分支时，采用“，”分割。