ziqim/zhiqim_ui/document/tutorial/ui/form/radio.htm

<#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(' &gt;', '&gt;');
        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()}