ziqim/zhiqim_ui/document/tutorial/uim/nav/tabnav.htm

<#def title = "标签页"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = " 标签页是参考tabnav设计出更简单易用的内容重叠布局的导航页。标签页使用nav和section作为是标签和内容显示。在nav中使用li表示每个标签，在section中使用div作为每个标签显示的内容。"/>
<#def prevUrl = "../dialog/loading.htm"/>
<#def nextUrl = "../tool/ajax.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
<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>
${zhiqim_com_head_end()}

${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}

<!--容器开始 -->
<div id="container" class="container">

${zhiqim_com_container_ui("ZmUI", "nav", "tabnav")}

<!--主体-->
<div id="mainbody" class="mainbody">

${zhiqim_com_breadcrumb("UI", "ZmUI", "导航和提醒", "标签页")}

<!-- content开始 -->
<div id="mobileUI_content" class="content">

<!-- 左侧详情 -->
<div class="mobileUI-left">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
    <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>

<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
    <a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
    <div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
    <a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
    <div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}

<!-- content结束 -->
</div>

${zhiqim_com_chapter()}
<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>

${zhiqim_com_footer()}