Zhiqim UI是一套集成Javascript库、Css库、Font库、常用ico图标等,并在其上开发的大量UI组件组成的前端开发套件。
stepbar.htm6KB
<#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()}