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

<#def title = "下拉列表"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = " 下拉列表是设计出当移入或点击时下拉出一个列表的样式。下拉列表当前支持点击和移入触发下拉列表一层界面，支持列表颜色、激活颜色，指定下拉列表宽度和多列等样式。"/>
<#def prevUrl = "tooltip.htm"/>
<#def nextUrl = "../tool/copy.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());
}
</script>

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

<!--主体-->
<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;">
        下拉列表是设计出当移入或点击时下拉出一个列表的样式。下拉列表当前支持点击和移入触发下拉列表一层界面，支持列表颜色、激活颜色，指定下拉列表宽度和多列等样式。
    </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-dropdown" class="z-dropdown" data-options="event:click;" style="width:160px;">
        <span id="proviceId" value="0">选择省份</span><i class="z-float-right z-font z-arrowhead-down"></i>
        <ul class="z-list">
            <span value="1">广东省</span>
            <span value="2">湖南省</span>
            <span value="3">广西壮族自治区</span>
            <span value="4">江西省</span>
        </ul>
    </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-dropdown"]，包含样式类[class="z-dropdown"]，指定点击触发[data-options="event:click;"]和宽度[width:160px]<br>
    2、指定点击内容[span]，和右对齐箭头[&lt;i class="z-float-right z-font z-arrowhead-down"&gt;&lt;/i&gt;]<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>
    <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 data-role="z-dropdown"  class="z-dropdown z-cyan z-large" data-options="event:click;width:320px;item-width:159px;" data-onchange="function(){alert('选中一个');}" style="width:160px;">
        <span id="proviceId" value="2">更多</span><i class="z-float-right z-font z-arrowhead-down"></i>
        <ul class="z-list">
            <span value="1">广东省</span>
            <span value="2" selected>湖南省</span>
            <span value="3">广西壮族自治区</span>
            <span value="4">江西省</span>
            <span value="5">北京市</span>
            <span value="6" onclick="location.href='/index.htm'">福建省</span>
        </ul>
    </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-dropdown"]，包含样式类[class="z-dropdown"]，指定点击触发[data-options="event:click;"]和宽度[width:160px]<br>
    2、指定点击内容[span]，和右对齐箭头[&lt;i class="z-float-right z-font z-arrowhead-down"&gt;&lt;/i&gt;]<br>
    3、在div上指定选择的颜色[class="z-dropdown z-red"]表示显示红色边框、红色背景和红色选中信息
    4、指定多列设计，如两列，总宽度[width:320px]，每列宽度[item-width:159px]，注意预留1像素的边框
    5、当有更变时，可用事件data-onchange。
</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-dropdown" class="z-dropdown" data-options="event:hover;" style="width:160px;">
        <span id="proviceId" value="0">选择省份</span><i class="z-float-right z-font z-arrowhead-down"></i>
        <ul class="z-list">
            <span value="1">广东省</span>
            <span value="2">湖南省</span>
            <span value="3">广西壮族自治区</span>
            <span value="4">江西省</span>
        </ul>
    </div><div data-role="z-dropdown" class="z-dropdown zi-mg-l-1" data-options="event:hover;" style="width:160px;">
        <span id="proviceId" value="0">选择省份</span><i class="z-float-right z-font z-arrowhead-down"></i>
        <ul class="z-list">
            <span value="1">广东省</span>
            <span value="2">湖南省</span>
            <span value="3">广西壮族自治区</span>
            <span value="4">江西省</span>
        </ul>
    </div><div data-role="z-dropdown" class="z-dropdown zi-mg-l-1" data-options="event:hover;" style="width:160px;">
        <span id="proviceId" value="0">选择省份</span><i class="z-float-right z-font z-arrowhead-down"></i>
        <ul class="z-list">
            <span value="1">广东省</span>
            <span value="2">湖南省</span>
            <span value="3">广西壮族自治区</span>
            <span value="4">江西省</span>
        </ul>
    </div><div data-role="z-dropdown" class="z-dropdown zi-mg-l-1" data-options="event:hover;" style="width:160px;">
        <span id="proviceId" value="0">选择省份</span><i class="z-float-right z-font z-arrowhead-down"></i>
        <ul class="z-list">
            <span value="1">广东省</span>
            <span value="2">湖南省</span>
            <span value="3">广西壮族自治区</span>
            <span value="4">江西省</span>
        </ul>
    </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-dropdown"]，包含样式类[class="z-dropdown"]，指定移入触发[data-options="event:hover;"]和宽度[width:160px]<br>
    2、指定点击内容[span]，和右对齐箭头[&lt;i class="z-float-right z-font z-arrowhead-down"&gt;&lt;/i&gt;]<br>
    3、多个下拉列表在一起组成一组时，注意中间有inline-block产生的间隙，可利用zi-mg-l-3 zi-mg-r-3来去除，或保持div相连用zi-mg-l-1去除。
</div>
</section>
</div>
${zhiqim_com_chapter()}
</div>

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

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