ziqim/zhiqim_ui/document/tutorial/ui/nav/stepbar.htm

<#def title = "步骤条"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "步骤条是通过指定多个步骤标签，在每步中展示激活的一个步骤标签的导航页。步骤条使用nav作为每个步骤。"/>
<#def prevUrl = "tabnav.htm"/>
<#def nextUrl = "tooltip.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav()}

<style>
.color{display:block;width:20px;height:20px !important;margin:15px 0 15px 10px !important;cursor:pointer;}
</style>
<script>
function doChange(tabnav)
{
    doUpdateCode(Z(tabnav));
}

function doUpdateCode($this)
{//更新代码
    var html = $this.find("section > div").htmlt();
    $this.find("section > div").next("div > span").html(html);
}

function doSelectColor(elem, color)
{
    Z(elem).parent().next("section > div > div").each(function(stepbar)
    {
        Z(stepbar).removeClass("z-red");
        Z(stepbar).removeClass("z-orange");
        Z(stepbar).removeClass("z-yellow");
        Z(stepbar).removeClass("z-green");
        Z(stepbar).removeClass("z-cyan");
        Z(stepbar).removeClass("z-blue");
        Z(stepbar).removeClass("z-purple");
        
        if (Z.Validates.isNotEmpty(color))
            Z(stepbar).addClass(color);
    });
    
    doUpdateCode(Z(elem).parent().parent());
}

function doSelectStep(elem)
{
    Z(elem).parent().parent().next("section > div > div").each(function(stepbar)
    {
        var $step = Z(stepbar).children("nav");
        $step.removeClass("z-active");
        Z($step[elem.value]).addClass("z-active");
    });
    
    doUpdateCode(Z(elem).parent().parent());
}
</script>

<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "nav", "stepbar")}

<!--主体-->
<div id="mainbody" class="mainbody">
${zhiqim_com_breadcrumb("文库", "教程", "步骤条")}
<div class="content">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
    <p class="z-text-blue">步骤条：</p>
    <p class="z-color-333" style="text-indent:38px;">
        步骤条是通过指定多个步骤标签，在每步中展示激活的一个步骤标签的导航页。步骤条使用nav作为每个步骤。
        样式通过before和after属性自动在每个步骤后加上白色箭头。
    </p>
</div>

<#-- 一、默认步骤条效果 -->
<div class="tutorial title">一、默认步骤条效果</div>

<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <ul class="zi-float-left">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <!-- 默认步骤条效果 -->
    <div class="z-stepbar">
        <nav>
            <span class="z-round z-white z-mg-r5">1</span><span>第一步 创建活动</span>
        </nav>
        <nav>
            <span class="z-round z-white z-mg-r5">2</span><span>第二步 选择宝贝</span>
        </nav>
        <nav class="z-active">
            <span class="z-round z-white z-mg-r5">3</span><span>第三步 保存配置</span>
        </nav>
        <nav>
            <span class="z-round z-white z-mg-r5">4</span><span>第四步 选择宝贝</span>
        </nav>
    </div>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、定义一个div，包含样式类[class="z-stepbar"]，默认步骤条width:100%，height:32px<br>
    2、在div下包括多个nav，每个nav即一个步骤，其中有[class="z-active"]的nav表示当前步骤<br>
</div>
</section>
</div>

<#-- 二、各种颜色步骤条效果 -->
<div class="tutorial title">二、各种颜色步骤条效果</div>

<#var colorMap = Jsons.toMapSS(context.getResourceString("/document/tutorial/ui/css/zhiqim.pre.json", "UTF-8"))/>
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
<nav>
    <span class="z-px14">步骤：</span>
    <select data-role="z-select" class="z-relative-left z-w80 z-h30 z-mg-t8" onchange="doSelectStep(this);">
    <option value="0">第一步</option>
    <option value="1" selected>第二步</option>
    <option value="2">第三步</option>
    <option value="3">第四步</option>
    </select>
    <span class="z-px14">颜色：</span>
    <span class="color" style="background-color:${colorMap.get("btnBdColor")}" onclick="doSelectColor(this, '');"></span>
    <span class="color" style="background-color:${colorMap.get("redBdColor")}" onclick="doSelectColor(this, 'z-red');"></span>
    <span class="color" style="background-color:${colorMap.get("orangeBdColor")}" onclick="doSelectColor(this, 'z-orange');"></span>
    <span class="color" style="background-color:${colorMap.get("yellowBdColor")}" onclick="doSelectColor(this, 'z-yellow');"></span>
    <span class="color" style="background-color:${colorMap.get("greenBdColor")}" onclick="doSelectColor(this, 'z-green');"></span>
    <span class="color" style="background-color:${colorMap.get("cyanBdColor")}" onclick="doSelectColor(this, 'z-cyan');"></span>
    <span class="color" style="background-color:${colorMap.get("blueBdColor")}" onclick="doSelectColor(this, 'z-blue');"></span>
    <span class="color" style="background-color:${colorMap.get("purpleBdColor")}" onclick="doSelectColor(this, 'z-purple');"></span>
    <ul class="zi-float-right">
        <li class="z-active">示例</li>
        <li>代码</li>
        <li>说明</li>
    </ul>
</nav>
<section style="min-height:150px;">
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
    <!-- 默认步骤条效果 -->
    <div class="z-stepbar z-red">
        <nav>
            <span class="z-round z-white z-mg-r5">1</span><span>第一步 创建活动</span>
        </nav>
        <nav class="z-active">
            <span class="z-round z-white z-mg-r5">2</span><span>第二步 选择宝贝</span>
        </nav>
        <nav>
            <span class="z-round z-white z-mg-r5">3</span><span>第三步 保存配置</span>
        </nav>
        <nav>
            <span class="z-round z-white z-mg-r5">4</span><span>第四步 选择宝贝</span>
        </nav>
    </div>
</div>
<div class="z-relative-left z-w100p z-pd10">
    <span class="z-text-prewrap z-pre"></span>
</div>
    
<div class="z-pd10 z-px16 z-lh200p">
    1、定义一个div，包含样式类[class="z-stepbar"]，默认步骤条width:100%，height:32px，加上颜色[class="z-red"]表示红色，共支持七种颜色，请选择查看<br>
    2、在div下包括多个nav，每个nav即一个步骤，其中有[class="z-active"]的nav表示当前步骤<br>
</div>
</section>
</div>
${zhiqim_com_chapter()}
</div>

<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>
${zhiqim_com_footer()}