first commit
This commit is contained in:
@@ -0,0 +1,709 @@
|
||||
<#def title = "按钮样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "按钮样式是指对按钮增加样式规则，按钮分为三种，一是标准按钮、二为筛选按钮、三是多选按钮。样式规则包括按钮大小、颜色、边框颜色、选中特效等。"/>
|
||||
<#def prevUrl = "input.htm"/>
|
||||
<#def nextUrl = "checkbox.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("button.z-bordered").click(function()
|
||||
{
|
||||
Z(this).toggleClass("z-active");
|
||||
});
|
||||
|
||||
Z("button.z-bordered-box").click(function()
|
||||
{
|
||||
Z(this).toggleClass("z-active");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "form", "button")}
|
||||
|
||||
<!--主体-->
|
||||
<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">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-red">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-red"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-orange">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-orange"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-yellow">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-yellow"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-green">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-green"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-cyan">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-cyan"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-blue">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-blue"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-purple">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-purple"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、标准按钮（大号） -->
|
||||
<div class="tutorial title">二、标准按钮（大号）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-large">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-large z-red">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large z-red"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-large z-orange">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large z-orange"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-large z-yellow">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large z-yellow"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-large z-green">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large z-green"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-large z-cyan">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large z-cyan"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-large z-blue">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large z-blue"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-large z-purple">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-large z-purple"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 三、标准按钮（加大） -->
|
||||
<div class="tutorial title">三、标准按钮（加大）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-xlarge">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge"><i class="z-font z-add"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-xlarge z-red">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge z-red"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-xlarge z-orange">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge z-orange"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-xlarge z-yellow">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge z-yellow"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-xlarge z-green">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge z-green"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-xlarge z-cyan">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge z-cyan"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-xlarge z-blue">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge z-blue"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-xlarge z-purple">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xlarge z-purple"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 四、标准按钮（小号） -->
|
||||
<div class="tutorial title">四、标准按钮（小号）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="42%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-small">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-small z-red">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small z-red"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-small z-orange">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small z-orange"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-small z-yellow">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small z-yellow"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-small z-green">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small z-green"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-small z-cyan">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small z-cyan"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-small z-blue">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small z-blue"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-small z-purple">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-small z-purple"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 五、标准按钮（加小） -->
|
||||
<div class="tutorial title">五、标准按钮（加小）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="42%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-xsmall">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-xsmall z-red">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall z-red"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-xsmall z-orange">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall z-orange"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-xsmall z-yellow">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall z-yellow"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-xsmall z-green">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall z-green"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-xsmall z-cyan">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall z-cyan"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-xsmall z-blue">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall z-blue"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-xsmall z-purple">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-xsmall z-purple"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 六、筛选按钮（标准大小） -->
|
||||
<div class="tutorial title">六、筛选按钮（标准大小）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg zi-bd-rd0"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-red-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-red-bd z-red-bg zi-bd-rd0"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-orange-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-orange-bd z-orange-bg zi-bd-rd0"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-yellow-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-yellow-bd z-yellow-bg zi-bd-rd0"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-green-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-green-bg z-green-bd zi-bd-rd0"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-cyan-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-cyan-bd z-cyan-bg zi-bd-rd0"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-blue-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-blue-bd z-blue-bg zi-bd-rd0"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-purple-bg">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-bg z-purple-bd z-purple-bg zi-bd-rd0"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 七、多选按钮（标准大小） -->
|
||||
<div class="tutorial title">七、多选按钮（标准大小）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-bordered">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-hover"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-red-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-red-bd z-hover"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-orange-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-orange-bd z-hover"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-yellow-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-yellow-bd z-hover"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-green-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-green-bd z-hover"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-cyan-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-cyan-bd z-hover"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-blue-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-blue-bd z-hover"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-purple-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-purple-bd z-hover"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 八、多选按钮（大号） -->
|
||||
<div class="tutorial title">八、多选按钮（大号）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-hover"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-red-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-red-bd z-hover"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-orange-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-orange-bd z-hover"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-yellow-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-yellow-bd z-hover"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-green-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-green-bd z-hover"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-cyan-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-cyan-bd z-hover"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-blue-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-blue-bd z-hover"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-purple-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-large z-purple-bd z-hover"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 九、多选按钮（加大） -->
|
||||
<div class="tutorial title">九、多选按钮（加大）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="12%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="12%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-hover"><i class="z-font z-config"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-red-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-red-bd z-hover"><i class="z-font z-delete"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-orange-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-orange-bd z-hover"><i class="z-font z-modify"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-yellow-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-yellow-bd z-hover"><i class="z-font z-query"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-green-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-green-bd z-hover"><i class="z-font z-previous"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-cyan-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-cyan-bd z-hover"><i class="z-font z-next"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-blue-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-blue-bd z-hover"><i class="z-font z-open"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-purple-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered z-xlarge z-purple-bd z-hover"><i class="z-font z-save"></i>按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 十、删除按钮列表 -->
|
||||
<div class="tutorial title">十、删除按钮列表</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="6%">类型</td>
|
||||
<td width="15%">未选中</td>
|
||||
<td width="26%">未选中代码</td>
|
||||
<td width="15%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-bordered-del zi-bd-rd0">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-del zi-bd-rd0 z-large z-red-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-bordered-del z-small zi-bd-rd0 z-orange-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-del zi-bd-rd0 z-xlarge z-blue-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><button class="z-button z-bordered-del z-xsmall zi-bd-rd0 z-cyan-bd">第一个第一个第一个第一个第一个第一个</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><button class="z-button z-bordered-del zi-bd-rd0 z-xlarge z-purple-bd">按钮</button></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,126 @@
|
||||
<#def title = "日历控件"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "日历控件是在输入框触发时展开一个年月日时分秒的日期界面，按日历格式显示出来，通过点击和选择得到要求的日期或时间。当前日历控件支持选择日期、选择日期+时间、选择日期+时分三种。"/>
|
||||
<#def prevUrl = "editable.htm"/>
|
||||
<#def nextUrl = "../dialog/dialog.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());
|
||||
});
|
||||
});
|
||||
|
||||
function onchangea()
|
||||
{
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "form", "calendar")}
|
||||
|
||||
<!--主体-->
|
||||
<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-bd-rd8">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%">类型</td>
|
||||
<td width="20%">事例</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>最简单的方式</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.date(this);"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.date(this);" value="2015-04-11"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值和onchange方法</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.date(this);" value="2015-04-11" onchange="alert('修改值为'+this.value)"></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-bd-rd8 z-lh150p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%">类型</td>
|
||||
<td width="20%">未指定</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>最简单的方式</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetime(this);"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetime(this);" value="2015-04-11 00:00:01"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值和onchange方法<br><input id="datetime_value" class="z-input z-w150"></td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetime(this);" value="2015-04-11 00:00:01" onchange="Z('#datetime_value').val(this.value);"></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-bd-rd8 z-lh150p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="30%">类型</td>
|
||||
<td width="20%">未指定</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>最简单的方式</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetimeNoSecond(this);"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetimeNoSecond(this);" value="2015-04-11 00:00:00"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值和onchange方法<br><input id="datehourminute_value" class="z-input z-w150"></td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetimeNoSecond(this);" value="2015-04-11 00:00:00" onchange="Z('#datehourminute_value').val(this.value);"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,429 @@
|
||||
<#def title = "多选框样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "多选框样式是指参考多选按钮设计出有颜色设定的多选的方框样式。多选框默认1像素边框，移入时变为2像素边框，选中后增加背景颜色并显示打勾图标表示已选中，多选框默认黑色，支持红橙黄绿青蓝紫等颜色和大小5种设定。"/>
|
||||
<#def prevUrl = "button.htm"/>
|
||||
<#def nextUrl = "radio.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 = Z.S.trim(html);
|
||||
html = Z.S.replaceAll(html, /\sdata-id="[^"]+"/g, ''); //去除 data-id
|
||||
html = Z.S.replaceAll(html, /\sstyle="[^"]+"/g, '');
|
||||
html = Z.S.replaceAll(html, ' >', '>');
|
||||
var ind = html.indexOf("i ");
|
||||
if (ind != -1){
|
||||
html = html.substring(0, ind-4);
|
||||
}
|
||||
|
||||
Z(elem).next("td > pre").html(html);
|
||||
});
|
||||
|
||||
Z(".click i.z-checkbox").click(function()
|
||||
{
|
||||
Z(this).toggleClass("z-active");
|
||||
});
|
||||
});
|
||||
|
||||
function abc(text, checked)
|
||||
{
|
||||
alert(text+checked);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "form", "checkbox")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
多选框样式是指参考多选按钮设计出有颜色设定的多选的方框样式。多选框默认1像素边框，移入时变为2像素边框，选中后增加背景颜色并显示打勾图标表示已选中，多选框默认黑色，支持红橙黄绿青蓝紫等颜色和大小5种设定。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、纯多选框样式 -->
|
||||
<div class="tutorial title">一、纯多选框样式（标准大小）</div>
|
||||
|
||||
<table class="click z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><i class="z-checkbox"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><i class="z-checkbox z-red"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-red z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><i class="z-checkbox z-orange"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-orange z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><i class="z-checkbox z-yellow"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-yellow z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><i class="z-checkbox z-green"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-green z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><i class="z-checkbox z-cyan"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-cyan z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><i class="z-checkbox z-blue"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-blue z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><i class="z-checkbox z-purple"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-purple z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、纯多选框样式(大号） -->
|
||||
<div class="tutorial title">二、纯多选框样式(大号）</div>
|
||||
|
||||
<table class="click z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><i class="z-checkbox z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><i class="z-checkbox z-red z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-red z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><i class="z-checkbox z-orange z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-orange z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><i class="z-checkbox z-yellow z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-yellow z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><i class="z-checkbox z-green z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-green z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><i class="z-checkbox z-cyan z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-cyan z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><i class="z-checkbox z-blue z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-blue z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><i class="z-checkbox z-purple z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-purple z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 三、纯多选框样式(加大） -->
|
||||
<div class="tutorial title">三、纯多选框样式(加大）</div>
|
||||
|
||||
<table class="click z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><i class="z-checkbox z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><i class="z-checkbox z-red z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-red z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><i class="z-checkbox z-orange z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-orange z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><i class="z-checkbox z-yellow z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-yellow z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><i class="z-checkbox z-green z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-green z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><i class="z-checkbox z-cyan z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-cyan z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><i class="z-checkbox z-blue z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-blue z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><i class="z-checkbox z-purple z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-purple z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 四、多选框样式和多选按钮联动 -->
|
||||
<div class="tutorial title">四、多选框样式和多选按钮联动</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="8%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="35%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="40%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="type">默认</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" style="width:16px;height:16px;" data-class="z-red"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-red" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-orange"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-orange" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-yellow"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-yellow" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-green"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-green" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-cyan"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-cyan" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-blue"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-blue" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-purple"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-purple" checked></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-px14 left z-mg-t20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" onclick="Z.FM.doSelectCheckBox('subCheckBox', this.checked);"><br><input type="checkbox" name="subCheckBox"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-red" onclick="javascript:abc('弹出我的值', this.checked);"></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-px14 left z-mg-t20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="8%" align="center">选择</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="example-link" align="center">
|
||||
<input type="checkbox" data-role="z-checkbox" onclick="Z.FM.doSelectCheckBox('subcb', this.checked);">
|
||||
<br><br><br><br>
|
||||
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb" value="1" data-class="z-red"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb" value="2"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb" value="3" data-class="z-cyan"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb" value="4" data-class="z-blue"><br><br>
|
||||
</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-px14 left z-mg-t20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%" align="center">选择</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="example-link" align="center">
|
||||
<button type="button" class="z-button z-blue" onclick="Z.FM.doSelectCheckBox('subcb2', 1);">全选</button>
|
||||
<button type="button" class="z-button z-blue" onclick="Z.FM.doSelectCheckBox('subcb2', 2);">取消</button>
|
||||
<button type="button" class="z-button z-blue" onclick="Z.FM.doSelectCheckBox('subcb2', 0);">反选</button>
|
||||
<br><br><br><br>
|
||||
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb2" value="1" data-class="z-red"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb2" value="2"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb2" value="3" data-class="z-cyan"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb2" value="4" data-class="z-blue"><br><br>
|
||||
</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-px14 left z-mg-t20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%" align="center">选择</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="example-link" align="center">
|
||||
<button class="z-button z-large zi-bg-white zi-mg-l10" onclick="Z(this).find('i.z-checkbox').click();">
|
||||
<input type="checkbox" class="display:inline-block" data-role="z-checkbox" data-class="z-blue">只设计不印刷
|
||||
</button>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,267 @@
|
||||
<#def title = "可编辑文本"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "可编辑文本是定义一段文本（span），在该文本之后增加一个笔状图标，当点击笔状图标时显示输入框和保存按钮，输入框支持输入控制，点击保存按钮触发保存事件。"/>
|
||||
<#def prevUrl = "select.htm"/>
|
||||
<#def nextUrl = "calendar.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "form", "editable")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
可编辑文本是定义一段文本（span），在该文本之后增加一个笔状图标，当点击笔状图标时显示输入框和保存按钮，输入框支持输入控制，点击保存按钮触发保存事件。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 可编辑文本参数说明 -->
|
||||
<div class="tutorial title">可编辑文本参数说明（三项必须，八项可选）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%">参数</td>
|
||||
<td width="30%">值</td>
|
||||
<td width="10%">是否必须</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-role</td>
|
||||
<td>z-editable</td>
|
||||
<td>必须</td>
|
||||
<td>表明该文本是可编辑的文本</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-value</td>
|
||||
<td>1.0</td>
|
||||
<td>必须</td>
|
||||
<td>可编辑文本值，不要配置到<span></span>中</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-save</td>
|
||||
<td>function(value){return true;}</td>
|
||||
<td>必须</td>
|
||||
<td>保存触发函数，无还回值和返回true表示成功，返回false表示失败，返回字符串表示弹出错误提示并且失败</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-value-class</td>
|
||||
<td>z-bold</td>
|
||||
<td>可选</td>
|
||||
<td>可编辑文本样式类</td>
|
||||
</tr>
|
||||
</tr>
|
||||
<td class="z-samp">data-value-style</td>
|
||||
<td>color:red;font-size:14px;font-weight:700;</td>
|
||||
<td>可选</td>
|
||||
<td>可编辑文本样式，遵循css规则</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-input-class</td>
|
||||
<td>z-blue</td>
|
||||
<td>可选</td>
|
||||
<td>输入框样式类</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-input-style</td>
|
||||
<td>width:50px;</td>
|
||||
<td>可选</td>
|
||||
<td>输入框样式表</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-input-maxlength</td>
|
||||
<td>10</td>
|
||||
<td>可选</td>
|
||||
<td>输入框支持的最大长度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-input-check</td>
|
||||
<td>type:Discount;</td>
|
||||
<td>可选</td>
|
||||
<td>输入框控制，请参考输入框说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-button-class</td>
|
||||
<td>z-blue</td>
|
||||
<td>可选</td>
|
||||
<td>按钮样式类</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-button-style</td>
|
||||
<td>width:50px;</td>
|
||||
<td>可选</td>
|
||||
<td>按钮样式表</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 一、无返回或返回true保存 -->
|
||||
<div class="tutorial title">一、无返回或返回true保存</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}"></span></td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}"></span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return true;}"></span></td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return true;}"></span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示但不返回值可保存');}"></span></td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示但不返回值可保存');}"></span></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、返回false不保存 -->
|
||||
<div class="tutorial title">二、返回false不保存</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return false;}"></span></td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return false;}"></span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示返回false不保存');return false;}"></span></td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示返回false不保存');return false;}"></span></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 三、返回字符串弹出对话框不保存 -->
|
||||
<div class="tutorial title">三、返回字符串弹出对话框不保存</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return '弹出提示信息';}"></span></td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return '弹出提示信息';}"></span></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 四、触发修改值 -->
|
||||
<div class="tutorial title">四、触发修改值</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input id="modify" class="z-input z-blue z-w100" value="内容可编辑"> <button type="button" onclick="Z.Editable.get(Z('#modified')[0]).val(Z('#modify').val());" class="z-button z-blue">修改</button><br><br>
|
||||
<span id="modified" data-role="z-editable" data-value="内容可编辑" data-save="function(value){}"></span>
|
||||
</td>
|
||||
<td><pre class="z-text-prewrap">
|
||||
<input id="modify" class="z-input z-blue z-w100" value="内容可编辑">
|
||||
<button type="button" onclick="Z.Editable.get(Z('#modified')[0]).val(Z('#modify').val());" class="z-button z-blue">修改</button><br><br>
|
||||
|
||||
<span id="modified" data-role="z-editable" data-value="内容可编辑" data-save="doSave"></span>
|
||||
</pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 五、可选参数展示 -->
|
||||
<div class="tutorial title">五、可选参数展示</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh150p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">说明</td>
|
||||
<td width="25%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>文本样式类：加粗、16像素<br>文本样式表：红色</td>
|
||||
<td>
|
||||
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-value-class="z-bold z-px16" data-value-style="color:red;"></span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-value-class="z-bold z-px16" data-value-style="color:red;"></span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>输入框样式类：蓝色、大号<br>输入框样式表：宽度90px</td>
|
||||
<td>
|
||||
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-input-class="z-blue z-large" data-input-style="width:90px;"></span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-input-class="z-blue z-large" data-input-style="width:90px;"></span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>按钮样式类：蓝色、大号<br>按钮样式表：宽度70px</td>
|
||||
<td>
|
||||
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-button-class="z-blue z-large" data-button-style="width:70px;"></span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-button-class="z-blue z-large" data-button-style="width:70px;"></span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>输入控制：只能输入整数，且最大6个</td>
|
||||
<td>
|
||||
<span data-role="z-editable" data-value="123456" data-save="function(value){}" data-input-maxlength="6" data-input-check="type:Integer;"></span>（整数）
|
||||
</td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="123456" data-save="function(value){}" data-input-maxlength="6" data-input-check="type:Integer;"></span></pre></td>
|
||||
</tr>
|
||||
<table>
|
||||
|
||||
<#-- 六、完整参数展示 -->
|
||||
<div class="tutorial title">六、完整参数展示</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh150p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="*">说明</td>
|
||||
<td width="60%">效果预览</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
1、文本样式类：加粗、16像素<br>
|
||||
2、文本样式表：红色<br>
|
||||
3、输入框样式类：蓝色、大号<br>
|
||||
4、输入框样式表：宽度90px、高度38px<br>
|
||||
5、按钮样式类：蓝色、大号<br>
|
||||
6、按钮样式表：宽度70px<br>
|
||||
7、输入控制：只能输入折扣值<br>
|
||||
8、输入控制：最长6个
|
||||
</td>
|
||||
<td width="60%">
|
||||
<span data-role="z-editable" data-value="8.96" data-save="function(value){}"
|
||||
data-value-class="z-bold z-px16" data-value-style="color:red;"
|
||||
data-input-class="z-blue z-large" data-input-style="width:90px;height:38px;"
|
||||
data-button-class="z-blue z-large" data-button-style="width:70px;"
|
||||
data-input-maxlength="6" data-input-check="type:Discount;"></span><span class="z-px16"> 折</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><pre class="z-text-prewrap zi-px14">
|
||||
<span data-role="z-editable" data-value="8.96" data-save="function(value){}"
|
||||
data-value-class="z-bold z-px16" data-value-style="color:red;"
|
||||
data-input-class="z-blue z-large" data-input-style="width:90px;height:38px;"
|
||||
data-button-class="z-blue z-large" data-button-style="width:70px;"
|
||||
data-input-maxlength="6" data-input-check="type:Discount;">
|
||||
</span>
|
||||
<span class="z-px16"> 折</span>
|
||||
</pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,172 @@
|
||||
<#def title = "输入框样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "输入框样式是指对输入框增加样式规则，如指定输入框长度大小、边框颜色、和输入控制等。"/>
|
||||
<#def prevUrl = "../js/query.htm"/>
|
||||
<#def nextUrl = "button.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());
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "form", "input")}
|
||||
|
||||
<!--主体-->
|
||||
<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">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">类型</td>
|
||||
<td width="30%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认input样式</td>
|
||||
<td class="example"><input class="z-input" placeholder="默认input样式"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>加大尺寸input</td>
|
||||
<td class="example"><input type="text" class="z-input z-xlarge"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>大尺寸input</td>
|
||||
<td class="example"><input type="text" class="z-input z-large"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>小尺寸input</td>
|
||||
<td class="example"><input type="text" class="z-input z-small"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>加小尺寸input</td>
|
||||
<td class="example"><input type="text" class="z-input z-xsmall"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、输入框选中时颜色 -->
|
||||
<div class="tutorial title">二、输入框选中时颜色</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">类型</td>
|
||||
<td width="30%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为红色</td>
|
||||
<td class="example"><input type="text" class="z-input z-red"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为橙色</td>
|
||||
<td class="example"><input type="text" class="z-input z-orange"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为黄色</td>
|
||||
<td class="example"><input type="text" class="z-input z-yellow"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为绿色</td>
|
||||
<td class="example"><input type="text" class="z-input z-green"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为青色</td>
|
||||
<td class="example"><input type="text" class="z-input z-cyan"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为蓝色</td>
|
||||
<td class="example"><input type="text" class="z-input z-blue"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>触发边框为紫色</td>
|
||||
<td class="example"><input type="text" class="z-input z-purple"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 三、输入框输入控制 -->
|
||||
<div class="tutorial title">三、输入框输入控制</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">说明</td>
|
||||
<td width="30%">验证</td>
|
||||
<td width="*">效果预览</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许输入数值型：</td>
|
||||
<td class="example"><input name="Numeric" class="z-input z-xlarge z-red" type="text" placeholder="请输入数值型" size="30" maxlength="60" data-options="type:Numeric;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许输入整型：</td>
|
||||
<td class="example"><input name="Integer" class="z-input z-xlarge z-orange" type="text" placeholder="请输入整型" size="30" maxlength="60" data-options="type:Integer;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许输入整数小数：</td>
|
||||
<td class="example"><input name="Decimal" class="z-input z-xlarge z-yellow" type="text" placeholder="请输入整数小数" size="30" maxlength="60" data-options="type:Decimal;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许输入字母：</td>
|
||||
<td class="example"><input name="Alphabetic" class="z-input z-xlarge z-green" type="text" placeholder="请输入字母" size="30" maxlength="60" data-options="type:Alphabetic;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许最多2位小数的金额：</td>
|
||||
<td class="example"><input name="Amount2R" class="z-input z-xlarge z-cyan" type="text" placeholder="请输入最多2位小数的金额" size="30" maxlength="60" data-options="type:Amount2R;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许输入折扣类型：</td>
|
||||
<td class="example"><input name="Discount" type="text" class="z-input z-xlarge z-blue" placeholder="请输入0.01-10折" size="30" maxlength="60" data-options="type:Discount;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>只允许小时分钟格式(00:23)：</td>
|
||||
<td class="example"><input name="HourMinute" type="text" class="z-input z-xlarge z-purple" placeholder="请输入小时分钟格式(00:23)" size="30" maxlength="60" data-options="type:HourMinute;paste:true;" value="" autocomplete="off"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,309 @@
|
||||
<#def title = "单选框样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "单选框样式是指参考单选按钮设计出有颜色设定单选的圆框的样式。单选框默认1像素边框，移入时变为2像素边框，选中后增加背景颜色并显示打勾图标表示已选中，单选框默认黑色，支持红橙黄绿青蓝紫等颜色和大小5种设定。"/>
|
||||
<#def prevUrl = "checkbox.htm"/>
|
||||
<#def nextUrl = "select.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.replace('style="visibility: hidden;"', '');
|
||||
html = html.replace(' >', '>');
|
||||
var ind = html.indexOf("i ");
|
||||
if (ind != -1){
|
||||
html = html.substring(0, ind-4);
|
||||
}
|
||||
|
||||
Z(elem).next("td > pre").html(html);
|
||||
});
|
||||
|
||||
Z(".click i.z-checkbox").click(function()
|
||||
{
|
||||
Z(this).toggleClass("z-active");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "form", "radio")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
单选框样式是指参考单选按钮设计出有颜色设定单选的圆框的样式。单选框默认1像素边框，移入时变为2像素边框，选中后增加背景颜色并显示打勾图标表示已选中，单选框默认黑色，支持红橙黄绿青蓝紫等颜色和大小5种设定。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、纯单选框样式 -->
|
||||
<div class="tutorial title">一、纯单选框样式（标准大小）</div>
|
||||
|
||||
<table class="click z-table z-bordered z-pd10">
|
||||
<tr>
|
||||
<td colspan="5">单选标准按钮</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><i class="z-radio"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><i class="z-radio z-red"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-red z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><i class="z-radio z-orange"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-orange z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><i class="z-radio z-yellow"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-yellow z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><i class="z-radio z-green"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-green z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><i class="z-radio z-cyan"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-cyan z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><i class="z-radio z-blue"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-blue z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><i class="z-radio z-purple"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-purple z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、纯单选框样式（大号） -->
|
||||
<div class="tutorial title">二、纯单选框样式（大号）</div>
|
||||
|
||||
<table class="click z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><i class="z-radio z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><i class="z-radio z-red z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-red z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><i class="z-radio z-orange z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-orange z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><i class="z-radio z-yellow z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-yellow z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><i class="z-radio z-green z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-green z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><i class="z-radio z-cyan z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-cyan z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><i class="z-radio z-blue z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-blue z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><i class="z-radio z-purple z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-purple z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 三、纯单选框样式（加大） -->
|
||||
<div class="tutorial title">三、纯单选框样式（加大）</div>
|
||||
|
||||
<table class="click z-table z-bordered z-pd10">
|
||||
<tr>
|
||||
<td colspan="5">单选加大按钮</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><i class="z-radio z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><i class="z-radio z-red z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-red z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><i class="z-radio z-orange z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-orange z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><i class="z-radio z-yellow z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-yellow z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><i class="z-radio z-green z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-green z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><i class="z-radio z-cyan z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-cyan z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><i class="z-radio z-blue z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-blue z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><i class="z-radio z-purple z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-purple z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 四、单选框样式和单选按钮联动 -->
|
||||
<div class="tutorial title">四、单选框样式和单选按钮联动</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example-link"><input type="radio" data-role="z-radio"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="radio" data-role="z-radio" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="z-pointer" onclick="Z('.z-radio[data-id=test]').click();">有名称，点我也可以</span></td>
|
||||
<td class="example-link"><input id="test" type="radio" name="name" data-role="z-radio"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="radio" name="name" data-role="z-radio" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example-link"><input type="radio" data-role="z-radio" data-class="z-red"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="radio" data-role="z-radio" data-class="z-red" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -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('<span class="z-relative z-show-ib">', '');
|
||||
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()}
|
||||
Reference in New Issue
Block a user