Xpages实现流程控制展示

今天整理一个系统，发现系统的流程很多，之前只是展示给用户当前步骤为xxx，用户对于整个流程并没有详细的了解，所以找了一个使用div与css做的展示流程，在xpages中使用效果还不错。

直接在xpages中添加样式表就可以，css代码如下：

<style type="text/css">
.stepInfo{position:relative;background:#f2f2f2;margin:0px auto 0 auto;width:850px;}
.stepInfo li{float:left;width:48%;height:0.6em;background:#45a0f3;}
.stepIco{border-radius:1.4em;padding:0.2em;background:#45a0f3;text-align:center;line-height:1.4em;color:#fff; position:absolute;width:1.4em;height:1.4em;}
.stepIco1{top:-0.7em;left:4%;}
.stepIco2{top:-0.7em;left:10%;}
.stepIco3{top:-0.7em;left:15%;}
.stepIco4{top:-0.7em;left:20%;}
.stepIco5{top:-0.7em;left:25%;}
.stepIco6{top:-0.7em;left:30%;}
.stepIco7{top:-0.7em;left:35%;}
.stepIco8{top:-0.7em;left:40%;}
.stepIco9{top:-0.7em;left:45%;}
.stepIco10{top:-0.7em;left:50%;}
.stepIco11{top:-0.7em;left:55%;}
.stepIco12{top:-0.7em;left:60%;}
.stepIco13{top:-0.7em;left:65%;}
.stepIco14{top:-0.7em;left:70%;}
.stepIco15{top:-0.7em;left:75%;}
.stepIco16{top:-0.7em;left:80%;}
.stepIco17{top:-0.7em;left:85%;}
.stepIco18{top:-0.7em;left:90%;}
.stepIco19{top:-0.7em;left:95%;}
.stepText1{color:red;margin-top:0.4em;}
.stepText2{color:black;margin-top:0.4em;}
.stepText3{color:#C8C8C8;margin-top:0.4em;}
 </style>

然后插入html代码，如下：

<xp:panel style="height:140.0px">
<div class="stepInfo">
<ul>
<li style="list-style-type:none;"></li>
<li style="list-style-type:none;"></li>


</ul>
<div class="stepIco stepIco1">
1
<div class="stepText2" id="c1">紧急命令单待发布</div>
</div>
<div class="stepIco stepIco2">
2
<div class="stepText2" id="c2">紧急命令单待提交</div>
</div>
<div class="stepIco stepIco3">
3
<div class="stepText2" id="c3">调查报告待提交</div>
</div>
<div class="stepIco stepIco4">
4
<div class="stepText2" id="c4">待技术支持经理审核</div>
</div>
<div class="stepIco stepIco5">
5
<div class="stepText2"  id="c5">待事业部审核</div>
</div>
<div class="stepIco stepIco6">
6
<div class="stepText2" id="c6">待型号经理审核</div>
</div>
<div class="stepIco stepIco7">
7
<div class="stepText2"  id="c7">待区域经理审核</div>
</div>
<div class="stepIco stepIco8">
8
<div class="stepText2"  id="c8">待技术经理审核</div>
</div>
<div class="stepIco stepIco9">
9
<div class="stepText2"  id="c9">待工贸副总审核</div>
</div>
<div class="stepIco stepIco10">
10
<div class="stepText2"  id="c10">待产品顾服部审核</div>
</div>
<div class="stepIco stepIco11">
11
<div class="stepText2"  id="c11">质改室处理中</div>
</div>
<div class="stepIco stepIco12">
12
<div class="stepText2"  id="c12">待开发部长审核</div>
</div>
<div class="stepIco stepIco13">
13
<div class="stepText2"  id="c13">待商检经理审核</div>
</div>
<div class="stepIco stepIco14">
14
<div class="stepText2"  id="c14">待本部长审核审核</div>
</div>
<div class="stepIco stepIco15">
15
<div class="stepText2"  id="c15">待安全认证审核</div>
</div>
<div class="stepIco stepIco16">
16
<div class="stepText2"  id="c16">待产品顾服部长审核</div>
</div>
<div class="stepIco stepIco17">
17
<div class="stepText2"  id="c17">待买断中</div>
</div>
<div class="stepIco stepIco18">
18
<div class="stepText2"  id="c18">闭环</div>
</div>
<div class="stepIco stepIco19">
X
<div class="stepText3"  id="c19">流程检查出错</div>
</div>
</div>
</xp:panel>

注意 放在一个panel里面，控制下panel的宽高。

这样就可以实现流程静态的展示，现在还需要插入一段简单的js代码去动态的显示目前的步骤，这段代码可以直接在xpages里添加，我是在xpages的定制控件--事件--onClientLoad中的客户机中添加的。

js代码如下：

var a = document.getElementById("view:_id1:_id2:_id3:inputText3").value;


switch (Number(a))
{
case 0:
  document.getElementById("c1").className="stepText1";
  break;
case 1:
 document.getElementById("c2").className="stepText1";
  break;
case 2:
 document.getElementById("c3").className="stepText1";
  break;
case 3:
  document.getElementById("c4").className="stepText1";
  break;
case 4:
  document.getElementById("c5").className="stepText1";
  break;
case 5:
  document.getElementById("c6").className="stepText1";
  break;
case 6:
  document.getElementById("c7").className="stepText1";
  break;
case 7:
  document.getElementById("c8").className="stepText1";
  break;
case 8:
  document.getElementById("c9").className="stepText1";
  break;
case 9:
  document.getElementById("c10").className="stepText1";
  break;
default:
 document.getElementById("c19").className="stepText1";
  break;
}

只要注意下a的id就可以了~a代表的是流程的步骤，这样就可以很简单的用最基础的代码实现流程展示了~~~