纯JavaScript实现HTML业务流程图


流程!又是流程!

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

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

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


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3