first commit
This commit is contained in:
@@ -0,0 +1,195 @@
|
||||
<#def title = "标签页"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " 标签页是参考tabnav设计出更简单易用的内容重叠布局的导航页。标签页使用nav和section作为是标签和内容显示。在nav中使用li表示每个标签，在section中使用div作为每个标签显示的内容。"/>
|
||||
<#def prevUrl = "../dialog/loading.htm"/>
|
||||
<#def nextUrl = "stepbar.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<script>
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
html = Z.Strings.replaceAll(html, " class=\"\"", "");
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "nav", "tabnav")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
标签页是参考tabnav设计出更简单易用的内容重叠布局的导航页。标签页使用nav和section作为是标签和内容显示。在nav中使用li表示每个标签，在section中使用div作为每个标签显示的内容。
|
||||
</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 data-role="z-tabnav" class="z-tabnav">
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="z-active">标签一</li>
|
||||
<li>标签二</li>
|
||||
<li>标签三</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section>
|
||||
<div class="z-active z-pd10">
|
||||
标签一内容
|
||||
</div>
|
||||
<div class="z-pd10">
|
||||
标签二内容
|
||||
</div>
|
||||
<div class="z-pd10">
|
||||
标签三内容
|
||||
</div>
|
||||
</section>
|
||||
</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，包含属性[data-role="z-tabnav"]和[class="z-tabnav"]<br>
|
||||
2、在div下包括两大元素nav和section。其中nav表示标签部分，section表示内容显示部分<br>
|
||||
3、在nav中通过ul和li把标签设定好，如例子中标签一、标签二、标签三。其中有[class="z-active"]的表示当前激活标签<br>
|
||||
4、在section中对应li编写三个标签内容div和li个数和顺序对应。其中有[class="z-active"]的表示当前激活标签，[class="z-pd10"]表示标签内容内边距10px
|
||||
</div>
|
||||
</section>
|
||||
</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 data-role="z-tabnav" class="z-tabnav">
|
||||
<nav>
|
||||
<span>标题</span>
|
||||
<ul class="zi-float-right">
|
||||
<li class="z-active">标签一</li>
|
||||
<li>标签二</li>
|
||||
<li>标签三</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section class="z-pd-t20">
|
||||
<div class="z-active z-bd z-bd-rd5 z-pd10">
|
||||
标签一内容
|
||||
</div>
|
||||
<div class="z-bd z-bd-rd5 z-pd10">
|
||||
标签二内容
|
||||
</div>
|
||||
<div class="z-bd z-bd-rd5 z-pd10">
|
||||
标签三内容
|
||||
</div>
|
||||
</section>
|
||||
</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，包含属性[data-role="z-tabnav"]和[class="z-tabnav"]<br>
|
||||
2、在div下包括两大元素nav和section。其中nav表示标签部分，section表示内容显示部分<br>
|
||||
3、在nav中通过ul和li把标签设定好，如例子中标签一、标签二、标签三。其中有[class="z-active"]的表示当前激活标签<br>
|
||||
4、在section中对应li编写三个标签内容div和li个数和顺序对应。其中在section中定义[class="z-pd-t20"]表示所有标签内容顶部内边距为20px<br>
|
||||
5、在section标签内容中[class="z-active"]的表示当前激活标签，[class="z-pd10"]表示标签内容内边距10px，[class="z-bd z-bd-rd5"]表示标签内容有5像素圆角边框
|
||||
</div>
|
||||
</section>
|
||||
</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 data-role="z-tabnav" class="z-tabnav z-bordered">
|
||||
<nav class="zi-h60">
|
||||
<span class="zi-px22 zi-mg-t8">标题</span>
|
||||
<ul class="zi-float-right zi-h50 zi-px20">
|
||||
<li class="z-active">标签一</li>
|
||||
<li>标签二</li>
|
||||
<li>标签三</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section>
|
||||
<div class="z-active z-pd10">
|
||||
标签一内容
|
||||
</div>
|
||||
<div class="z-pd10">
|
||||
标签二内容
|
||||
</div>
|
||||
<div class="z-pd10">
|
||||
标签三内容
|
||||
</div>
|
||||
</section>
|
||||
</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，包含属性[data-role="z-tabnav"]和[class="z-tabnav z-bordered"]表示有边框<br>
|
||||
2、在div下包括两大元素nav和section。其中nav表示标签部分，section表示内容显示部分<br>
|
||||
3、在nav中通过ul和li把标签设定好，如例子中标签一、标签二、标签三。其中有[class="z-active"]的表示当前激活标签<br>
|
||||
4、在section中对应li编写三个标签内容div和li个数和顺序对应。其中有[class="z-active"]的表示当前激活标签，[class="z-pd10"]表示标签内容内边距10px
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
Reference in New Issue
Block a user