179 lines
6.7 KiB
HTML
179 lines
6.7 KiB
HTML
<#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()} |