ziqim/zhiqim_ui/document/tutorial/uim/form/input_group.htm

<#def title = "输入框样式"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "输入框样式是指对输入框增加样式规则，如指定输入框长度大小、边框颜色、和输入控制等。"/>
<#def prevUrl = "../js/query.htm"/>
<#def nextUrl = "button.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
<script>
Z.onload(function()
{
    Z(".example").each(function(elem)
    {
        Z(elem).next("td > pre").html(Z(elem).htmlt());
    });
});
</script>
${zhiqim_com_head_end()}

${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}
<!--容器开始 -->
<div id="container" class="container">

${zhiqim_com_container_ui("ZmUI", "form", "input")}

<!--主体-->
<div id="mainbody" class="mainbody">

${zhiqim_com_breadcrumb("UI", "ZmUI", "表单", "输入框")}

<!-- content开始 -->
<div id="mobileUI_content" class="content">

<!-- 左侧详情 -->
<div class="mobileUI-left">

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
    <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 type="text" class="z-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>

<style>
/*整体*/
.z-input-group {display:inline-block;white-space:nowrap;}
.z-input-group>span,.z-input-group>input{vertical-align:top;border-radius:inherit;}
.z-input-group>span{display:inline-block;width:30px;height:30px;text-align:center;border-width:1px 0;border-style:solid;border-color:#999;background-color:#eee;}
.z-input-group>span:first-child{border-left-width:1px;}
.z-input-group>span:last-child{border-right-width:1px;}
.z-input-group>span>.z-font{bottom:-6px;}

/*边框角度*/
.z-input-group>span:not(:first-child):not(:last-child),.z-input-group>input:not(:first-child):not(:last-child){border-radius:0;}
.z-input-group>span:first-child,.z-input-group>input:first-child{border-top-right-radius:0;border-bottom-right-radius:0;}
.z-input-group>span:last-child,.z-input-group>input:last-child{border-top-left-radius:0;border-bottom-left-radius:0;}

/*不同大小的输入框组合*/


</style>
<#-- 三、输入框联合体 -->
<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"><div class="z-input-group z-input-group-prepend z-bd-rd3"><span><i class="z-font z-customer"></i></span><input type=text class="z-input" placeholder="请输入"></div></td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>指示图标后置</td>
    <td class="example"><div class="z-input-group z-input-group-append z-bd-rd3"><input type=text class="z-input" placeholder="请输入"><span><i class="z-font z-customer"></i></span></div></td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>指示图标两边</td>
    <td class="example"><div class="z-input-group z-input-group-inner z-bd-rd3"><span><i class="z-font z-customer"></i></span><input type=text class="z-input" placeholder="请输入"><span><i class="z-font z-customer"></i></span></td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>指示图标置中</td>
    <td class="example"><div class="z-input-group z-input-group-inner z-bd-rd3"><input type=text class="z-input" placeholder="请输入"><span><i class="z-font z-customer"></i></span><input type=text class="z-input" placeholder="请输入"></div></td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>加大尺寸</td>
    <td class="example"><div class="z-input-group z-input-group-prepend z-xlarge"><span><i class="z-font z-customer"></i></span><input type=text class="z-input" placeholder="请输入"></div></td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>大尺寸</td>
    <td class="example"><div class="z-input-group z-input-group-prepend z-large"><span><i class="z-font z-customer"></i></span><input type=text class="z-input" placeholder="请输入"></div></td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>小尺寸</td>
    <td class="example"><div class="z-input-group z-input-group-prepend z-small"><span><i class="z-font z-customer"></i></span><input type=text class="z-input" placeholder="请输入"></div></td>
    <td><pre class="z-text-preline"></pre></td>
</tr>
<tr>
    <td>加小尺寸</td>
    <td class="example"><div class="z-input-group z-input-group-prepend z-xsmall"><span><i class="z-font z-customer"></i></span><input type=text class="z-input" placeholder="请输入"></div></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>
</div>

<!-- 右侧demo ZmUI代码 -->
${zhiqim_turorial_ZmUI_demo_start()}
<div class="z-bar-top">
    <a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a>
    <div class="z-title">ZhiqimUI.mobile</div>
</div>
<div class="z-bar-bottom">
    <a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
    <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a>
</div>
<div class="z-container">
    <div class="z-flexBox-list z-h100p"><div class="z-rem30 z-text-center">这里是内容</div></div>
</div>
${zhiqim_turorial_ZmUI_demo_end()}

<!-- content结束 -->
</div>

${zhiqim_com_chapter()}
<!-- 主体结束  -->
</div>

<!-- 容器结束  -->
</div>

${zhiqim_com_footer()}