纯JavaScript实现HTML业务流程图

流程！又是流程！

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

在网上搜索大多数都是工作流的生成的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='生成流程图' οnclick="createFlow();" />

 

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

 

具体演示程序和代码以及插件见下载