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()}
|
||||
Reference in New Issue
Block a user