first commit
Цей коміт міститься в:
@@ -0,0 +1,184 @@
|
||||
<#def title = "日历控件"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "日历控件是在输入框触发时展开一个年月日时分秒的日期界面，按日历格式显示出来，通过点击和选择得到要求的日期或时间。当前日历控件支持选择日期、选择日期+时间、选择日期+时分三种。"/>
|
||||
<#def prevUrl = "calendar.htm"/>
|
||||
<#def nextUrl = "../dialog/dialog.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());
|
||||
});
|
||||
});
|
||||
|
||||
function onchangea()
|
||||
{
|
||||
}
|
||||
</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", "checkInput")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
选中按钮，包括单选框、多选框、切换按钮；采用 :before 、:after 伪类元素实现，尽可能的减少代码量，而且做到手机上较好的兼容性，因为 input 伪类在桌面端 firefox、edge 不兼容。
|
||||
</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 type="radio" class="z-radio z-xsmall"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>小型</td>
|
||||
<td class="example"><input type="radio" class="z-radio z-small"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><input type="radio" class="z-radio"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>大型</td>
|
||||
<td class="example"><input type="radio" class="z-radio z-large"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<td>超大</td>
|
||||
<td class="example"><input type="radio" class="z-radio z-xlarge"></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 type="checkbox" class="z-checkbox z-xsmall"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>小型</td>
|
||||
<td class="example"><input type="checkbox" class="z-checkbox z-small"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><input type="checkbox" class="z-checkbox"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>大型</td>
|
||||
<td class="example"><input type="checkbox" class="z-checkbox z-large"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<td>超大</td>
|
||||
<td class="example"><input type="checkbox" class="z-checkbox z-xlarge"></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 type="checkbox" class="z-switch z-xsmall"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>小型</td>
|
||||
<td class="example"><input type="checkbox" class="z-switch z-small"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><input type="checkbox" class="z-switch"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>大型</td>
|
||||
<td class="example"><input type="checkbox" class="z-switch z-large"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<td>超大</td>
|
||||
<td class="example"><input type="checkbox" class="z-switch z-xlarge"></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()}
|
||||
Посилання в новій задачі
Заблокувати користувача