前台页面 显示步骤

首先来说一下我们的主题。来看一下图。

这两张图，主要是看页面上部分，能够显示当前正在进行的操作步骤。我们分享一下这个页面的制作过程。
首先，这个页面主要是由三部分组成的。上部分是显示当前顺序，基本不会变化。中间部分会根据具体的业务显示不同的内容。最下面会显示操作步骤。我们看中间的部分是变化最大的，而相对上下部分则很固定。于是采用了嵌套页面将中间的页面嵌套进去。
关键代码如下：

 <!-- 步骤条开始  -->
        <div>
        //此处先省略步骤的布局代码
        </div>
<!-- 步骤条结束  -->

  <!-- 每步的内容框架 start-->
        <div id="content">
          <!--  添加试卷名称1一-->
        <%@ include file="/WEB-INF/jsp/paperName.jsp"%>
        </div>

<!--上一步，下一步按钮区 start  -->
<div style="float: right; margin-right: 5%;">
<a id="btnBack"  href="#" class="easyui-linkbutton l-btn l-btn-plain" data-options="iconCls:'icon-undo'" plain="true" >
<span>上一步</span>
</a>
<a id="btnNext" href="#" class=" easyui-linkbutton l-btn l-btn-plain" data-options="iconCls:'icon-redo'" plain="true" >
<span>下一步</span> 
</a>
<a id="finish" href="#" class=" easyui-linkbutton l-btn l-btn-plain" data-options="iconCls:'icon-ok'" plain="true" >
<span class="l-btn-left">
<span>完成</span>
</span>
</a>
</div>  
<!--上一步，下一步按钮区end -->

整体布局如下。下面我们看一下步骤条的布局。

<div>
            <ol class="ui-step ui-step-blue ui-step-4">
                <li id="li1" class="ui-step-start ui-step-active">
                    <div class="ui-step-line">-</div>
                    <div id="d1" class="ui-step-icon">
                        <i class="iconfont"></i> <i class="ui-step-number">1</i> <span
                            class="ui-step-text">试卷名称</span>
                    </div>
                </li>
                <li id="li2" class="ui-step-line">
                    <div class="ui-step-line">-</div>
                    <div class="ui-step-icon">
                        <i class="iconfont"></i> <i class="ui-step-number">2</i> <span
                            class="ui-step-text">选择题型</span>
                    </div>
                </li>
                <li id="li3" class="ui-step-line">
                    <div class="ui-step-line">-</div>
                    <div class="ui-step-icon">
                        <i class="iconfont"></i> <i class="ui-step-number">3</i> <span
                            class="ui-step-text">题型顺序</span>
                    </div>
                </li>
                <li id="li4" class="ui-step-end ui-step-line">
                    <div class="ui-step-line">-</div>
                    <div class="ui-step-icon">
                        <i class="iconfont"></i> <i class="ui-step-number">4</i> <span
                            class="ui-step-text">题型分值</span>
                    </div>
                </li>
            </ol>
        </div>

具体js动态事件明日待续。