309 lines
11 KiB
HTML
309 lines
11 KiB
HTML
<#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()} |