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/form/select.htm
+160
View File
@@ -0,0 +1,160 @@
<#def title = "选择框样式"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "选择框样式是参考选择按钮设计出有颜色设定下拉列表的样式。选择框是一种下拉列表样式，目标是和表单选择按钮联动，实现跨浏览器且更美观的样式。"/>
<#def prevUrl = "radio.htm"/>
<#def nextUrl = "editable.htm"/>
${zhiqim_com_header()}
${zhiqim_com_topnav()}
<script>
Z.onload(function()
{
Z(".example").each(function(elem)
{
Z(elem).next("td > pre").html(Z(elem).htmlt());
});
Z(".example-link").each(function(elem)
{
var html = Z(elem).htmlt();
html = html.trim();
html = html.replace('&lt;span class="z-relative z-show-ib"&gt;', '');
html = html.replace(' z-hidden', '');
var ind = html.indexOf("div ");
if (ind != -1){
html = html.substring(0, ind-4);
}
Z(elem).next("td > pre").html(html);
});
});
function doSelect(value)
{
var $select = Z.Select.get("z-select-search");
$select.setValue(value);
}
</script>
<!--容器开始 -->
<div id="container" class="container">
<!--边导航-->
${zhiqim_com_ui("tutorial", "ui", "form", "select")}
<!--主体-->
<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>
<table class="z-table z-bordered z-pd10 z-relative-left">
<tr>
<td colspan="2" class="zi-px18">1、原始选择按钮：</td>
</tr>
<tr>
<td width="20%" class="zi-px18 example"><select class="z-select z-cyan" style="width:160px;">
<option value="1">广东省</option>
<option value="2" selected>湖南省</option>
<option value="3" onclick="location.href='/index.htm'">江西省</option>
</select>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td colspan="2" class="zi-px18">2、转化后的选择框（增加角色data-role="z-select"和颜色data-class="z-cyan"）</td>
</tr>
<tr>
<td class="example-link"><select data-role="z-select" class="z-select z-float-left" data-class="z-select z-cyan" style="width:80px;">
<option value="1">广东省</option>
<option value="2">湖南省</option>
<option value="3" onclick="location.href='/index.htm'">江西省</option>
</select>
<button class="z-button zi-bd-rd0 z-float-left z-font z-config"></button>
<input class="z-input z-w30 z-float-left">
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td class="example-link" onclick="alert('向上冒泡');"><select data-role="z-select" class="z-select" data-class="z-select z-cyan" style="width:160px;">
<option value="1">广东省</option>
<option value="2">湖南省</option>
<option value="3" onclick="location.href='/index.htm'">江西省</option>
</select>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td class="example-link" onclick="alert('不向上冒泡');"><select data-role="z-select" class="z-select" data-class="z-select z-cyan" data-options="stop:true;" style="width:160px;">
<option value="1">广东省</option>
<option value="2">湖南省</option>
<option value="3" onclick="location.href='/index.htm'">江西省</option>
</select>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
<td class="example-link"><select class="z-select z-w160" data-role="z-select" data-class="z-cyan" data-options="itemWidth:159px;width:337px">
<option value="1">广东省</option>
<option value="1">广东省</option>
<option value="2">湖南省</option>
<option value="2">湖南省</option>
<option value="2">湖南省</option>
<option value="2">湖南省</option>
<option value="2">湖南省</option>
<option value="1">广东省</option>
<option value="1">广东省</option>
<option value="1">广东省</option>
<option value="1">广东省</option>
<option value="1">广东省</option>
<option value="3" onclick="location.href='/index.htm'">江西省</option>
</select>
</td>
<td><pre class="z-text-preline"></pre></td>
</tr>
</table>
<#-- 二、模糊输入匹配可选选择框 -->
<div class="tutorial title">二、模糊选择框</div>
<table class="z-table z-bordered z-pd10 z-relative-left">
<tr>
<td>可模糊搜索的选择框：</td>
<td class="example-link">AAAA
<select id="z-select-search" data-role="z-select-search" data-options="maxHeight:100" class="z-select z-large z-w300" data-class="z-cyan">
<option value="1">广东省</option>
<option value="2">湖南省</option>
<option value="2">湖南省</option>
<option value="2">湖南省</option>
<option value="2">湖南省</option>
<option value="2">湖南省</option>
<option value="1">广东省</option>
<option value="1">广东省</option>
<option value="1">广东省</option>
<option value="1">广东省</option>
<option value="1">广东省</option>
<option value="3" onclick="location.href='/index.htm'">江西省</option>
</select>
<a href="javascript:doSelect('2')">湖南省</a>
<a href="javascript:doSelect('3')">江西省</a>
</td>
<td class="z-w60p"><pre class="z-text-preline"></pre></td>
</tr>
</table>
${zhiqim_com_chapter()}
</div>
<!-- 主体结束 -->
</div>
<!-- 容器结束 -->
</div>
${zhiqim_com_footer()}