zyy/ziqim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
zhuyiyi
2025-02-20 14:59:35 +08:00
parent d7be84fac6
commit d4a3bb8ffc
2541 changed files with 336536 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zhiqim_ui/document/tutorial/ui/nav/dropdown.htm
+214
View File
@@ -0,0 +1,214 @@
<#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()}