系统项目中添加页面向导的详细解析
1、在dreamweaver中建立一个guide.jsp页面，简称为：“向导页面”，设计好向导页面的CSS样式，图片格式，页面应用的脚本等。
2、a)添加guide（向导页面相关CSS,图片，脚本文件等）文件夹到web目录下b)添加guide.jsp（向导页面）到jsp/common目录下 （请根据自己项目的要求定义页面和样式内容存放地址。）
3、在所属项目数据库中添加配置表tab_guide，tab_guide_config。麻质跹礼例：-- Create tablecr髫潋啜缅eate table TAB_GUIDE( id NUMBER(18), autoplay VARCHAR2(10) default 'false', step VARCHAR2(2) default '0', url VARCHAR2(200), msg VARCHAR2(100));-- Add comments to the tablecomment on table TAB_GUIDE is '页面向导';-- Add comments to the columnscomment on column TAB_GUIDE.id is '主键';comment on column TAB_GUIDE.autoplay is '是否自动播放：自动播放true，不自动播放false，默认不自动播放';comment on column TAB_GUIDE.step is '起始位置';comment on column TAB_GUIDE.url is '页面链接';comment on column TAB_GUIDE.msg is '提示信息';-- Create tablecreate table TAB_GUIDE_CONFIG( id NUMBER(18), guideid NUMBER(18), gname VARCHAR2(100), color VARCHAR2(20), bgcolor VARCHAR2(20), position VARCHAR2(50), text VARCHAR2(600), time VARCHAR2(10), orderid NUMBER(4,2) default 0);-- Add comments to the columnscomment on column TAB_GUIDE_CONFIG.id is '主键';comment on column TAB_GUIDE_CONFIG.guideid is '向导主键';comment on column TAB_GUIDE_CONFIG.gname is '向导步骤';comment on column TAB_GUIDE_CONFIG.color is '前景颜色';comment on column TAB_GUIDE_CONFIG.bgcolor is '背景颜色';comment on column TAB_GUIDE_CONFIG.position is '相对于gname对应的元素的位置信息【TL: top left,TR: top right,BL: bottom left,BR: bottom right,LT: left top,LB: left bottom,RT: right top,RB: right bottom,T : top,R : right,B : bottom,L : left】';comment on column TAB_GUIDE_CONFIG.text is '提示信息';comment on column TAB_GUIDE_CONFIG.time is '延时时间单位毫秒';comment on column TAB_GUIDE_CONFIG.orderid is '排序';
4、在需要添加想到的页面下方</form>之后</body>之前添加静态引用引用guide.jsp静态引用，如：<%@ include file="/jsp/common/guide.jsp"%>
5、设置用到的步骤及元素。步骤使用坡纠课柩id作为定位，设置每一步骤的元素id唯一，现当前步骤样式为文字变红，如需修改可修改gu足毂忍珩ide.jsp页面代码，ext.toolbar上的按钮请在text的之中使用<span id=”XXX”></span>标记以方便更改文本颜色。如：{ text: '<span id="search" >查询</span>', icon:"<%=contextPath%>/images/query.gif", handler:search}
6、保存并重新加载页面，查看控制台打印的当前页面URI路径，在数据库的tab_guide表添加一刳噪受刃条记录，主键唯一，并把刚才看到URI路径聚刁擞蛔放入该表的url字段中。表中个字段的含义键字段注释；在tab_guide_config表配置向导步骤，步骤顺序由orderid的顺序决定（值从小到大排序），guideid为对应的tab_guide表的相应记录的主键，个字段的含义键表的字段注释。
7、调用方法，在ext.toolbar中添加按钮调用，具体代码为：{ text: '开始向导', icon:"<%=contextPath%>/" + "images/bzd.gif", handler:guidenow}
8、如果需要默认每次加载页面后都需要调用向导则可以在调用页面的最底部添加代码：<script type="text/javascript"> guidenow();</script>