first commit
这个提交包含在：
@@ -0,0 +1,342 @@
|
||||
<#def title = "块样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "块样式是指对一个块区域增加样式规则，如指定块隐藏显示、块定位、块宽、块宽百分比、块高、块高百分比、内边距、外边距等属性。"/>
|
||||
<#def prevUrl = "text.htm"/>
|
||||
<#def nextUrl = "../js/js.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
${zhiqim_com_mobileUI_scrollJs()}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
${zhiqim_com_ui("tutorial", "ui", "css", "block")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "块样式")}
|
||||
|
||||
<!-- 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 z-px14">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="18%">名称</td>
|
||||
<td width="*">样式</td>
|
||||
<td width="20%">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">
|
||||
.z-fixed<br>
|
||||
.zi-fixed
|
||||
</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-fixed{position:fixed;}
|
||||
.zi-fixed{position:fixed !important;}
|
||||
</pre></td>
|
||||
<td>固定定位</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">
|
||||
.z-absolute<br>
|
||||
.zi-absolute</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-absolute{position:absolute;}
|
||||
.zi-absolute{position:absolute !important;}
|
||||
</pre></td>
|
||||
<td>绝对定位</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">
|
||||
.z-relative<br>
|
||||
.zi-relative</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-relative{position:relative;}
|
||||
.zi-relative{position:relative !important;}
|
||||
</pre></td>
|
||||
<td>相对定位</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、块浮动对齐 -->
|
||||
<div class="tutorial title">二、块浮动对齐</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="18%">名称</td>
|
||||
<td width="*">样式</td>
|
||||
<td width="20%">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-float-left<br>.zi-float-left</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-float-left{float:left;}
|
||||
.zi-float-left{float:left !important;}
|
||||
</pre></td>
|
||||
<td>左对齐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-float-center<br>.zi-float-center</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-float-center{margin-left:auto;margin-right:auto;}
|
||||
.zi-float-center{margin-left:auto !important;margin-right:auto !important;}
|
||||
</pre></td>
|
||||
<td>居中对齐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-float-right<br>.zi-float-right</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-float-right{float:right;}
|
||||
.zi-float-right{float:right !important;}
|
||||
</pre></td>
|
||||
<td>右对齐</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 三、块定位+浮动对齐 -->
|
||||
<div class="tutorial title">三、块定位+浮动对齐</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="23%">名称</td>
|
||||
<td width="*">样式</td>
|
||||
<td width="16%">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">
|
||||
.z-relative-left<br>
|
||||
.zi-relative-left</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-relative-left{position:relative;float:left;}
|
||||
.zi-relative-left{position:relative !important;float:left !important;}
|
||||
</pre></td>
|
||||
<td>相对左对齐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">
|
||||
.z-relative-center<br>
|
||||
.zi-relative-center</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-relative-center{position:relative;margin-left:auto;margin-right:auto;}
|
||||
.zi-relative-center{position:relative !important;margin-left:auto !important;margin-right:auto !important;}
|
||||
</pre></td>
|
||||
<td>相对居中</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">
|
||||
.z-relative-right<br>
|
||||
.zi-relative-right</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-relative-right{position:relative;float:right;}
|
||||
.zi-relative-right{position:relative !important;float:right !important;}
|
||||
</pre></td>
|
||||
<td>相对右对齐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">
|
||||
.z-absolute-center-middle<br>
|
||||
.zi-absolute-center-middle</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-absolute-center-middle{position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;}
|
||||
.zi-absolute-center-middle{position:absolute !important;margin:auto !important;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;}
|
||||
</pre></td>
|
||||
<td>绝对居中，内部块在父块的上下左右居中</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
<#-- 四、块溢出 -->
|
||||
<div class="tutorial title">四、块溢出</div>
|
||||
<table class="z-table z-bordered z-pd10 z-px14">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="18%">名称</td>
|
||||
<td width="*">样式</td>
|
||||
<td width="40%">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-overflow-auto</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-overflow-auto{overflow:auto;}
|
||||
</pre></td>
|
||||
<td>块溢出自动设置，指定高度，当内部超时时显示滚动条</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-overflow-hidden</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-overflow-hidden{overflow:hidden;}
|
||||
</pre></td>
|
||||
<td>块溢出的部分不显示</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-overflow-scroll</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-overflow-scroll{overflow:scroll;}
|
||||
</pre></td>
|
||||
<td>块始终显示滚动条，不管内部高度是否超过</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-overflow-x-auto</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-overflow-x-auto{overflow-x:auto;}
|
||||
</pre></td>
|
||||
<td>块X轴溢出自动设置，指定高度，当内部超时时显示滚动条</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-overflow-x-hidden</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-overflow-x-hidden{overflow-x:hidden;}
|
||||
</pre></td>
|
||||
<td>块X轴溢出的部分不显示</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-overflow-x-scroll</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-overflow-x-scroll{overflow-x:scroll;}
|
||||
</pre></td>
|
||||
<td>块X轴始终显示滚动条，不管内部高度是否超过</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-overflow-y-auto</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-overflow-y-auto{overflow-y:auto;}
|
||||
</pre></td>
|
||||
<td>块Y轴溢出自动设置，指定高度，当内部超时时显示滚动条</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-overflow-y-hidden</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-overflow-y-hidden{overflow-y:hidden;}
|
||||
</pre></td>
|
||||
<td>块Y轴溢出的部分不显示</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-overflow-y-scroll</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-overflow-y-scroll{overflow-y:scroll;}
|
||||
</pre></td>
|
||||
<td>块Y轴始终显示滚动条，不管内部高度是否超过</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 五、块手势 -->
|
||||
<div class="tutorial title">五、块鼠标标志</div>
|
||||
<table class="z-table z-bordered z-pd10 z-px14">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="18%">名称</td>
|
||||
<td width="*">样式</td>
|
||||
<td width="40%">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-pointer</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-pointer{cursor:pointer;}
|
||||
</pre></td>
|
||||
<td>显示手标志，即可点击状态</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-forbidden</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-forbidden{cursor:not-allowed;}
|
||||
</pre></td>
|
||||
<td>禁止使用，显示禁止标志</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 六、块隐藏和显示 -->
|
||||
<div class="tutorial title">六、块隐藏和显示</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="18%">名称</td>
|
||||
<td width="*">举例</td>
|
||||
<td width="40%">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-hide<br>.zi-hide</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-hide{display:none;}
|
||||
.zi-hide{display:none !important;}
|
||||
</pre>
|
||||
</td>
|
||||
<td>隐藏，不占位</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">
|
||||
.z-show<br>.z-show-b<br>.z-show-ib<br>
|
||||
.zi-show<br>.zi-show-b<br>.zi-show-ib
|
||||
</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-show{display:inline;}
|
||||
.z-show-b{display:block;}
|
||||
.z-show-ib{display:inline-block;}
|
||||
.zi-show{display:inline !important;}
|
||||
.zi-show-b{display:block !important;}
|
||||
.zi-show-ib{display:inline-block !important;}
|
||||
</pre></td>
|
||||
<td class="z-samp">
|
||||
显示的三种状态<br>
|
||||
1、z-show适用于<span>,<a>,<label>,<input>,<img><br>
|
||||
2、z-show-b适用<div>,<p>,<h1>,<form>,<ul><li><br>
|
||||
3、z-show-ib适用于把块作为内联方式。
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-visible<br>.zi-visible</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-visible{visibility:visible !important;}
|
||||
.zi-visible{visibility:visible !important;}
|
||||
</pre></td>
|
||||
<td>用于保留占位的显示</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-hidden<br>.zi-hidden<br></td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-hidden{visibility:hidden !important;}
|
||||
.zi-hidden{visibility:hidden !important;}
|
||||
</pre></td>
|
||||
<td>用于保留占位的隐藏</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<!-- 右侧demo ZmUI代码 -->
|
||||
${zhiqim_com_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_com_ZmUI_demo_end()}
|
||||
|
||||
<!-- content结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_chapter()}
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,645 @@
|
||||
<#def title = "颜色定义"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "颜色定义基本保持ZhiqimUI的风格不变，仍然使用z-前缀；默认提供的全局、白色、黑色和红、橙、黄、绿、青、蓝、紫共十种颜色的定义，包括字体颜色、背景颜色和边框颜色等，以及对应的样式名称。"/>
|
||||
<#def prevUrl = "rem.htm"/>
|
||||
<#def nextUrl = "font.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
${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", "css", "color")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "颜色定义")}
|
||||
|
||||
<!-- 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;">
|
||||
颜色定义基本保持ZhiqimUI的风格不变，仍然使用z-前缀；默认提供的全局、白色、黑色和红、橙、黄、绿、青、蓝、紫共十种颜色的定义，包括字体颜色、背景颜色和边框颜色等，以及对应的样式名称。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#var colorMap = Jsons.toMap(context.getResourceString("/zhiqimUI/css/zhiqim.pre.json", "UTF-8"))/>
|
||||
|
||||
<#-- 全局颜色 -->
|
||||
<div class="tutorial title">全局颜色</div>
|
||||
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="22%">通配符</td>
|
||||
<td width="14%">缺省值</td>
|
||||
<td width="10%">举例</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>全局文本颜色</td>
|
||||
<td class="z-samp">${textColor}</td>
|
||||
<td class="z-samp">${colorMap.get("textColor")}</td>
|
||||
<td>全局颜色</td>
|
||||
<td>全局颜色定义，定义在body中</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>全局背景颜色</td>
|
||||
<td class="z-samp">${bgColor}</td>
|
||||
<td class="z-samp">${colorMap.get("bgColor")}</td>
|
||||
<td>全局背景</td>
|
||||
<td>全局背景颜色，定义在body中</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>全局链接颜色</td>
|
||||
<td class="z-samp">${linkColor}</td>
|
||||
<td class="z-samp">${colorMap.get("linkColor")}</td>
|
||||
<td rowspan="2"><a href="javascript:void(0);">链接效果</a></td>
|
||||
<td>全局链接颜色，定义在a,a:visited中</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>全局链接Hover颜色</td>
|
||||
<td class="z-samp">${linkHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("linkHoverColor")}</td>
|
||||
<td>全局链接颜色，定义在a:hover,a:focus,a:active中</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 白色 -->
|
||||
<div class="tutorial title">白色</div>
|
||||
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="22%">通配符</td>
|
||||
<td width="14%">缺省值</td>
|
||||
<td width="10%">举例</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>白色文本</td>
|
||||
<td class="z-samp">${whiteTextColor}</td>
|
||||
<td class="z-samp">${colorMap.get("whiteTextColor")}</td>
|
||||
<td class="z-bg-black"><span class="z-text-white">白色文本</span></td>
|
||||
<td>.z-text-white</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>白色背景</td>
|
||||
<td class="z-samp">${whiteBgColor}</td>
|
||||
<td class="z-samp">${colorMap.get("whiteBgColor")}</td>
|
||||
<td class="z-bg-white"><span class="z-text-black">白色背景</span></td>
|
||||
<td>.z-bg-white</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 黑色 -->
|
||||
<div class="tutorial title">黑色</div>
|
||||
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="22%">通配符</td>
|
||||
<td width="14%">缺省值</td>
|
||||
<td width="10%">举例</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黑色文本</td>
|
||||
<td class="z-samp">${blackTextColor}</td>
|
||||
<td class="z-samp">${colorMap.get("blackTextColor")}</td>
|
||||
<td><span class="z-text-black">黑色文本</span></td>
|
||||
<td class="z-samp">.z-text-black</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黑色背景</td>
|
||||
<td class="z-samp">${blackBgColor}</td>
|
||||
<td class="z-samp">${colorMap.get("blackBgColor")}</td>
|
||||
<td class="z-bg-black"><span class="z-text-white">黑色背景</span></td>
|
||||
<td class="z-samp">.z-bg-black</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 灰色 -->
|
||||
<div class="tutorial title">灰色</div>
|
||||
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="22%">通配符</td>
|
||||
<td width="14%">缺省值</td>
|
||||
<td width="10%">举例</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>灰色文本</td>
|
||||
<td class="z-samp">${grayTextColor}</td>
|
||||
<td class="z-samp">${colorMap.get("grayTextColor")}</td>
|
||||
<td><span class="z-text-gray">灰色文本</span></td>
|
||||
<td class="z-samp">.z-text-gray</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>灰色背景</td>
|
||||
<td class="z-samp">${grayBgColor}</td>
|
||||
<td class="z-samp">${colorMap.get("grayBgColor")}</td>
|
||||
<td class="z-bg-gray"><span class="z-text-gray">灰色背景</span></td>
|
||||
<td class="z-samp">.z-bg-gray</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>灰色边框</td>
|
||||
<td class="z-samp">${grayBdColor}</td>
|
||||
<td class="z-samp">${colorMap.get("grayBdColor")}</td>
|
||||
<td><span class="z-bd z-text-gray z-pd3">灰色边框</span></td>
|
||||
<td class="z-samp">.z-bd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>灰色按钮文本</td>
|
||||
<td class="z-samp">${btnTextColor}</td>
|
||||
<td class="z-samp">${colorMap.get("btnTextColor")}</td>
|
||||
<td><span class="z-bd z-pd3" style="color:${colorMap.get("btnTextColor")};">灰色按钮</span></td>
|
||||
<td rowspan="4" class="z-bd-l">
|
||||
<div>
|
||||
<div class="z-button">灰色按钮</div>
|
||||
<div class="z-button z-bordered-bg">灰色按钮</div>
|
||||
（按钮、筛选按钮）
|
||||
</div>
|
||||
<div class="z-mg-t10">
|
||||
<div class="z-button z-bordered">橙色按钮</div>
|
||||
<div class="z-button z-bordered z-hover">橙色按钮</div>
|
||||
<div class="z-button z-bordered z-active">橙色按钮</div>
|
||||
（多选按钮三种状态）
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>灰色按钮边框和背景</td>
|
||||
<td class="z-samp">${btnBdColor}<br>${btnBgColor}</td>
|
||||
<td class="z-samp">${colorMap.get("btnBdColor")}<br>${colorMap.get("btnBgColor")}</td>
|
||||
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="color:#333;border:1px solid ${colorMap.get("btnBdColor")};background-color:${colorMap.get("btnBgColor")};">灰色按钮</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>灰色hover背景</td>
|
||||
<td class="z-samp">${btnBgHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("btnBgHoverColor")}</td>
|
||||
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="color:#333;border:1px solid ${colorMap.get("btnBdColor")};background-color:${colorMap.get("btnBgHoverColor")};">灰色按钮</div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>灰色按钮active背景</td>
|
||||
<td class="z-samp">${btnBgActiveColor}</td>
|
||||
<td class="z-samp">${colorMap.get("btnBgActiveColor")}</td>
|
||||
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="color:#333;border:1px solid ${colorMap.get("btnBdColor")};background-color:${colorMap.get("btnBgActiveColor")};">灰色按钮</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 红色 -->
|
||||
<div class="tutorial title">红色</div>
|
||||
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="22%">通配符</td>
|
||||
<td width="14%">缺省值</td>
|
||||
<td width="10%">举例</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色文本</td>
|
||||
<td class="z-samp">${redTextColor}</td>
|
||||
<td class="z-samp">${colorMap.get("redTextColor")}</td>
|
||||
<td><span class="z-text-red">红色文本</span></td>
|
||||
<td class="z-samp">.z-text-red</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色背景</td>
|
||||
<td class="z-samp">${redBgColor}</td>
|
||||
<td class="z-samp">${colorMap.get("redBgColor")}</td>
|
||||
<td class="z-bg-red"><span class="z-text-red">红色背景</span></td>
|
||||
<td class="z-samp">.z-bg-red</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色边框</td>
|
||||
<td class="z-samp">${redBdColor}</td>
|
||||
<td class="z-samp">${colorMap.get("redBdColor")}</td>
|
||||
<td><span class="z-bd z-red z-text-red z-pd3">红色边框</span></td>
|
||||
<td>.z-bd.z-red</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色按钮边框</td>
|
||||
<td class="z-samp">${redBtnBdColor}</td>
|
||||
<td class="z-samp">${colorMap.get("redBtnBdColor")}</td>
|
||||
<td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("redBtnBdColor")};background-color:${colorMap.get("redBdColor")};">红色按钮</div></td>
|
||||
<td rowspan="2" class="z-bd-l">
|
||||
<div>
|
||||
<div class="z-button z-red">红色按钮</div>
|
||||
<div class="z-button z-bordered-bg z-red-bg">红色按钮</div>
|
||||
<div class="z-button z-bordered-bg z-red-bd z-red-bg">红色按钮</div>
|
||||
（按钮、筛选按钮）
|
||||
</div>
|
||||
<div class="z-mg-t10">
|
||||
<div class="z-button z-bordered z-red-bd">红色按钮</div>
|
||||
<div class="z-button z-bordered z-red-bd z-hover">红色按钮</div>
|
||||
<div class="z-button z-bordered z-red-bd z-active">红色按钮</div>
|
||||
（多选按钮三种状态）
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色hover背景</td>
|
||||
<td class="z-samp">${redHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("redHoverColor")}</td>
|
||||
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("redBtnBdColor")};background-color:${colorMap.get("redHoverColor")};">红色按钮</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 橙色 -->
|
||||
<div class="tutorial title">橙色</div>
|
||||
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="22%">通配符</td>
|
||||
<td width="14%">缺省值</td>
|
||||
<td width="10%">举例</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色文本</td>
|
||||
<td class="z-samp">${orangeTextColor}</td>
|
||||
<td class="z-samp">${colorMap.get("orangeTextColor")}</td>
|
||||
<td><span class="z-text-orange">橙色文本</span></td>
|
||||
<td class="z-samp">.z-text-orange</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色背景</td>
|
||||
<td class="z-samp">${orangeBgColor}</td>
|
||||
<td class="z-samp">${colorMap.get("orangeBgColor")}</td>
|
||||
<td class="z-bg-orange"><span class="z-text-orange">橙色背景</span></td>
|
||||
<td class="z-samp">.z-bg-orange</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色边框</td>
|
||||
<td class="z-samp">${orangeBdColor}</td>
|
||||
<td class="z-samp">${colorMap.get("orangeBdColor")}</td>
|
||||
<td><span class="z-bd z-orange z-text-orange z-pd3">橙色边框</span></td>
|
||||
<td class="z-samp">.z-bd.z-orange</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色按钮边框</td>
|
||||
<td class="z-samp">${orangeBtnBdColor}</td>
|
||||
<td class="z-samp">${colorMap.get("orangeBtnBdColor")}</td>
|
||||
<td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("orangeBtnBdColor")};background-color:${colorMap.get("orangeBdColor")};">橙色按钮</div></td>
|
||||
<td rowspan="2" class="z-bd-l">
|
||||
<div>
|
||||
<div class="z-button z-orange">橙色按钮</div>
|
||||
<div class="z-button z-bordered-bg z-orange-bg">橙色按钮</div>
|
||||
<div class="z-button z-bordered-bg z-orange-bd z-orange-bg">橙色按钮</div>
|
||||
（按钮、筛选按钮）
|
||||
</div>
|
||||
<div class="z-mg-t10">
|
||||
<div class="z-button z-bordered z-orange-bd">橙色按钮</div>
|
||||
<div class="z-button z-bordered z-orange-bd z-hover">橙色按钮</div>
|
||||
<div class="z-button z-bordered z-orange-bd z-active">橙色按钮</div>
|
||||
（多选按钮三种状态）
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色hover背景</td>
|
||||
<td class="z-samp">${orangeHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("orangeHoverColor")}</td>
|
||||
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("orangeBtnBdColor")};background-color:${colorMap.get("orangeHoverColor")};">橙色按钮</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 黄色 -->
|
||||
<div class="tutorial title">黄色</div>
|
||||
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="22%">通配符</td>
|
||||
<td width="14%">缺省值</td>
|
||||
<td width="10%">举例</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色文本</td>
|
||||
<td class="z-samp">${yellowTextColor}</td>
|
||||
<td class="z-samp">${colorMap.get("yellowTextColor")}</td>
|
||||
<td><span class="z-text-yellow">黄色文本</span></td>
|
||||
<td class="z-samp">.z-text-yellow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色背景</td>
|
||||
<td class="z-samp">${yellowBgColor}</td>
|
||||
<td class="z-samp">${colorMap.get("yellowBgColor")}</td>
|
||||
<td class="z-bg-yellow"><span class="z-text-yellow">黄色背景</span></td>
|
||||
<td class="z-samp">.z-bg-yellow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色边框</td>
|
||||
<td class="z-samp">${yellowBdColor}</td>
|
||||
<td class="z-samp">${colorMap.get("yellowBdColor")}</td>
|
||||
<td><span class="z-bd z-yellow z-text-yellow z-pd3">黄色边框</span></td>
|
||||
<td class="z-samp">.z-bd.z-yellow</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色按钮边框</td>
|
||||
<td class="z-samp">${yellowBtnBdColor}</td>
|
||||
<td class="z-samp">${colorMap.get("yellowBtnBdColor")}</td>
|
||||
<td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("yellowBtnBdColor")};background-color:${colorMap.get("yellowBdColor")};">黄色按钮</div></td>
|
||||
<td rowspan="2" class="z-bd-l">
|
||||
<div>
|
||||
<div class="z-button z-yellow">黄色按钮</div>
|
||||
<div class="z-button z-bordered-bg z-yellow-bg">黄色按钮</div>
|
||||
<div class="z-button z-bordered-bg z-yellow-bd z-yellow-bg">黄色按钮</div>
|
||||
（按钮、筛选按钮）
|
||||
</div>
|
||||
<div class="z-mg-t10">
|
||||
<div class="z-button z-bordered z-yellow-bd">黄色按钮</div>
|
||||
<div class="z-button z-bordered z-yellow-bd z-hover">黄色按钮</div>
|
||||
<div class="z-button z-bordered z-yellow-bd z-active">黄色按钮</div>
|
||||
（多选按钮三种状态）
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色hover背景</td>
|
||||
<td class="z-samp">${yellowHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("yellowHoverColor")}</td>
|
||||
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("yellowBtnBdColor")};background-color:${colorMap.get("yellowHoverColor")};">黄色按钮</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 绿色 -->
|
||||
<div class="tutorial title">绿色</div>
|
||||
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="22%">通配符</td>
|
||||
<td width="14%">缺省值</td>
|
||||
<td width="10%">举例</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色文本</td>
|
||||
<td class="z-samp">${greenTextColor}</td>
|
||||
<td class="z-samp">${colorMap.get("greenTextColor")}</td>
|
||||
<td><span class="z-text-green">绿色文本</span></td>
|
||||
<td class="z-samp">.z-text-green</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色背景</td>
|
||||
<td class="z-samp">${greenBgColor}</td>
|
||||
<td class="z-samp">${colorMap.get("greenBgColor")}</td>
|
||||
<td class="z-bg-green"><span class="z-text-green">绿色背景</span></td>
|
||||
<td class="z-samp">.z-bg-green</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色边框</td>
|
||||
<td class="z-samp">${greenBdColor}</td>
|
||||
<td class="z-samp">${colorMap.get("greenBdColor")}</td>
|
||||
<td><span class="z-bd z-green z-text-green z-pd3">绿色边框</span></td>
|
||||
<td class="z-samp">.z-bd.z-green</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色按钮边框</td>
|
||||
<td class="z-samp">${greenBtnBdColor}</td>
|
||||
<td class="z-samp">${colorMap.get("greenBtnBdColor")}</td>
|
||||
<td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("greenBtnBdColor")};background-color:${colorMap.get("greenBdColor")};">绿色按钮</div></td>
|
||||
<td rowspan="2" class="z-bd-l">
|
||||
<div>
|
||||
<div class="z-button z-green">绿色按钮</div>
|
||||
<div class="z-button z-bordered-bg z-green-bg">绿色按钮</div>
|
||||
<div class="z-button z-bordered-bg z-green-bd z-green-bg">绿色按钮</div>
|
||||
（按钮、筛选按钮）
|
||||
</div>
|
||||
<div class="z-mg-t10">
|
||||
<div class="z-button z-bordered z-green-bd">绿色按钮</div>
|
||||
<div class="z-button z-bordered z-green-bd z-hover">绿色按钮</div>
|
||||
<div class="z-button z-bordered z-green-bd z-active">绿色按钮</div>
|
||||
（多选按钮三种状态）
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色hover背景</td>
|
||||
<td class="z-samp">${greenHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("greenHoverColor")}</td>
|
||||
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("greenBtnBdColor")};background-color:${colorMap.get("greenHoverColor")};">绿色按钮</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#--青色 -->
|
||||
<div class="tutorial title">青色</div>
|
||||
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
|
||||
<tr>
|
||||
<td colspan="5" class="zi-text-cyan">青色</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="22%">通配符</td>
|
||||
<td width="14%">缺省值</td>
|
||||
<td width="10%">举例</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色文本</td>
|
||||
<td class="z-samp">${cyanTextColor}</td>
|
||||
<td class="z-samp">${colorMap.get("cyanTextColor")}</td>
|
||||
<td><span class="z-text-cyan">青色文本</span></td>
|
||||
<td class="z-samp">.z-text-cyan</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色背景</td>
|
||||
<td class="z-samp">${cyanBgColor}</td>
|
||||
<td class="z-samp">${colorMap.get("cyanBgColor")}</td>
|
||||
<td class="z-bg-cyan"><span class="z-text-cyan">青色背景</span></td>
|
||||
<td class="z-samp">.z-bg-cyan</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色边框</td>
|
||||
<td class="z-samp">${cyanBdColor}</td>
|
||||
<td class="z-samp">${colorMap.get("cyanBdColor")}</td>
|
||||
<td><span class="z-bd z-cyan z-text-cyan z-pd3">青色边框</span></td>
|
||||
<td class="z-samp">.z-bd.z-cyan</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色按钮边框</td>
|
||||
<td class="z-samp">${cyanBtnBdColor}</td>
|
||||
<td class="z-samp">${colorMap.get("cyanBtnBdColor")}</td>
|
||||
<td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("cyanBtnBdColor")};background-color:${colorMap.get("cyanBdColor")};">青色按钮</div></td>
|
||||
<td rowspan="2" class="z-bd-l">
|
||||
<div>
|
||||
<div class="z-button z-cyan">青色按钮</div>
|
||||
<div class="z-button z-bordered-bg z-cyan-bg">青色按钮</div>
|
||||
<div class="z-button z-bordered-bg z-cyan-bd z-cyan-bg">青色按钮</div>
|
||||
（按钮、筛选按钮）
|
||||
</div>
|
||||
<div class="z-mg-t10">
|
||||
<div class="z-button z-bordered z-cyan-bd">青色按钮</div>
|
||||
<div class="z-button z-bordered z-cyan-bd z-hover">青色按钮</div>
|
||||
<div class="z-button z-bordered z-cyan-bd z-active">青色按钮</div>
|
||||
（多选按钮三种状态）
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色hover背景</td>
|
||||
<td class="z-samp">${cyanHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("cyanHoverColor")}</td>
|
||||
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("cyanBtnBdColor")};background-color:${colorMap.get("cyanHoverColor")};">青色按钮</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#--蓝色 -->
|
||||
<div class="tutorial title">蓝色</div>
|
||||
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="22%">通配符</td>
|
||||
<td width="14%">缺省值</td>
|
||||
<td width="10%">举例</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色文本</td>
|
||||
<td class="z-samp">${blueTextColor}</td>
|
||||
<td class="z-samp">${colorMap.get("blueTextColor")}</td>
|
||||
<td><span class="z-text-blue">蓝色文本</span></td>
|
||||
<td class="z-samp">.z-text-blue</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色背景</td>
|
||||
<td class="z-samp">${blueBgColor}</td>
|
||||
<td class="z-samp">${colorMap.get("blueBgColor")}</td>
|
||||
<td class="z-bg-blue"><span class="z-text-blue">蓝色背景</span></td>
|
||||
<td class="z-samp">.z-bg-blue</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色边框</td>
|
||||
<td class="z-samp">${blueBdColor}</td>
|
||||
<td class="z-samp">${colorMap.get("blueBdColor")}</td>
|
||||
<td><span class="z-bd z-blue z-text-blue z-pd3">蓝色边框</span></td>
|
||||
<td class="z-samp">.z-bd.z-blue</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色按钮边框</td>
|
||||
<td class="z-samp">${blueBtnBdColor}</td>
|
||||
<td class="z-samp">${colorMap.get("blueBtnBdColor")}</td>
|
||||
<td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("blueBtnBdColor")};background-color:${colorMap.get("blueBdColor")};">蓝色按钮</div></td>
|
||||
<td rowspan="2" class="z-bd-l">
|
||||
<div>
|
||||
<div class="z-button z-blue">蓝色按钮</div>
|
||||
<div class="z-button z-bordered-bg z-blue-bg">蓝色按钮</div>
|
||||
<div class="z-button z-bordered-bg z-blue-bd z-blue-bg">蓝色按钮</div>
|
||||
（按钮、筛选按钮）
|
||||
</div>
|
||||
<div class="z-mg-t10">
|
||||
<div class="z-button z-bordered z-blue-bd">蓝色按钮</div>
|
||||
<div class="z-button z-bordered z-blue-bd z-hover">蓝色按钮</div>
|
||||
<div class="z-button z-bordered z-blue-bd z-active">蓝色按钮</div>
|
||||
（多选按钮三种状态）
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色hover背景</td>
|
||||
<td class="z-samp">${blueHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("blueHoverColor")}</td>
|
||||
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("blueBtnBdColor")};background-color:${colorMap.get("blueHoverColor")};">蓝色按钮</div></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#--紫色 -->
|
||||
<div class="tutorial title">紫色</div>
|
||||
<table class="z-table z-bordered z-pd10 z-px14 z-mg-t20 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="22%">通配符</td>
|
||||
<td width="14%">缺省值</td>
|
||||
<td width="10%">举例</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色文本</td>
|
||||
<td class="z-samp">${purpleTextColor}</td>
|
||||
<td class="z-samp">${colorMap.get("purpleTextColor")}</td>
|
||||
<td><span class="z-text-purple">紫色文本</span></td>
|
||||
<td class="z-samp">.z-text-purple</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色背景</td>
|
||||
<td class="z-samp">${purpleBgColor}</td>
|
||||
<td class="z-samp">${colorMap.get("purpleBgColor")}</td>
|
||||
<td class="z-bg-purple"><span class="z-text-purple">紫色背景</span></td>
|
||||
<td class="z-samp">.z-bg-purple</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色边框</td>
|
||||
<td class="z-samp">${purpleBdColor}</td>
|
||||
<td class="z-samp">${colorMap.get("purpleBdColor")}</td>
|
||||
<td><span class="z-bd z-purple z-text-purple z-pd3">紫色边框</span></td>
|
||||
<td class="z-samp">.z-bd.z-purple</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色按钮边框</td>
|
||||
<td class="z-samp">${purpleBtnBdColor}</td>
|
||||
<td class="z-samp">${colorMap.get("purpleBtnBdColor")}</td>
|
||||
<td><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("purpleBtnBdColor")};background-color:${colorMap.get("purpleBdColor")};">紫色按钮</div></td>
|
||||
<td rowspan="2" class="z-bd-l">
|
||||
<div>
|
||||
<div class="z-button z-purple">紫色按钮</div>
|
||||
<div class="z-button z-bordered-bg z-purple-bg">紫色按钮</div>
|
||||
<div class="z-button z-bordered-bg z-purple-bd z-purple-bg">紫色按钮</div>
|
||||
（按钮、筛选按钮）
|
||||
</div>
|
||||
<div class="z-mg-t10">
|
||||
<div class="z-button z-bordered z-purple-bd">紫色按钮</div>
|
||||
<div class="z-button z-bordered z-purple-bd z-hover">紫色按钮</div>
|
||||
<div class="z-button z-bordered z-purple-bd z-active">紫色按钮</div>
|
||||
（多选按钮三种状态）
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色hover背景</td>
|
||||
<td class="z-samp">${purpleHoverColor}</td>
|
||||
<td class="z-samp">${colorMap.get("purpleHoverColor")}</td>
|
||||
<td class="zi-bd-r"><div class="z-pd3 z-w80 z-h25 z-text-white" style="border:2px solid ${colorMap.get("purpleBtnBdColor")};background-color:${colorMap.get("purpleHoverColor")};">紫色按钮</div></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()}
|
||||
@@ -0,0 +1,294 @@
|
||||
<#def title = "全局定义"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "全局定义是指在全局定义里的标签缺省下的样式规则，包括三部分。"/>
|
||||
<#def prevUrl = "../index.htm"/>
|
||||
<#def nextUrl = "rem.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
${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", "css", "global")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "全局定义")}
|
||||
|
||||
<!-- 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;">
|
||||
全局定义是指在全局定义里的标签缺省下的样式规则，包括三部分：<br>
|
||||
1、HTML5新模板和兼容：包括十二个block新标签、三个inline-block新标签，以及隐藏等其他属性；<br>
|
||||
2、全局标记一致性定义：约定html、body、img、p等标签在所有浏览器中一致性定义；<br>
|
||||
3、表单一致性定义：约定button、input、checkbox、radio等表单属性在所有浏览器中一致性定义。<br>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 全局HTML5新模板和兼容问题 -->
|
||||
<div class="tutorial title">全局HTML5新模板和兼容问题</div>
|
||||
|
||||
<table class="z-table z-pd10 z-lh200p">
|
||||
<tr>
|
||||
<td class="zi-px18">一、十二个新标签（block）：</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="zi-px18">二、三个新标签（inline-block）：</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
audio,canvas,video{display:inline-block;vertical-align:baseline;}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="zi-px18">三、音频模块兼容性问题</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
audio:not([controls]){display:none;height:0;}
|
||||
|
||||
为防止主流浏览器中，显示"不带控制按钮的音频模块"这一问题。以及解决iOS5移动端显示多余高度的兼容性问题。
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="zi-px18">四、有隐藏属性或标记为模板的的设置为隐藏</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
[hidden],template{display:none;}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="zi-px18">五、设置svg非根元素的元素不显示仅占位</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
svg:not(:root){overflow:hidden;}
|
||||
|
||||
只支持一个根元素如(<svg></svg>)，除了<svg>内部的，其他的都不显示
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 全局标记一致性定义 -->
|
||||
<div class="tutorial title">全局标记一致性定义</div>
|
||||
|
||||
<table class="z-table z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr><td class="zi-px18">一、所有标签（*,*:before,*:after）</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
*{border-box;box-sizing:border-box;}
|
||||
*:before,*:after{box-sizing:border-box;}
|
||||
|
||||
默认所有元素含插入内容前后宽高设置采用border-box方式，即宽高包括border和padding，向内扩充
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><td class="zi-px18">二、HTML标签</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
html{
|
||||
font-family:"微软雅黑","宋体",Arial,sans-serif;
|
||||
overflow-x:hidden;overflow-y:auto;
|
||||
-ms-text-size-adjust:100%;
|
||||
-webkit-text-size-adjust:100%;
|
||||
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
|
||||
}
|
||||
@media screen and (max-width: 320px) {
|
||||
html {
|
||||
font-size:83.33px;
|
||||
font-size:26.66667vw
|
||||
}
|
||||
}
|
||||
... ...
|
||||
@media screen and (min-width: 769px) {
|
||||
html {
|
||||
font-size:204.8px
|
||||
}
|
||||
}
|
||||
html,body{width:100%;height:100%;position:relative;overflow:hidden;}
|
||||
|
||||
1、设置全局字体，防止一些设备上字体随屏幕放大而改变字体大小,如webkit的Safari
|
||||
2、指定文档宽高并隐藏超出
|
||||
3、当屏幕横坚切换时字体大小调整和以前一样
|
||||
4、文档字体大小以rem为主，所以用@media screen自定义不同的html字体大小
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><td class="zi-px18">二、默认字体大小行高颜色、背景颜色，无外边框</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
body{color:#333;background-color:#fff;}
|
||||
body,table,td,div{font-size:12px;line-height:120%;}
|
||||
body,form,figure{margin:0;}
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><td class="zi-px18">三、图片无边框、居中、不超时父边框宽高，IE7以上支持缩放不失真（bicubic）</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
img{border:0;vertical-align:middle;max-width:100%;max-height:100%;-ms-interpolation-mode:bicubic;}
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><td class="zi-px18">四、段落无内外边距，这样p和br功能相同</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
p{margin:0px;padding:0px;}
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><td class="zi-px18">五、字段集合默认边框、左右两像素外边距，和内边距设置，名称无边框和内边距</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
p{margin:0px;padding:0px;}
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><td class="zi-px18">六、分隔线修改为上边框一条1像素的线，上下1em高度</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
hr{
|
||||
-webkit-box-sizing:content-box;
|
||||
-moz-box-sizing:content-box;
|
||||
box-sizing:content-box;
|
||||
height:0;border:0;border-top:1px solid #eee;margin:1em 0;
|
||||
}
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><td class="zi-px18">七、列表无前序号，无内外边距，行高1.25em</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
ul,dl,ol,li{list-style:none;padding:0;margin:0;}
|
||||
li{line-height:1.25em;}
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><td class="zi-px18">八、链接，初始和访问后相同，淡黑色背景透明，移入无下标线、默认淡青色</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
a,a:visited{color:#333;text-decoration:none;background-color:transparent;}
|
||||
a:focus{color:#43cd6e;outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}
|
||||
a:active,a:hover{color:#43cd6e;outline:0;text-decoration:underline;}
|
||||
|
||||
<a href="javascript:void(0);">这里是文本连接效果</a>
|
||||
</span>
|
||||
</td></tr>
|
||||
</table>
|
||||
|
||||
<#-- 表单一致性定义 -->
|
||||
<div class="tutorial title">表单一致性定义</div>
|
||||
|
||||
<table class="z-table z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr><td class="zi-px18">一、统一按钮和输入框无内外边距（Firefox默认按扭和输入框padding 0 2px）</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><td class="zi-px18">二、输入框行高强制成正常（各个浏览器默认值不一样）</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
input{line-height:normal;}
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><td class="zi-px18">三、表单控件不显示选中边框（webkit默认有边框）</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
button,input,select,optgroup,textarea{color:inherit;font:inherit;margin:0;outline:none;}
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><td class="zi-px18">四、按钮可见，webkit渲染，不可用时手势为禁止，取消可能的大小写文本转换</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
button{overflow:visible;}
|
||||
button,html input[type="button"],input[type="reset"],input[type="submit"] {-webkit-appearance:button;cursor:pointer;}
|
||||
button[disabled],html input[disabled]{cursor:not-allowed;}
|
||||
button,select{text-transform:none;}
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><td class="zi-px18">五、单多选按钮有2像素偏下,IE高度和背景白色问题，修改成高度为13px，背景透明</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
input[type="checkbox"],input[type="radio"]{margin-top:-2px;border:0;padding:0;vertical-align:middle;height:13px;background-color:transparent;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><td class="zi-px18">六、选项框（select）中的分组默认加粗</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
optgroup{font-weight:bold;}
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><td class="zi-px18">七、移动设备上webkit自定义数字框高度自动</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto;}
|
||||
</span>
|
||||
</td></tr>
|
||||
<tr><td class="zi-px18">八、移动设备上webkit自定义搜索框为文本字段，宽高设置采用content-box，按钮取消原生样式</td></tr>
|
||||
<tr><td>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
input[type="search"]{
|
||||
-webkit-appearance:textfield;
|
||||
-webkit-box-sizing:content-box;
|
||||
-moz-box-sizing:content-box;
|
||||
box-sizing:content-box;
|
||||
}
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration{
|
||||
-webkit-appearance:none;
|
||||
}
|
||||
</span>
|
||||
</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()}
|
||||
@@ -0,0 +1,70 @@
|
||||
{
|
||||
textColor:"#333",
|
||||
bgColor:"#fff",
|
||||
linkColor:"#333",
|
||||
linkHoverColor:"#06c",
|
||||
|
||||
whiteTextColor:"#fffff0",
|
||||
whiteBgColor:"#fff",
|
||||
|
||||
blackTextColor:"#333",
|
||||
blackBgColor:"#000",
|
||||
|
||||
grayTextColor:"#ccc",
|
||||
grayBgColor:"#f5f5f5",
|
||||
grayBdColor:"#d3d3d3",
|
||||
btnTextColor:"#333",
|
||||
btnBdColor:"#c3c3c3",
|
||||
btnBgColor:"#f2f2f2",
|
||||
btnBgHoverColor:"#f5f5f5",
|
||||
btnBgActiveColor:"#dfdfdf",
|
||||
|
||||
redTextColor:"#8b0000",
|
||||
redBgColor:"#ffe4e1",
|
||||
redBdColor:"#ea4a36",
|
||||
redBtnBdColor:"#e8351f",
|
||||
redBtnBgColor:"#ea4a36",
|
||||
redHoverColor:"#ed6a5a",
|
||||
|
||||
orangeTextColor:"#fe4615",
|
||||
orangeBgColor:"#f5deb3",
|
||||
orangeBdColor:"#ff6600",
|
||||
orangeBtnBdColor:"#ff4e00",
|
||||
orangeBtnBgColor:"#ff6600",
|
||||
orangeHoverColor:"#ff8533",
|
||||
|
||||
yellowTextColor:"#ffd700",
|
||||
yellowBgColor:"#ffe",
|
||||
yellowBdColor:"#fac603",
|
||||
yellowBtnBdColor:"#e1b203",
|
||||
yellowBtnBgColor:"#fac603",
|
||||
yellowHoverColor:"#fbd238",
|
||||
|
||||
greenTextColor:"#006400",
|
||||
greenBgColor:"#f0fff0",
|
||||
greenBdColor:"#43cd6e",
|
||||
greenBtnBdColor:"#34c360",
|
||||
greenBtnBgColor:"#43cd6e",
|
||||
greenHoverColor:"#49de79",
|
||||
|
||||
cyanTextColor:"#008b8b",
|
||||
cyanBgColor:"#e1ffff",
|
||||
cyanBdColor:"#009899",
|
||||
cyanBtnBdColor:"#029394",
|
||||
cyanBtnBgColor:"#009899",
|
||||
cyanHoverColor:"#4bb0af",
|
||||
|
||||
blueTextColor:"#0066cc",
|
||||
blueBgColor:"#f0f8ff",
|
||||
blueBdColor:"#2a689d",
|
||||
blueBtnBdColor:"#1299ec",
|
||||
blueBtnBgColor:"#28a3ef",
|
||||
blueHoverColor:"#4cb9fc",
|
||||
|
||||
purpleTextColor:"#ba55d3",
|
||||
purpleBgColor:"#e6e6fa",
|
||||
purpleBdColor:"#9e70ca",
|
||||
purpleBtnBdColor:"#9469bd",
|
||||
purpleBtnBgColor:"#9e70ca",
|
||||
purpleHoverColor:"#ac7ed7"
|
||||
}
|
||||
@@ -0,0 +1,949 @@
|
||||
<#def title = "字体图标"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "“字体图标”是矢量图片按字体规范设计的一种新的图标，凡狐字体图标放在/service/res/font/zhiqim.woff文件中，当前开发和收集的图标分"/>
|
||||
<#def prevUrl = "color.htm"/>
|
||||
<#def nextUrl = "ico.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
${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", "css", "font")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "字体图标")}
|
||||
|
||||
<!-- 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;">
|
||||
“字体图标”是矢量图片按字体规范设计的一种新的图标，凡狐字体图标放在/service/res/font/zhiqim.woff文件中，当前开发和收集的图标分
|
||||
操作类、文档类、设备类、图表类、实体类五种，共五十九个图标。
|
||||
字体图标不支持斜体，以便使用<i>标签来定义，如<i class="z-font z-config"></i>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 操作类 -->
|
||||
<div class="tutorial title">一、操作类图标，编码范围（f000-f03f），共18个</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="26%">样式</td>
|
||||
<td width="10%">编码</td>
|
||||
<td width="*" colspan="10">图标</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-config</td>
|
||||
<td class="z-samp">&#xf000;</td>
|
||||
<td width="7%"><i class="z-font z-config"></i> 字体</td>
|
||||
<td width="6%" class="z-bg-black"><i class="z-font z-config z-text-white"></i></td>
|
||||
<td width="6%"><i class="z-font z-config z-text-gray"></i></td>
|
||||
<td width="9%"><i class="z-font z-config z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td width="8%"><i class="z-font z-config z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td width="6%"><i class="z-font z-config z-text-yellow"></i></td>
|
||||
<td width="6%"><i class="z-font z-config z-text-green"></i></td>
|
||||
<td width="6%"><i class="z-font z-config z-text-cyan"></i></td>
|
||||
<td width="6%"><i class="z-font z-config z-text-blue"></i></td>
|
||||
<td width="6%"><i class="z-font z-config z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-add</td>
|
||||
<td class="z-samp">&#xf001;</td>
|
||||
<td><i class="z-font z-add"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-add z-text-white"></i></td>
|
||||
<td><i class="z-font z-add z-text-gray"></i></td>
|
||||
<td><i class="z-font z-add z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-add z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-add z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-add z-text-green"></i></td>
|
||||
<td><i class="z-font z-add z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-add z-text-blue"></i></td>
|
||||
<td><i class="z-font z-add z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-modify</td>
|
||||
<td class="z-samp">&#xf002;</td>
|
||||
<td><i class="z-font z-modify"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-modify z-text-white"></i></td>
|
||||
<td><i class="z-font z-modify z-text-gray"></i></td>
|
||||
<td><i class="z-font z-modify z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-modify z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-modify z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-modify z-text-green"></i></td>
|
||||
<td><i class="z-font z-modify z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-modify z-text-blue"></i></td>
|
||||
<td><i class="z-font z-modify z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-delete</td>
|
||||
<td class="z-samp">&#xf003;</td>
|
||||
<td><i class="z-font z-delete"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-delete z-text-white"></i></td>
|
||||
<td><i class="z-font z-delete z-text-gray"></i></td>
|
||||
<td><i class="z-font z-delete z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-delete z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-delete z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-delete z-text-green"></i></td>
|
||||
<td><i class="z-font z-delete z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-delete z-text-blue"></i></td>
|
||||
<td><i class="z-font z-delete z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-query</td>
|
||||
<td class="z-samp">&#xf004;</td>
|
||||
<td><i class="z-font z-query"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-query z-text-white"></i></td>
|
||||
<td><i class="z-font z-query z-text-gray"></i></td>
|
||||
<td><i class="z-font z-query z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-query z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-query z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-query z-text-green"></i></td>
|
||||
<td><i class="z-font z-query z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-query z-text-blue"></i></td>
|
||||
<td><i class="z-font z-query z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-previous</td>
|
||||
<td class="z-samp">&#xf005;</td>
|
||||
<td><i class="z-font z-previous"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-previous z-text-white"></i></td>
|
||||
<td><i class="z-font z-previous z-text-gray"></i></td>
|
||||
<td><i class="z-font z-previous z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-previous z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-previous z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-previous z-text-green"></i></td>
|
||||
<td><i class="z-font z-previous z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-previous z-text-blue"></i></td>
|
||||
<td><i class="z-font z-previous z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-next</td>
|
||||
<td class="z-samp">&#xf006;</td>
|
||||
<td><i class="z-font z-next"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-next z-text-white"></i></td>
|
||||
<td><i class="z-font z-next z-text-gray"></i></td>
|
||||
<td><i class="z-font z-next z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-next z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-next z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-next z-text-green"></i></td>
|
||||
<td><i class="z-font z-next z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-next z-text-blue"></i></td>
|
||||
<td><i class="z-font z-next z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-open</td>
|
||||
<td class="z-samp">&#xf007;</td>
|
||||
<td><i class="z-font z-open"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-open z-text-white"></i></td>
|
||||
<td><i class="z-font z-open z-text-gray"></i></td>
|
||||
<td><i class="z-font z-open z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-open z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-open z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-open z-text-green"></i></td>
|
||||
<td><i class="z-font z-open z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-open z-text-blue"></i></td>
|
||||
<td><i class="z-font z-open z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-close</td>
|
||||
<td class="z-samp">&#xf008;</td>
|
||||
<td><i class="z-font z-close"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-close z-text-white"></i></td>
|
||||
<td><i class="z-font z-close z-text-gray"></i></td>
|
||||
<td><i class="z-font z-close z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-close z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-close z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-close z-text-green"></i></td>
|
||||
<td><i class="z-font z-close z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-close z-text-blue"></i></td>
|
||||
<td><i class="z-font z-close z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-upload</td>
|
||||
<td class="z-samp">&#xf009;</td>
|
||||
<td><i class="z-font z-upload"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-upload z-text-white"></i></td>
|
||||
<td><i class="z-font z-upload z-text-gray"></i></td>
|
||||
<td><i class="z-font z-upload z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-upload z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-upload z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-upload z-text-green"></i></td>
|
||||
<td><i class="z-font z-upload z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-upload z-text-blue"></i></td>
|
||||
<td><i class="z-font z-upload z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-save或.z-font.z-finish</td>
|
||||
<td class="z-samp">&#xf00a;</td>
|
||||
<td><i class="z-font z-save"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-save z-text-white"></i></td>
|
||||
<td><i class="z-font z-save z-text-gray"></i></td>
|
||||
<td><i class="z-font z-save z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-save z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-save z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-save z-text-green"></i></td>
|
||||
<td><i class="z-font z-save z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-save z-text-blue"></i></td>
|
||||
<td><i class="z-font z-save z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-return</td>
|
||||
<td class="z-samp">&#xf00b;</td>
|
||||
<td><i class="z-font z-return"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-return z-text-white"></i></td>
|
||||
<td><i class="z-font z-return z-text-gray"></i></td>
|
||||
<td><i class="z-font z-return z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-return z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-return z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-return z-text-green"></i></td>
|
||||
<td><i class="z-font z-return z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-return z-text-blue"></i></td>
|
||||
<td><i class="z-font z-return z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-refresh</td>
|
||||
<td class="z-samp">&#xf00c;</td>
|
||||
<td><i class="z-font z-refresh"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-refresh z-text-white"></i></td>
|
||||
<td><i class="z-font z-refresh z-text-gray"></i></td>
|
||||
<td><i class="z-font z-refresh z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-refresh z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-refresh z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-refresh z-text-green"></i></td>
|
||||
<td><i class="z-font z-refresh z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-refresh z-text-blue"></i></td>
|
||||
<td><i class="z-font z-refresh z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-success</td>
|
||||
<td class="z-samp">&#xf00d;</td>
|
||||
<td><i class="z-font z-success"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-success z-text-white"></i></td>
|
||||
<td><i class="z-font z-success z-text-gray"></i></td>
|
||||
<td><i class="z-font z-success z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-success z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-success z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-success z-text-green"></i></td>
|
||||
<td><i class="z-font z-success z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-success z-text-blue"></i></td>
|
||||
<td><i class="z-font z-success z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-error</td>
|
||||
<td class="z-samp">&#xf00e;</td>
|
||||
<td><i class="z-font z-error"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-error z-text-white"></i></td>
|
||||
<td><i class="z-font z-error z-text-gray"></i></td>
|
||||
<td><i class="z-font z-error z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-error z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-error z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-error z-text-green"></i></td>
|
||||
<td><i class="z-font z-error z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-error z-text-blue"></i></td>
|
||||
<td><i class="z-font z-error z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-setting</td>
|
||||
<td class="z-samp">&#xf00f;</td>
|
||||
<td><i class="z-font z-setting"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-setting z-text-white"></i></td>
|
||||
<td><i class="z-font z-setting z-text-gray"></i></td>
|
||||
<td><i class="z-font z-setting z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-setting z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-setting z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-setting z-text-green"></i></td>
|
||||
<td><i class="z-font z-setting z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-setting z-text-blue"></i></td>
|
||||
<td><i class="z-font z-setting z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-share</td>
|
||||
<td class="z-samp">&#xf010;</td>
|
||||
<td><i class="z-font z-share"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-share z-text-white"></i></td>
|
||||
<td><i class="z-font z-share z-text-gray"></i></td>
|
||||
<td><i class="z-font z-share z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-share z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-share z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-share z-text-green"></i></td>
|
||||
<td><i class="z-font z-share z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-share z-text-blue"></i></td>
|
||||
<td><i class="z-font z-share z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-download</td>
|
||||
<td class="z-samp">&#xf011;</td>
|
||||
<td><i class="z-font z-download"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-download z-text-white"></i></td>
|
||||
<td><i class="z-font z-download z-text-gray"></i></td>
|
||||
<td><i class="z-font z-download z-text-red zi-px20"></i> <span class="zi-px20">字体</span></td>
|
||||
<td><i class="z-font z-download z-text-orange zi-px18"></i> <span class="zi-px18">字体</span></td>
|
||||
<td><i class="z-font z-download z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-download z-text-green"></i></td>
|
||||
<td><i class="z-font z-download z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-download z-text-blue"></i></td>
|
||||
<td><i class="z-font z-download z-text-purple"></i></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 文档类 -->
|
||||
<div class="tutorial title">二、文档类图标，编码范围（f040-f05f），共10个</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="26%">样式</td>
|
||||
<td width="10%">编码</td>
|
||||
<td width="*" colspan="10">图标</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-folder</td>
|
||||
<td class="z-samp">&#xf040;</td>
|
||||
<td width="7%"><i class="z-font z-folder"></i> 字体</td>
|
||||
<td width="6%" class="z-bg-black"><i class="z-font z-folder z-text-white"></i></td>
|
||||
<td width="6%"><i class="z-font z-folder z-text-gray"></i></td>
|
||||
<td width="6%"><i class="z-font z-folder z-text-red zi-px20"></i></td>
|
||||
<td width="6%"><i class="z-font z-folder z-text-orange zi-px18"></i></td>
|
||||
<td width="6%"><i class="z-font z-folder z-text-yellow"></i></td>
|
||||
<td width="6%"><i class="z-font z-folder z-text-green"></i></td>
|
||||
<td width="6%"><i class="z-font z-folder z-text-cyan"></i></td>
|
||||
<td width="6%"><i class="z-font z-folder z-text-blue"></i></td>
|
||||
<td width="6%"><i class="z-font z-folder z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-collect</td>
|
||||
<td class="z-samp">&#xf041;</td>
|
||||
<td><i class="z-font z-collect"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-collect z-text-white"></i></td>
|
||||
<td><i class="z-font z-collect z-text-gray"></i></td>
|
||||
<td><i class="z-font z-collect z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-collect z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-collect z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-collect z-text-green"></i></td>
|
||||
<td><i class="z-font z-collect z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-collect z-text-blue"></i></td>
|
||||
<td><i class="z-font z-collect z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-briefcase</td>
|
||||
<td class="z-samp">&#xf042;</td>
|
||||
<td><i class="z-font z-briefcase"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-briefcase z-text-white"></i></td>
|
||||
<td><i class="z-font z-briefcase z-text-gray"></i></td>
|
||||
<td><i class="z-font z-briefcase z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-briefcase z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-briefcase z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-briefcase z-text-green"></i></td>
|
||||
<td><i class="z-font z-briefcase z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-briefcase z-text-blue"></i></td>
|
||||
<td><i class="z-font z-briefcase z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-image-text</td>
|
||||
<td class="z-samp">&#xf043;</td>
|
||||
<td><i class="z-font z-image-text"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-image-text z-text-white"></i></td>
|
||||
<td><i class="z-font z-image-text z-text-gray"></i></td>
|
||||
<td><i class="z-font z-image-text z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-image-text z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-image-text z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-image-text z-text-green"></i></td>
|
||||
<td><i class="z-font z-image-text z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-image-text z-text-blue"></i></td>
|
||||
<td><i class="z-font z-image-text z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-text</td>
|
||||
<td class="z-samp">&#xf044;</td>
|
||||
<td><i class="z-font z-text"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-text z-text-white"></i></td>
|
||||
<td><i class="z-font z-text z-text-gray"></i></td>
|
||||
<td><i class="z-font z-text z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-text z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-text z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-text z-text-green"></i></td>
|
||||
<td><i class="z-font z-text z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-text z-text-blue"></i></td>
|
||||
<td><i class="z-font z-text z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-picture</td>
|
||||
<td class="z-samp">&#xf045;</td>
|
||||
<td><i class="z-font z-picture"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-picture z-text-white"></i></td>
|
||||
<td><i class="z-font z-picture z-text-gray"></i></td>
|
||||
<td><i class="z-font z-picture z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-picture z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-picture z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-picture z-text-green"></i></td>
|
||||
<td><i class="z-font z-picture z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-picture z-text-blue"></i></td>
|
||||
<td><i class="z-font z-picture z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-video</td>
|
||||
<td class="z-samp">&#xf046;</td>
|
||||
<td><i class="z-font z-video"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-video z-text-white"></i></td>
|
||||
<td><i class="z-font z-video z-text-gray"></i></td>
|
||||
<td><i class="z-font z-video z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-video z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-video z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-video z-text-green"></i></td>
|
||||
<td><i class="z-font z-video z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-video z-text-blue"></i></td>
|
||||
<td><i class="z-font z-video z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-voice</td>
|
||||
<td class="z-samp">&#xf047;</td>
|
||||
<td><i class="z-font z-voice"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-voice z-text-white"></i></td>
|
||||
<td><i class="z-font z-voice z-text-gray"></i></td>
|
||||
<td><i class="z-font z-voice z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-voice z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-voice z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-voice z-text-green"></i></td>
|
||||
<td><i class="z-font z-voice z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-voice z-text-blue"></i></td>
|
||||
<td><i class="z-font z-voice z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-camera</td>
|
||||
<td class="z-samp">&#xf048;</td>
|
||||
<td><i class="z-font z-camera"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-camera z-text-white"></i></td>
|
||||
<td><i class="z-font z-camera z-text-gray"></i></td>
|
||||
<td><i class="z-font z-camera z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-camera z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-camera z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-camera z-text-green"></i></td>
|
||||
<td><i class="z-font z-camera z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-camera z-text-blue"></i></td>
|
||||
<td><i class="z-font z-camera z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-print</td>
|
||||
<td class="z-samp">&#xf049;</td>
|
||||
<td><i class="z-font z-print"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-print z-text-white"></i></td>
|
||||
<td><i class="z-font z-print z-text-gray"></i></td>
|
||||
<td><i class="z-font z-print z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-print z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-print z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-print z-text-green"></i></td>
|
||||
<td><i class="z-font z-print z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-print z-text-blue"></i></td>
|
||||
<td><i class="z-font z-print z-text-purple"></i></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 设备类 -->
|
||||
<div class="tutorial title">三、设备类图标，编码范围（f060-f07f），共9个</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="26%">样式</td>
|
||||
<td width="10%">编码</td>
|
||||
<td width="*" colspan="10">图标</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-computer</td>
|
||||
<td class="z-samp">&#xf060;</td>
|
||||
<td width="7%"><i class="z-font z-computer"></i> 字体</td>
|
||||
<td width="6%" class="z-bg-black"><i class="z-font z-computer z-text-white"></i></td>
|
||||
<td width="6%"><i class="z-font z-computer z-text-gray"></i></td>
|
||||
<td width="6%"><i class="z-font z-computer z-text-red zi-px20"></i></td>
|
||||
<td width="6%"><i class="z-font z-computer z-text-orange zi-px18"></i></td>
|
||||
<td width="6%"><i class="z-font z-computer z-text-yellow"></i></td>
|
||||
<td width="6%"><i class="z-font z-computer z-text-green"></i></td>
|
||||
<td width="6%"><i class="z-font z-computer z-text-cyan"></i></td>
|
||||
<td width="6%"><i class="z-font z-computer z-text-blue"></i></td>
|
||||
<td width="6%"><i class="z-font z-computer z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-phone</td>
|
||||
<td class="z-samp">&#xf061;</td>
|
||||
<td><i class="z-font z-phone"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-phone z-text-white"></i></td>
|
||||
<td><i class="z-font z-phone z-text-gray"></i></td>
|
||||
<td><i class="z-font z-phone z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-phone z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-phone z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-phone z-text-green"></i></td>
|
||||
<td><i class="z-font z-phone z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-phone z-text-blue"></i></td>
|
||||
<td><i class="z-font z-phone z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-monitor</td>
|
||||
<td class="z-samp">&#xf062;</td>
|
||||
<td><i class="z-font z-monitor"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-monitor z-text-white"></i></td>
|
||||
<td><i class="z-font z-monitor z-text-gray"></i></td>
|
||||
<td><i class="z-font z-monitor z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-monitor z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-monitor z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-monitor z-text-green"></i></td>
|
||||
<td><i class="z-font z-monitor z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-monitor z-text-blue"></i></td>
|
||||
<td><i class="z-font z-monitor z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-email</td>
|
||||
<td class="z-samp">&#xf063;</td>
|
||||
<td><i class="z-font z-email"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-email z-text-white"></i></td>
|
||||
<td><i class="z-font z-email z-text-gray"></i></td>
|
||||
<td><i class="z-font z-email z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-email z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-email z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-email z-text-green"></i></td>
|
||||
<td><i class="z-font z-email z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-email z-text-blue"></i></td>
|
||||
<td><i class="z-font z-email z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-internet</td>
|
||||
<td class="z-samp">&#xf064;</td>
|
||||
<td><i class="z-font z-internet"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-internet z-text-white"></i></td>
|
||||
<td><i class="z-font z-internet z-text-gray"></i></td>
|
||||
<td><i class="z-font z-internet z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-internet z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-internet z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-internet z-text-green"></i></td>
|
||||
<td><i class="z-font z-internet z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-internet z-text-blue"></i></td>
|
||||
<td><i class="z-font z-internet z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-switch</td>
|
||||
<td class="z-samp">&#xf065;</td>
|
||||
<td><i class="z-font z-switch"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-switch z-text-white"></i></td>
|
||||
<td><i class="z-font z-switch z-text-gray"></i></td>
|
||||
<td><i class="z-font z-switch z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-switch z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-switch z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-switch z-text-green"></i></td>
|
||||
<td><i class="z-font z-switch z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-switch z-text-blue"></i></td>
|
||||
<td><i class="z-font z-switch z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-wifi</td>
|
||||
<td class="z-samp">&#xf066;</td>
|
||||
<td><i class="z-font z-wifi"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-wifi z-text-white"></i></td>
|
||||
<td><i class="z-font z-wifi z-text-gray"></i></td>
|
||||
<td><i class="z-font z-wifi z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-wifi z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-wifi z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-wifi z-text-green"></i></td>
|
||||
<td><i class="z-font z-wifi z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-wifi z-text-blue"></i></td>
|
||||
<td><i class="z-font z-wifi z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-cloud</td>
|
||||
<td class="z-samp">&#xf067;</td>
|
||||
<td><i class="z-font z-cloud"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-cloud z-text-white"></i></td>
|
||||
<td><i class="z-font z-cloud z-text-gray"></i></td>
|
||||
<td><i class="z-font z-cloud z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-cloud z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-cloud z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-cloud z-text-green"></i></td>
|
||||
<td><i class="z-font z-cloud z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-cloud z-text-blue"></i></td>
|
||||
<td><i class="z-font z-cloud z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-port</td>
|
||||
<td class="z-samp">&#xf068;</td>
|
||||
<td><i class="z-font z-port"></i> 字体</td>
|
||||
<td class="z-bg-black"><i class="z-font z-port z-text-white"></i></td>
|
||||
<td><i class="z-font z-port z-text-gray"></i></td>
|
||||
<td><i class="z-font z-port z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-port z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-port z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-port z-text-green"></i></td>
|
||||
<td><i class="z-font z-port z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-port z-text-blue"></i></td>
|
||||
<td><i class="z-font z-port z-text-purple"></i></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 图表类 -->
|
||||
<div class="tutorial title">四、图表类图标，编码范围（f080-f09f），共14个</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="26%">样式</td>
|
||||
<td width="10%">编码</td>
|
||||
<td width="*" colspan="10">图标</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-list</td>
|
||||
<td class="z-samp">&#xf080;</td>
|
||||
<td width="6%"><i class="z-font z-list"></i></td>
|
||||
<td width="6%" class="z-bg-black"><i class="z-font z-list z-text-white"></i></td>
|
||||
<td width="6%"><i class="z-font z-list z-text-gray"></i></td>
|
||||
<td width="6%"><i class="z-font z-list z-text-red zi-px20"></i></td>
|
||||
<td width="6%"><i class="z-font z-list z-text-orange zi-px18"></i></td>
|
||||
<td width="6%"><i class="z-font z-list z-text-yellow"></i></td>
|
||||
<td width="6%"><i class="z-font z-list z-text-green"></i></td>
|
||||
<td width="6%"><i class="z-font z-list z-text-cyan"></i></td>
|
||||
<td width="6%"><i class="z-font z-list z-text-blue"></i></td>
|
||||
<td width="6%"><i class="z-font z-list z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-apps</td>
|
||||
<td class="z-samp">&#xf081;</td>
|
||||
<td><i class="z-font z-apps"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-apps z-text-white"></i></td>
|
||||
<td><i class="z-font z-apps z-text-gray"></i></td>
|
||||
<td><i class="z-font z-apps z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-apps z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-apps z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-apps z-text-green"></i></td>
|
||||
<td><i class="z-font z-apps z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-apps z-text-blue"></i></td>
|
||||
<td><i class="z-font z-apps z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-pie-chart</td>
|
||||
<td class="z-samp">&#xf082;</td>
|
||||
<td><i class="z-font z-pie-chart"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-pie-chart z-text-white"></i></td>
|
||||
<td><i class="z-font z-pie-chart z-text-gray"></i></td>
|
||||
<td><i class="z-font z-pie-chart z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-pie-chart z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-pie-chart z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-pie-chart z-text-green"></i></td>
|
||||
<td><i class="z-font z-pie-chart z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-pie-chart z-text-blue"></i></td>
|
||||
<td><i class="z-font z-pie-chart z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-histogram</td>
|
||||
<td class="z-samp">&#xf083;</td>
|
||||
<td><i class="z-font z-histogram"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-histogram z-text-white"></i></td>
|
||||
<td><i class="z-font z-histogram z-text-gray"></i></td>
|
||||
<td><i class="z-font z-histogram z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-histogram z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-histogram z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-histogram z-text-green"></i></td>
|
||||
<td><i class="z-font z-histogram z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-histogram z-text-blue"></i></td>
|
||||
<td><i class="z-font z-histogram z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-graph</td>
|
||||
<td class="z-samp">&#xf084;</td>
|
||||
<td><i class="z-font z-graph"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-graph z-text-white"></i></td>
|
||||
<td><i class="z-font z-graph z-text-gray"></i></td>
|
||||
<td><i class="z-font z-graph z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-graph z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-graph z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-graph z-text-green"></i></td>
|
||||
<td><i class="z-font z-graph z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-graph z-text-blue"></i></td>
|
||||
<td><i class="z-font z-graph z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-diagram</td>
|
||||
<td class="z-samp">&#xf085;</td>
|
||||
<td><i class="z-font z-diagram"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-diagram z-text-white"></i></td>
|
||||
<td><i class="z-font z-diagram z-text-gray"></i></td>
|
||||
<td><i class="z-font z-diagram z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-diagram z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-diagram z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-diagram z-text-green"></i></td>
|
||||
<td><i class="z-font z-diagram z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-diagram z-text-blue"></i></td>
|
||||
<td><i class="z-font z-diagram z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-arrow-down</td>
|
||||
<td class="z-samp">&#xf086;</td>
|
||||
<td><i class="z-font z-arrow-down"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-arrow-down z-text-white"></i></td>
|
||||
<td><i class="z-font z-arrow-down z-text-gray"></i></td>
|
||||
<td><i class="z-font z-arrow-down z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-arrow-down z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-arrow-down z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-arrow-down z-text-green"></i></td>
|
||||
<td><i class="z-font z-arrow-down z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-arrow-down z-text-blue"></i></td>
|
||||
<td><i class="z-font z-arrow-down z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-arrow-up</td>
|
||||
<td class="z-samp">&#xf087;</td>
|
||||
<td><i class="z-font z-arrow-up"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-arrow-up z-text-white"></i></td>
|
||||
<td><i class="z-font z-arrow-up z-text-gray"></i></td>
|
||||
<td><i class="z-font z-arrow-up z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-arrow-up z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-arrow-up z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-arrow-up z-text-green"></i></td>
|
||||
<td><i class="z-font z-arrow-up z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-arrow-up z-text-blue"></i></td>
|
||||
<td><i class="z-font z-arrow-up z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-arrow-left</td>
|
||||
<td class="z-samp">&#xf088;</td>
|
||||
<td><i class="z-font z-arrow-left"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-arrow-left z-text-white"></i></td>
|
||||
<td><i class="z-font z-arrow-left z-text-gray"></i></td>
|
||||
<td><i class="z-font z-arrow-left z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-arrow-left z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-arrow-left z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-arrow-left z-text-green"></i></td>
|
||||
<td><i class="z-font z-arrow-left z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-arrow-left z-text-blue"></i></td>
|
||||
<td><i class="z-font z-arrow-left z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-arrow-right</td>
|
||||
<td class="z-samp">&#xf089;</td>
|
||||
<td><i class="z-font z-arrow-right"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-arrow-right z-text-white"></i></td>
|
||||
<td><i class="z-font z-arrow-right z-text-gray"></i></td>
|
||||
<td><i class="z-font z-arrow-right z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-arrow-right z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-arrow-right z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-arrow-right z-text-green"></i></td>
|
||||
<td><i class="z-font z-arrow-right z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-arrow-right z-text-blue"></i></td>
|
||||
<td><i class="z-font z-arrow-right z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-arrowhead-down</td>
|
||||
<td class="z-samp">&#xf08a;</td>
|
||||
<td><i class="z-font z-arrowhead-down"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-arrowhead-down z-text-white"></i></td>
|
||||
<td><i class="z-font z-arrowhead-down z-text-gray"></i></td>
|
||||
<td><i class="z-font z-arrowhead-down z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-arrowhead-down z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-arrowhead-down z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-arrowhead-down z-text-green"></i></td>
|
||||
<td><i class="z-font z-arrowhead-down z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-arrowhead-down z-text-blue"></i></td>
|
||||
<td><i class="z-font z-arrowhead-down z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-arrowhead-up</td>
|
||||
<td class="z-samp">&#xf08b;</td>
|
||||
<td><i class="z-font z-arrowhead-up"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-arrowhead-up z-text-white"></i></td>
|
||||
<td><i class="z-font z-arrowhead-up z-text-gray"></i></td>
|
||||
<td><i class="z-font z-arrowhead-up z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-arrowhead-up z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-arrowhead-up z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-arrowhead-up z-text-green"></i></td>
|
||||
<td><i class="z-font z-arrowhead-up z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-arrowhead-up z-text-blue"></i></td>
|
||||
<td><i class="z-font z-arrowhead-up z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-arrowhead-left</td>
|
||||
<td class="z-samp">&#xf08c;</td>
|
||||
<td><i class="z-font z-arrowhead-left"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-arrowhead-left z-text-white"></i></td>
|
||||
<td><i class="z-font z-arrowhead-left z-text-gray"></i></td>
|
||||
<td><i class="z-font z-arrowhead-left z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-arrowhead-left z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-arrowhead-left z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-arrowhead-left z-text-green"></i></td>
|
||||
<td><i class="z-font z-arrowhead-left z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-arrowhead-left z-text-blue"></i></td>
|
||||
<td><i class="z-font z-arrowhead-left z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-arrowhead-right</td>
|
||||
<td class="z-samp">&#xf08c;</td>
|
||||
<td><i class="z-font z-arrowhead-right"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-arrowhead-right z-text-white"></i></td>
|
||||
<td><i class="z-font z-arrowhead-right z-text-gray"></i></td>
|
||||
<td><i class="z-font z-arrowhead-right z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-arrowhead-right z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-arrowhead-right z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-arrowhead-right z-text-green"></i></td>
|
||||
<td><i class="z-font z-arrowhead-right z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-arrowhead-right z-text-blue"></i></td>
|
||||
<td><i class="z-font z-arrowhead-right z-text-purple"></i></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 实体类 -->
|
||||
<div class="tutorial title">五、实体类图标，编码范围（f0a0-f0bf），共8个</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14 left z-mg-t20 z-mg-b20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="26%">样式</td>
|
||||
<td width="10%">编码</td>
|
||||
<td width="*" colspan="10">图标</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-customer</td>
|
||||
<td class="z-samp">&#xf0a0;</td>
|
||||
<td width="6%"><i class="z-font z-customer"></i></td>
|
||||
<td width="6%" class="z-bg-black"><i class="z-font z-customer z-text-white"></i></td>
|
||||
<td width="6%"><i class="z-font z-customer z-text-gray"></i></td>
|
||||
<td width="6%"><i class="z-font z-customer z-text-red zi-px20"></i></td>
|
||||
<td width="6%"><i class="z-font z-customer z-text-orange zi-px18"></i></td>
|
||||
<td width="6%"><i class="z-font z-customer z-text-yellow"></i></td>
|
||||
<td width="6%"><i class="z-font z-customer z-text-green"></i></td>
|
||||
<td width="6%"><i class="z-font z-customer z-text-cyan"></i></td>
|
||||
<td width="6%"><i class="z-font z-customer z-text-blue"></i></td>
|
||||
<td width="6%"><i class="z-font z-customer z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-cash</td>
|
||||
<td class="z-samp">&#xf0a1;</td>
|
||||
<td><i class="z-font z-cash"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-cash z-text-white"></i></td>
|
||||
<td><i class="z-font z-cash z-text-gray"></i></td>
|
||||
<td><i class="z-font z-cash z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-cash z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-cash z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-cash z-text-green"></i></td>
|
||||
<td><i class="z-font z-cash z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-cash z-text-blue"></i></td>
|
||||
<td><i class="z-font z-cash z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-house</td>
|
||||
<td class="z-samp">&#xf0a2;</td>
|
||||
<td><i class="z-font z-house"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-house z-text-white"></i></td>
|
||||
<td><i class="z-font z-house z-text-gray"></i></td>
|
||||
<td><i class="z-font z-house z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-house z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-house z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-house z-text-green"></i></td>
|
||||
<td><i class="z-font z-house z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-house z-text-blue"></i></td>
|
||||
<td><i class="z-font z-house z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-flower</td>
|
||||
<td class="z-samp">&#xf0a3;</td>
|
||||
<td><i class="z-font z-flower"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-flower z-text-white"></i></td>
|
||||
<td><i class="z-font z-flower z-text-gray"></i></td>
|
||||
<td><i class="z-font z-flower z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-flower z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-flower z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-flower z-text-green"></i></td>
|
||||
<td><i class="z-font z-flower z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-flower z-text-blue"></i></td>
|
||||
<td><i class="z-font z-flower z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-box</td>
|
||||
<td class="z-samp">&#xf0a4;</td>
|
||||
<td><i class="z-font z-box"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-box z-text-white"></i></td>
|
||||
<td><i class="z-font z-box z-text-gray"></i></td>
|
||||
<td><i class="z-font z-box z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-box z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-box z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-box z-text-green"></i></td>
|
||||
<td><i class="z-font z-box z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-box z-text-blue"></i></td>
|
||||
<td><i class="z-font z-box z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-desk</td>
|
||||
<td class="z-samp">&#xf0a5;</td>
|
||||
<td><i class="z-font z-desk"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-desk z-text-white"></i></td>
|
||||
<td><i class="z-font z-desk z-text-gray"></i></td>
|
||||
<td><i class="z-font z-desk z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-desk z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-desk z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-desk z-text-green"></i></td>
|
||||
<td><i class="z-font z-desk z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-desk z-text-blue"></i></td>
|
||||
<td><i class="z-font z-desk z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-gift</td>
|
||||
<td class="z-samp">&#xf0a6;</td>
|
||||
<td><i class="z-font z-gift"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-gift z-text-white"></i></td>
|
||||
<td><i class="z-font z-gift z-text-gray"></i></td>
|
||||
<td><i class="z-font z-gift z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-gift z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-gift z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-gift z-text-green"></i></td>
|
||||
<td><i class="z-font z-gift z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-gift z-text-blue"></i></td>
|
||||
<td><i class="z-font z-gift z-text-purple"></i></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-font.z-lock</td>
|
||||
<td class="z-samp">&#xf0a7;</td>
|
||||
<td><i class="z-font z-lock"></i></td>
|
||||
<td class="z-bg-black"><i class="z-font z-lock z-text-white"></i></td>
|
||||
<td><i class="z-font z-lock z-text-gray"></i></td>
|
||||
<td><i class="z-font z-lock z-text-red zi-px20"></i></td>
|
||||
<td><i class="z-font z-lock z-text-orange zi-px18"></i></td>
|
||||
<td><i class="z-font z-lock z-text-yellow"></i></td>
|
||||
<td><i class="z-font z-lock z-text-green"></i></td>
|
||||
<td><i class="z-font z-lock z-text-cyan"></i></td>
|
||||
<td><i class="z-font z-lock z-text-blue"></i></td>
|
||||
<td><i class="z-font z-lock z-text-purple"></i></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()}
|
||||
@@ -0,0 +1,440 @@
|
||||
<#def title = "使用rem"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "ZmUI整体风格使用rem作为长度单位，它是相对于html元素的font-size的一个单位。建议大家对需要适应页面大小的任何元素都使用rem为单位来定义。"/>
|
||||
<#def prevUrl = "css.htm"/>
|
||||
<#def nextUrl = "color.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
${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", "css", "rem")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "使用rem")}
|
||||
|
||||
<!-- 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">使用rem：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
ZmUI整体风格使用 rem 作为长度单位，它是相对于 html 元素的 font-size 的一个单位。建议大家对需要适应页面大小的任何元素都使用 rem 为单位来定义。<br>
|
||||
关于其定义，可以参考 <a class="zi-text-blue z-weight-normal" href="https://developer.mozilla.org/en-US/docs/Web/CSS/length" target="_blank">MDN上的定义</a>。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- HTML 标签的 font-size 定义 -->
|
||||
<div class="tutorial title">HTML 标签的 font-size 定义</div>
|
||||
|
||||
<div class="z-float-left z-w100p z-lh200p">
|
||||
<div class="z-pd10 z-px18 z-lh200p">一、以 iphone6 为基准</div>
|
||||
<div class="z-pd10 z-px16">
|
||||
以 iphone6 的屏宽 375 作为媒体查询 font-size 计算的标准，再向更大更小进行变化；<br>
|
||||
此时 html 标签的 font-size 为 100px，默认字体大小为 .16rem(16px)，所有以 rem 定义的大小、长度均以此为基准进行计算。</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="z-float-left z-w100p">
|
||||
<div class="z-pd10 z-px18 z-lh200p">二、媒体查询计算 font-size</div>
|
||||
<div class="z-pd10">
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@media screen and (max-width: 320px) {
|
||||
html {
|
||||
font-size:83.33px;
|
||||
font-size:26.66667vw
|
||||
}
|
||||
}
|
||||
...
|
||||
@media screen and (min-width: 376px) and (max-width:393px) {
|
||||
html {
|
||||
font-size:104.8px;
|
||||
font-size:26.66667vw
|
||||
}
|
||||
}
|
||||
...
|
||||
@media screen and (min-width: 769px) {
|
||||
html {
|
||||
font-size:204.8px
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<#-- 通用的字体大小定义 -->
|
||||
<div class="tutorial title">通用的字体大小定义</div>
|
||||
<div class="tutorial z-relative-left z-text-black z-pd-t3" style="font-size:16px;line-height:250%;">
|
||||
<ul>
|
||||
<li>暂时保留 ZhiqimUI 中 px 的定义，如：z-px12、zi-px20。</li>
|
||||
<li>新增 rem 的定义方式，如：z-rem12、zi-rem20，分别表示 font-size:.12rem 和 font-size:.2rem !important。</li>
|
||||
</ul>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
|
||||
.z-px10{font-size:10px;}
|
||||
.z-px11{font-size:11px;}
|
||||
.z-px12{font-size:12px;}
|
||||
.z-px13{font-size:13px;}
|
||||
.z-px14{font-size:14px;}
|
||||
.z-px15{font-size:15px;}
|
||||
.z-px16{font-size:16px;}
|
||||
.z-px17{font-size:17px;}
|
||||
.z-px18{font-size:18px;}
|
||||
.z-px19{font-size:19px;}
|
||||
.z-px20{font-size:20px;}
|
||||
.z-px22{font-size:22px;}
|
||||
.z-px24{font-size:24px;}
|
||||
.z-px26{font-size:26px;}
|
||||
.z-px30{font-size:30px;}
|
||||
.z-px40{font-size:40px;}
|
||||
.z-px50{font-size:50px;}
|
||||
|
||||
.zi-px10{font-size:10px !important;}
|
||||
...
|
||||
.zi-px50{font-size:50px !important;}
|
||||
|
||||
.z-rem12{font-size:.12rem;}
|
||||
.z-rem13{font-size:.13rem;}
|
||||
.z-rem14{font-size:.14rem;}
|
||||
.z-rem15{font-size:.15rem;}
|
||||
.z-rem16{font-size:.16rem;}
|
||||
.z-rem17{font-size:.17rem;}
|
||||
.z-rem18{font-size:.18rem;}
|
||||
.z-rem19{font-size:.19rem;}
|
||||
.z-rem20{font-size:.2rem;}
|
||||
.z-rem22{font-size:.22rem;}
|
||||
.z-rem24{font-size:.24rem;}
|
||||
.z-rem25{font-size:.25rem;}
|
||||
.z-rem26{font-size:.26rem;}
|
||||
.z-rem28{font-size:.28rem;}
|
||||
.z-rem30{font-size:.3rem;}
|
||||
.z-rem32{font-size:.32rem;}
|
||||
.z-rem35{font-size:.35rem;}
|
||||
.z-rem36{font-size:.36rem;}
|
||||
.z-rem40{font-size:.4rem;}
|
||||
.z-rem50{font-size:.50rem;}
|
||||
|
||||
.zi-rem12{font-size:.12rem !important;}
|
||||
...
|
||||
.zi-rem50{font-size:.50rem !important;}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<#-- width 和 height 定义 -->
|
||||
<div class="tutorial title">width 和 height 定义</div>
|
||||
<div class="tutorial z-relative-left z-text-black z-pd-t3" style="font-size:16px;line-height:250%;">
|
||||
<ul>
|
||||
<li>原 ZhiqimUI 中的定义具体数值的 z-w*、z-h* ，如： z-w100、z-h100；统一改成用 z- 前缀，单位为 rem，如： z-w100、z-h100。</li>
|
||||
<li>原 ZhiqimUI 中的定义百分比的 z-w5p、z-h50p 保留。</li>
|
||||
</ul>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
|
||||
.z-w0{width:0;}
|
||||
.z-w10{width:.1rem;}.z-w12{width:.12rem;}
|
||||
.z-w14{width:.14rem;}.z-w15{width:.15rem;}
|
||||
.z-w16{width:.16rem;}.z-w18{width:.18rem;}
|
||||
.z-w20{width:.2rem;}.z-w22{width:.22rem;}
|
||||
.z-w24{width:.24rem;}.z-w25{width:.25rem;}
|
||||
.z-w28{width:.28rem;}.z-w30{width:.3rem;}
|
||||
.z-w35{width:.35rem;}.z-w40{width:.4rem;}
|
||||
.z-w45{width:.45rem;}.z-w50{width:.5rem;}
|
||||
.z-w55{width:.55rem;}.z-w60{width:.6rem;}
|
||||
.z-w65{width:.65rem;}.z-w70{width:.7rem;}
|
||||
.z-w75{width:.75rem;}.z-w80{width:.8rem;}
|
||||
.z-w85{width:.85rem;}.z-w90{width:.9rem;}
|
||||
.z-w95{width:.95rem;}.z-w100{width:1rem;}
|
||||
.z-w110{width:1.1rem;}.z-w120{width:1.2rem;}
|
||||
.z-w130{width:1.3rem;}.z-w140{width:1.4rem;}
|
||||
.z-w150{width:1.5rem;}.z-w160{width:1.6rem;}
|
||||
.z-w170{width:1.7rem;}.z-w180{width:1.8rem;}
|
||||
.z-w190{width:1.9rem;}.z-w200{width:2rem;}
|
||||
.z-w230{width:2.3rem;}.z-w250{width:2.5rem;}
|
||||
.z-w270{width:2.7rem;}.z-w300{width:3rem;}
|
||||
.z-w400{width:4rem;}.z-w500{width:5rem;}
|
||||
.z-w600{width:6rem;}.z-w700{width:7rem;}
|
||||
.z-w800{width:8rem;}
|
||||
|
||||
.zi-w0{width:0 !important;}
|
||||
...
|
||||
.zi-w800{width:8rem !important;}
|
||||
|
||||
.z-w5p{width:5%;}.z-w8p{width:8%;}
|
||||
.z-w10p{width:10%;}.z-w12p{width:12%;}
|
||||
.z-w15p{width:15%;}.z-w30p{width:30%;}
|
||||
.z-w40p{width:40%;}.z-w60p{width:60%;}
|
||||
.z-w70p{width:70%;}.z-w80p{width:80%;}
|
||||
.z-w90p{width:90%;}.z-w100p{width:100%;}
|
||||
.z-w100p2,.z-w50p{width:50%;}
|
||||
.z-w100p3{width:33.333333%;}
|
||||
.z-w100p4,.z-w25p{width:25%;}
|
||||
.z-w100p5,.z-w20p{width:20%;}
|
||||
.z-w100p6{width:16.666666%;}
|
||||
.z-w100p7{width:14.285714%;}
|
||||
.z-w100p8{width:12.5%;}
|
||||
.z-w100p9{width:11.111111%;}
|
||||
|
||||
.zi-w5p{width:5% !important;}.zi-w8p{width:8% !important;}
|
||||
...
|
||||
.zi-w100p9{width:11.111111% !important;}
|
||||
|
||||
.z-h0{height:0;}
|
||||
.z-h10{height:.1rem;}.z-h12{height:.12rem;}
|
||||
.z-h14{height:.14rem;}.z-h15{height:.15rem;}
|
||||
.z-h16{height:.16rem;}.z-h18{height:.18rem;}
|
||||
.z-h20{height:.2rem;}.z-h22{height:.22rem;}
|
||||
.z-h24{height:.24rem;}.z-h25{height:.25rem;}
|
||||
.z-h28{height:.28rem;}.z-h30{height:.3rem;}
|
||||
.z-h32{height:.32rem;}.z-h35{height:.35rem;}
|
||||
.z-h40{height:.4rem;}.z-h45{height:.45rem;}
|
||||
.z-h50{height:.5rem;}.z-h55{height:.55rem;}
|
||||
.z-h60{height:.6rem;}.z-h65{height:.65rem;}
|
||||
.z-h70{height:.7rem;}.z-h75{height:.75rem;}
|
||||
.z-h80{height:.8rem;}.z-h85{height:.85rem;}
|
||||
.z-h90{height:.9rem;}.z-h95{height:.95rem;}
|
||||
.z-h100{height:1rem;}.z-h110{height:1.1rem;}
|
||||
.z-h120{height:1.2rem;}.z-h130{height:1.3rem;}
|
||||
.z-h140{height:1.4rem;}.z-h150{height:1.5rem;}
|
||||
.z-h160{height:1.6rem;}.z-h170{height:1.7rem;}
|
||||
.z-h180{height:1.8rem;}.z-h190{height:1.9rem;}
|
||||
.z-h200{height:2rem;}.z-h300{height:3rem;}
|
||||
.z-h400{height:4rem;}.z-h500{height:5rem;}
|
||||
|
||||
.zi-h0{height:0 !important;}
|
||||
...
|
||||
.zi-h400{height:4rem !important;}.zi-h500{height:5rem !important;}
|
||||
|
||||
.z-h5p{height:5%;}.z-h8p{height:8%;}
|
||||
.z-h10p{height:10%;}.z-h12p{height:12%;}
|
||||
.z-h15p{height:15%;}.z-h20p{height:20%;}
|
||||
.z-h30p{height:30%;}.z-h40p{height:40%;}
|
||||
.z-h50p{height:50%;}.z-h60p{height:60%;}
|
||||
.z-h70p{height:70%;}.z-h80p{height:80%;}
|
||||
.z-h90p{height:90%;}.z-h100p{height:100%;}
|
||||
|
||||
.zi-h5p{height:5% !important;}.zi-h8p{height:8% !important;}
|
||||
...
|
||||
.zi-h90p{height:90% !important;}.zi-h100p{height:100% !important;}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<#-- 行高 -->
|
||||
<div class="tutorial title">行高</div>
|
||||
<div class="tutorial z-relative-left z-text-black z-pd-t3" style="font-size:16px;line-height:250%;">
|
||||
<ul>
|
||||
<li>原 ZhiqimUI 中的定义具体数值的 z-lh*，如： z-lh15；统一改成用 z- 前缀，单位为 rem，如：z-lh15。</li>
|
||||
<li>原 ZhiqimUI 中的定义百分比的 z-lh100p、zi-lh50p 保留。</li>
|
||||
</ul>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
.z-lh0{line-height:0;}.z-lh10{line-height:.1rem;}
|
||||
.z-lh12{line-height:.12rem;}.z-lh14{line-height:.14rem;}
|
||||
.z-lh15{line-height:.15rem;}.z-lh16{line-height:.16rem;}
|
||||
.z-lh18{line-height:.18rem;}.z-lh20{line-height:.2rem;}
|
||||
.z-lh22{line-height:.22rem;}.z-lh24{line-height:.24rem;}
|
||||
.z-lh25{line-height:.25rem;}.z-lh28{line-height:.28rem;}
|
||||
.z-lh30{line-height:.3rem;}.z-lh32{line-height:.32rem;}
|
||||
.z-lh35{line-height:.35rem;}.z-lh40{line-height:.4rem;}
|
||||
.z-lh45{line-height:.45rem;}.z-lh50{line-height:.5rem;}
|
||||
.z-lh55{line-height:.55rem;}.z-lh60{line-height:.6rem;}
|
||||
.z-lh70{line-height:.7rem;}.z-lh80{line-height:.8rem;}
|
||||
.z-lh90{line-height:.9rem;}.z-lh100{line-height:1rem;}
|
||||
|
||||
.zi-lh0{line-height:0 !important;}.zi-lh10{line-height:.1rem !important;}
|
||||
...
|
||||
.zi-lh90{line-height:.9rem !important;}.zi-lh100{line-height:1rem !important;}
|
||||
|
||||
.z-lh100p{line-height:100%;}.z-lh110p{line-height:110%;}
|
||||
.z-lh120p{line-height:120%;}.z-lh130p{line-height:130%;}
|
||||
.z-lh140p{line-height:140%;}.z-lh150p{line-height:150%;}
|
||||
.z-lh180p{line-height:180%;}.z-lh200p{line-height:200%;}
|
||||
.z-lh250p{line-height:250%;}.z-lh300p{line-height:300%;}
|
||||
|
||||
.zi-lh100p{line-height:100% !important;}.zi-lh110p{line-height:110% !important;}
|
||||
.zi-lh120p{line-height:120% !important;}.zi-lh130p{line-height:130% !important;}
|
||||
.zi-lh140p{line-height:140% !important;}.zi-lh150p{line-height:150% !important;}
|
||||
.zi-lh180p{line-height:180% !important;}.zi-lh200p{line-height:200% !important;}
|
||||
.zi-lh250p{line-height:250% !important;}.zi-lh300p{line-height:300% !important;}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<#-- 内边距和外边距 -->
|
||||
<div class="tutorial title">内边距和外边距</div>
|
||||
<div class="tutorial z-relative-left z-text-black z-pd-t3" style="font-size:16px;line-height:250%;">
|
||||
<ul>
|
||||
<li>原 ZhiqimUI 中的定义具体数值的 z-pd*、z-pd-l*、z-mg*、z-mg-r* ，如： z-pd5、z-pd-l5、z-mg10、z-mg-t-10；统一改成用 z- 前缀，单位为 rem。</li>
|
||||
<li>新增 z-pd-lr*、z-pd-tb*、z-mg-lr*、z-mg-tb* 表示左右、上下的边距统一设置。</li>
|
||||
<li>针对 1px 边框，可能存在的 负偏移，新增 z-mg-t-1px 表示向上偏移 -1px；left、right、bottom方向同理。</li>
|
||||
<li>外边距新增 auto属性。</li>
|
||||
</ul>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
.z-pd0{padding:0;}.z-pd1{padding:.01rem;}
|
||||
.z-pd2{padding:.02rem;}.z-pd3{padding:.03rem;}
|
||||
.z-pd4{padding:.04rem;}.z-pd5{padding:.05rem;}
|
||||
.z-pd6{padding:.06rem;}.z-pd7{padding:.07rem;}
|
||||
.z-pd8{padding:.08rem;}.z-pd9{padding:.09rem;}
|
||||
.z-pd10{padding:.1rem;}.z-pd12{padding:.12rem;}
|
||||
.z-pd14{padding:.14rem;}.z-pd15{padding:.15rem;}
|
||||
.z-pd16{padding:.16rem;}.z-pd18{padding:.18rem;}
|
||||
.z-pd20{padding:.2rem;}.z-pd24{padding:.24rem;}
|
||||
.z-pd25{padding:.25rem;}.z-pd26{padding:.25rem;}
|
||||
.z-pd28{padding:.28rem;}.z-pd30{padding:.3rem;}
|
||||
|
||||
.zi-pd0{padding:0 !important;}.zi-pd1{padding:.01rem !important;}
|
||||
...
|
||||
.zi-pd28{padding:.28rem !important;}.zi-pd30{padding:.3rem !important;}
|
||||
|
||||
.z-pd-l0{padding-left:0;}.z-pd-l1{padding-left:.01rem;}
|
||||
.z-pd-l2{padding-left:.02rem;}.z-pd-l3{padding-left:.03rem;}
|
||||
.z-pd-l4{padding-left:.04rem;}.z-pd-l5{padding-left:.05rem;}
|
||||
.z-pd-l6{padding-left:.06rem;}.z-pd-l7{padding-left:.07rem;}
|
||||
.z-pd-l8{padding-left:.08rem;}.z-pd-l9{padding-left:.09rem;}
|
||||
.z-pd-l10{padding-left:.1rem;}.z-pd-l12{padding-left:.12rem;}
|
||||
.z-pd-l14{padding-left:.14rem;}.z-pd-l15{padding-left:.15rem;}
|
||||
.z-pd-l16{padding-left:.16rem;}.z-pd-l18{padding-left:.18rem;}
|
||||
.z-pd-l20{padding-left:.2rem;}.z-pd-l24{padding-left:.24rem;}
|
||||
.z-pd-l25{padding-left:.25rem;}.z-pd-l26{padding-left:.25rem;}
|
||||
.z-pd-l28{padding-left:.28rem;}.z-pd-l30{padding-left:.3rem;}
|
||||
|
||||
.zi-pd-l0{padding-left:0 !important;}.zi-pd-l1{padding-left:.01rem !important;}
|
||||
...
|
||||
.zi-pd-l28{padding-left:.28rem !important;}.zi-pd-l30{padding-left:.3rem !important;}
|
||||
|
||||
...为省略篇幅，类似代码省略...
|
||||
|
||||
.z-pd-lr0{padding-left:0;padding-right:0;}.z-pd-lr1{padding-left:.01rem;padding-right:.01rem;}
|
||||
.z-pd-lr2{padding-left:.02rem;padding-right:.02rem;}.z-pd-lr3{padding-left:.03rem;padding-right:.03rem;}
|
||||
.z-pd-lr4{padding-left:.04rem;padding-right:.04rem;}.z-pd-lr5{padding-left:.05rem;padding-right:.05rem;}
|
||||
.z-pd-lr6{padding-left:.06rem;padding-right:.06rem;}.z-pd-lr7{padding-left:.07rem;padding-right:.07rem;}
|
||||
.z-pd-lr8{padding-left:.08rem;padding-right:.08rem;}.z-pd-lr9{padding-left:.09rem;padding-right:.09rem;}
|
||||
.z-pd-lr10{padding-left:.1rem;padding-right:.1rem;}.z-pd-lr12{padding-left:.12rem;padding-right:.12rem;}
|
||||
.z-pd-lr14{padding-left:.14rem;padding-right:.14rem;}.z-pd-lr15{padding-left:.15rem;padding-right:.15rem;}
|
||||
.z-pd-lr16{padding-left:.16rem;padding-right:.16rem;}.z-pd-lr18{padding-left:.18rem;padding-right:.18rem;}
|
||||
.z-pd-lr20{padding-left:.2rem;padding-right:.2rem;}.z-pd-lr24{padding-left:.24rem;padding-right:.24rem;}
|
||||
.z-pd-lr25{padding-left:.25rem;padding-right:.25rem;}.z-pd-lr26{padding-left:.25rem;padding-right:.25rem;}
|
||||
.z-pd-lr28{padding-left:.28rem;padding-right:.28rem;}.z-pd-lr30{padding-left:.3rem;padding-right:.3rem;}
|
||||
|
||||
.zi-pd-lr0{padding-left:0 !important;padding-right:0 !important;}.zi-pd-lr1{padding-left:.01rem !important;padding-right:.01rem !important;}
|
||||
...
|
||||
.zi-pd-lr28{padding-left:.28rem !important;padding-right:.28rem !important;}.zi-pd-lr30{padding-left:.3rem !important;padding-right:.3rem !important;}
|
||||
|
||||
...为省略篇幅，类似代码省略...
|
||||
|
||||
.z-mg-0{margin:0;}.z-mg1{margin:.01rem;}
|
||||
.z-mg2{margin:.02rem;}.z-mg3{margin:.03rem;}
|
||||
.z-mg4{margin:.04rem;}.z-mg5{margin:.05rem;}
|
||||
.z-mg6{margin:.06rem;}.z-mg7{margin:.07rem;}
|
||||
.z-mg8{margin:.08rem;}.z-mg9{margin:.09rem;}
|
||||
.z-mg10{margin:.1rem;}.z-mg12{margin:.12rem;}
|
||||
.z-mg14{margin:.14rem;}.z-mg15{margin:.15rem;}
|
||||
.z-mg16{margin:.16rem;}.z-mg18{margin:.18rem;}
|
||||
.z-mg20{margin:.2rem;}.z-mg24{margin:.24rem;}
|
||||
.z-mg25{margin:.25rem;}.z-mg26{margin:.25rem;}
|
||||
.z-mg28{margin:.28rem;}.z-mg30{margin:.3rem;}
|
||||
|
||||
.zi-mg0{margin:0 !important;}.zi-mg1{margin:.01rem !important;}
|
||||
...
|
||||
.zi-mg28{margin:.28rem !important;}.zi-mg30{margin:.3rem !important;}
|
||||
|
||||
.z-mg-t0{margin-top:0;}.z-mg-t1{margin-top:.01rem;}
|
||||
.z-mg-t2{margin-top:.02rem;}.z-mg-t3{margin-top:.03rem;}
|
||||
.z-mg-t4{margin-top:.04rem;}.z-mg-t5{margin-top:.05rem;}
|
||||
.z-mg-t6{margin-top:.06rem;}.z-mg-t7{margin-top:.07rem;}
|
||||
.z-mg-t8{margin-top:.08rem;}.z-mg-t9{margin-top:.09rem;}
|
||||
.z-mg-t10{margin-top:.1rem;}.z-mg-t12{margin-top:.12rem;}
|
||||
.z-mg-t14{margin-top:.14rem;}.z-mg-t15{margin-top:.15rem;}
|
||||
.z-mg-t16{margin-top:.16rem;}.z-mg-t18{margin-top:.18rem;}
|
||||
.z-mg-t20{margin-top:.2rem;}.z-mg-t24{margin-top:.24rem;}
|
||||
.z-mg-t25{margin-top:.25rem;}.z-mg-t26{margin-top:.25rem;}
|
||||
.z-mg-t28{margin-top:.28rem;}.z-mg-t30{margin-top:.3rem;}
|
||||
|
||||
.zi-mg-t0{margin-top:0 !important;}.zi-mg-t1{margin-top:.01rem !important;}
|
||||
...
|
||||
.zi-mg-t28{margin-top:.28rem !important;}.zi-mg-t30{margin-top:.3rem !important;}
|
||||
|
||||
...为省略篇幅，类似代码省略...
|
||||
|
||||
.z-mg-t-1{margin-top:-.01rem;}.z-mg-t-2{margin-top:-.02rem;}
|
||||
.z-mg-t-3{margin-top:-.03rem;}.z-mg-t-4{margin-top:-.04rem;}
|
||||
.z-mg-t-5{margin-top:-.05rem;}.z-mg-t-6{margin-top:-.06rem;}
|
||||
.z-mg-t-7{margin-top:-.07rem;}.z-mg-t-8{margin-top:-.08rem;}
|
||||
.z-mg-t-9{margin-top:-.09rem;}.z-mg-t-10{margin-top:-.1rem;}
|
||||
.z-mg-t-12{margin-top:-.12rem;}.z-mg-t-14{margin-top:-.14rem;}
|
||||
.z-mg-t-15{margin-top:-.15rem;}.z-mg-t-16{margin-top:-.16rem;}
|
||||
.z-mg-t-18{margin-top:-.18rem;}.z-mg-t-20{margin-top:-.2rem;}
|
||||
.z-mg-t-24{margin-top:-.24rem;}.z-mg-t-25{margin-top:-.25rem;}
|
||||
.z-mg-t-26{margin-top:-.25rem;}.z-mg-t-28{margin-top:-.28rem;}
|
||||
.z-mg-t-30{margin-top:-.3rem;}
|
||||
|
||||
.zi-mg-t-1{margin-top:-.01rem !important;}.zi-mg-t-2{margin-top:-.02rem !important;}
|
||||
...
|
||||
.zi-mg-t-30{margin-top:-.3rem !important;}
|
||||
|
||||
...为省略篇幅，类似代码省略...
|
||||
|
||||
.z-mg-t-1px{margin-top:-1px;}
|
||||
.z-mg-r-1px{margin-right:-1px;}
|
||||
.z-mg-l-1px{margin-left:-1px;}
|
||||
.z-mg-b-1px{margin-bottom:-1px;}
|
||||
|
||||
.zi-mg-t-1px{margin-top:-1px !important;}
|
||||
.zi-mg-r-1px{margin-right:-1px !important;}
|
||||
.zi-mg-l-1px{margin-left:-1px !important;}
|
||||
.zi-mg-b-1px{margin-bottom:-1px !important;}
|
||||
|
||||
.z-mg-auto{margin:auto;}
|
||||
.z-mg-l-auto{margin-left:auto;}
|
||||
.z-mg-r-auto{margin-right:auto;}
|
||||
.z-mg-t-auto{margin-top:auto;}
|
||||
.z-mg-b-auto{margin-bottom:auto;}
|
||||
.z-mg-lr-auto{margin-left:auto;margin-right:auto;}
|
||||
.z-mg-tb-auto{margin-top:auto;margin-bottom:auto;}
|
||||
|
||||
.zi-mg-auto{margin:auto !important;}
|
||||
.zi-mg-l-auto{margin-left:auto !important;}
|
||||
.zi-mg-r-auto{margin-right:auto !important;}
|
||||
.zi-mg-t-auto{margin-top:auto !important;}
|
||||
.zi-mg-b-auto{margin-bottom:auto !important;}
|
||||
.zi-mg-lr-auto{margin-left:auto !important;margin-right:auto !important;}
|
||||
.zi-mg-tb-auto{margin-top:auto !important;margin-bottom:auto !important;}
|
||||
</span>
|
||||
</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()}
|
||||
@@ -0,0 +1,460 @@
|
||||
<#def title = "文本样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等"/>
|
||||
<#def prevUrl = "font.htm"/>
|
||||
<#def nextUrl = "block.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
${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", "css", "text")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局CSS定义", "文本样式")}
|
||||
|
||||
<!-- 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 z-px16">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="18%">名称</td>
|
||||
<td width="36%">样式</td>
|
||||
<td width="*">举例</td>
|
||||
<td width="20%">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">b</td>
|
||||
<td><pre class="z-text-preline">b{font-weight:bold;}</pre></td>
|
||||
<td><b>微软雅黑字体</b></td>
|
||||
<td>粗体</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">i</td>
|
||||
<td><pre class="z-text-preline">i{font-style:italic;}</pre></td>
|
||||
<td><i>微软雅黑字体</i></td>
|
||||
<td>斜体</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">u</td>
|
||||
<td><pre class="z-text-preline">u{text-decoration:underline;}</pre></td>
|
||||
<td><u>带下划线文本效果</u></td>
|
||||
<td>下划线体</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">del</td>
|
||||
<td><pre class="z-text-preline">del{text-decoration:line-through;}</pre></td>
|
||||
<td><del>带删除线文本效果</del></td>
|
||||
<td>删除线体</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">small</td>
|
||||
<td><pre class="z-text-preline">small{font-size:80%;}</pre></td>
|
||||
<td><small>这里是小号文本效果</small></td>
|
||||
<td>小号体，80%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">sup</td>
|
||||
<td><pre class="z-text-preline">sub,sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}<br>sup{top:-0.5em;}</pre></td>
|
||||
<td>文本上标效果<sup>superscript</sup></td>
|
||||
<td>上标</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">sub</td>
|
||||
<td><pre class="z-text-preline">sub,sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}<br>sub{bottom:-0.25em;}</pre></td>
|
||||
<td>文本下标效果<sub>subscript</sub></td>
|
||||
<td>下标</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">mark</td>
|
||||
<td><pre class="z-text-preline">mark{background:#ff0;color:#000;}</td>
|
||||
<td>这里是<mark>标记字体效果<mark></td>
|
||||
<td>标记体，颜色为通用的黑色+黄底#ffff00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">abbr[title]</td>
|
||||
<td><pre class="z-text-preline">abbr[title]{border-bottom:1px dotted;}<br>@-moz-document url-prefix(){abbr[title]{border-bottom:0;}}</pre></td>
|
||||
<td>这里是<abbr title="微软雅黑字体">MSYH</abbr>缩写效果</td>
|
||||
<td>缩写体，显示下划虚线，firefox原来就有，所以要用hack去掉</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-bold</td>
|
||||
<td><pre class="z-text-preline">.z-bold{font-weight:bold;}</pre></td>
|
||||
<td><span class="z-bold">这里是字体加粗效果</span></td>
|
||||
<td>粗体</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-italic</td>
|
||||
<td><pre class="z-text-preline">.z-italic{font-style:italic;}</pre></td>
|
||||
<td><span class="z-italic">这里是文本斜体效果</span></td>
|
||||
<td>斜体</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-underline</td>
|
||||
<td><pre class="z-text-preline">.z-underline{text-decoration:underline;}</pre></td>
|
||||
<td><span class="z-underline">带下划线文本效果</span></td>
|
||||
<td>下划线体</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-delline</td>
|
||||
<td><pre class="z-text-preline">.z-delline{text-decoration:line-through;}</pre></td>
|
||||
<td><span class="z-delline">带删除线文本效果</span></td>
|
||||
<td>删除线体</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-weight-normal</td>
|
||||
<td><pre class="z-text-preline">.z-weight-normal{font-weight:normal;}</pre></td>
|
||||
<td><span class="z-bold">粗体<span class="z-weight-normal">正常</span></span></td>
|
||||
<td>普通大小</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-style-normal</td>
|
||||
<td><pre class="z-text-preline">.z-style-normal{font-style:normal;}</pre></td>
|
||||
<td><span class="z-italic">斜体<span class="z-style-normal">正常</span></span></td>
|
||||
<td>普通样式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-small</td>
|
||||
<td><pre class="z-text-preline">.z-small{font-size:80%;}</pre></td>
|
||||
<td><span class="z-small">这里是小号文本效果</span></td>
|
||||
<td>小号体，80%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-sup</td>
|
||||
<td><pre class="z-text-preline">.z-sub,.z-sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}.z-sup{top:-0.5em;}</pre></td>
|
||||
<td>文本上标效果<span class="z-sup">superscript</span></td>
|
||||
<td>上标</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-sub</td>
|
||||
<td><pre class="z-text-preline">.z-sub,.z-sup {position:relative;vertical-align:baseline;line-height:0;font-size:75%;}.z-sub{bottom:-0.25em;}</pre></td>
|
||||
<td>文本下标效果<span class="z-sub">subscript</span></td>
|
||||
<td>下标</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-mark</td>
|
||||
<td><pre class="z-text-preline">.z-mark{background:#ff0;color:#000;}</pre></td>
|
||||
<td>这里是<span class="z-mark">标记字体效果<mark></td>
|
||||
<td>标记体，颜色为通用的黑色+黄底#ffff00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-abbr[title]</td>
|
||||
<td><pre class="z-text-preline">.z-abbr[title]{border-bottom:1px dotted;}</pre></td>
|
||||
<td>这里是<span class="z-abbr" title="微软雅黑字体">MSYH</span>缩写效果</td>
|
||||
<td>缩写体，显示下划虚线</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、文本换行、不换行、省略和隐藏等属性 -->
|
||||
<div class="tutorial title">二、文本换行、不换行、省略和隐藏等属性</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14 z-relative-left">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="18%">名称</td>
|
||||
<td width="36%">样式</td>
|
||||
<td width="*">举例</td>
|
||||
<td width="20%">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-text-break</td>
|
||||
<td><pre class="z-text-preline">.z-text-break{word-break:break-all; word-wrap:break-word;}</pre></td>
|
||||
<td class="z-text-break">Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions.</span></td>
|
||||
<td>国人是不管英文是不是单词的，直接换行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-text-pre</td>
|
||||
<td><pre class="z-text-preline">.z-text-pre{white-space:pre;}</td>
|
||||
<td>
|
||||
<span class="z-pre z-text-pre">
|
||||
第一行第一行第一行第一行第一行
|
||||
第二行
|
||||
第三行
|
||||
</span>
|
||||
</td>
|
||||
<td>保留空白符列表，类似于<pre>，每行nowrap，撑大</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-text-prewrap</td>
|
||||
<td><pre class="z-text-preline">.z-text-prewrap{white-space:pre-wrap;}</td>
|
||||
<td>
|
||||
<span class="z-pre z-text-prewrap">
|
||||
第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行<br>
|
||||
第二行<br>
|
||||
第三行<br>
|
||||
</span>
|
||||
</td>
|
||||
<td>保留空白符列表，超时自动换行。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-text-preline</td>
|
||||
<td><pre class="z-text-preline">.z-text-preline{white-space:pre-line;}</td>
|
||||
<td>
|
||||
<span class="z-pre z-text-preline">
|
||||
第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行<br>
|
||||
第二行<br>
|
||||
第三行<br>
|
||||
</span>
|
||||
</td>
|
||||
<td>合并空白符列表，但是保留换行符。如果第一个字符是\n，<pre>会清理，.z-text-preline不会，需借助JS删除该字符，:first-line设置行高为0时IE/Webkit可以,Firefox不行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-text-nowrap</td>
|
||||
<td><pre class="z-text-preline">.z-text-nowrap{white-space:nowrap;}</td>
|
||||
<td class="z-text-nowrap">Except as required by law or in writing, the so</td>
|
||||
<td>不换行，会把td撑大，直到遇到 <br> 标签为止。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-text-ellipsis</td>
|
||||
<td><pre class="z-text-preline">.z-text-ellipsis{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;display:inline-block;}</pre></td>
|
||||
<td><span class="z-bd z-w300 z-text-ellipsis">Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions.</span></td>
|
||||
<td>超过的显示省略号，缺点是必须指定宽度，且只能是一行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">
|
||||
.z-text-ellipsis<br>
|
||||
.z-text-ellipsis-line<br>
|
||||
.z-text-ellipsis-2line<br>
|
||||
.z-text-ellipsis-3line<br>
|
||||
</td>
|
||||
<td><pre class="z-text-preline">.z-text-ellipsis{text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;word-break:break-word;-webkit-line-clamp:1;}</pre></td>
|
||||
<td><span class="z-bd z-w300 z-text-ellipsis-2line">Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions.</span></td>
|
||||
<td>
|
||||
超过的显示省略号，为展示效果，最好依需要显示的行数指定行高、高度<br>
|
||||
因PC端兼容性较差，仅在 ZmUI 中定义
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-text-clip</td>
|
||||
<td><pre class="z-text-preline">.z-text-clip{text-overflow:clip;overflow:hidden;white-space:nowrap;display:inline-block;}</pre></td>
|
||||
<td><span class="z-bd z-w300 z-text-clip">Except as required by law or in writing, the software is provided by the original code, without any express or implied warranties and conditions. See the full license for the rights and restrictions.</span></td>
|
||||
<td>超过的省略也不显示省略号，缺点是必须指定宽度，且只能是一行</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<#-- 三、正文文本对齐方式 -->
|
||||
<div class="tutorial title">三、正文文本对齐方式，其中z-为常用，zi-为优先</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="36%">样式</td>
|
||||
<td width="*">举例</td>
|
||||
<td width="20%">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-text-left</td>
|
||||
<td><pre class="z-text-preline">.z-text-left{text-align:left;}</pre></td>
|
||||
<td class="z-text-left">文本左对齐<br>文本左对齐</td>
|
||||
<td>左对齐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-text-center</td>
|
||||
<td><pre class="z-text-preline">.z-text-center{text-align:center;}</pre></td>
|
||||
<td class="z-text-center">文本居中对齐<br>文本居中对齐</td>
|
||||
<td>居中对齐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-text-right</td>
|
||||
<td><pre class="z-text-preline">.z-text-right{text-align:right;}</pre></td>
|
||||
<td class="z-text-right">文本右对齐<br>文本右对齐</td>
|
||||
<td>右对齐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="zi-text-cyan">以下为文本对齐优先</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-text-left</td>
|
||||
<td><pre class="z-text-preline">.zi-text-left{text-align:left !important;}</pre></td>
|
||||
<td class="zi-text-left">文本左对齐<br>文本左对齐</td>
|
||||
<td>左对齐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-text-center</td>
|
||||
<td><pre class="z-text-preline">.zi-text-center{text-align:center !important;}</pre></td>
|
||||
<td class="zi-text-center">文本居中对齐<br>文本居中对齐</td>
|
||||
<td>居中对齐</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-text-right</td>
|
||||
<td><pre class="z-text-preline">.zi-text-right{text-align:right !important;}</pre></td>
|
||||
<td class="zi-text-right">文本右对齐<br>文本右对齐</td>
|
||||
<td>右对齐</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<#-- ；四、标题样式（h1-h3） -->
|
||||
<div class="tutorial title">四、标题样式（h1-h3）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="36%">样式</td>
|
||||
<td width="*">举例</td>
|
||||
<td width="20%">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">h1</td>
|
||||
<td><pre class="z-text-preline">h1{font-size:2em;margin:.67em 0;}</pre></td>
|
||||
<td><h1>微软雅黑字体，24号字体<br>微软雅黑字体，24号字体</h1></td>
|
||||
<td>H1字体，上下边距14px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">h2</td>
|
||||
<td><pre class="z-text-preline">h2{font-size:1.5em;margin:.83em 0;}</pre></td>
|
||||
<td><h2>微软雅黑字体，22号字体<br>微软雅黑字体，22号字体</h2></td>
|
||||
<td>H2字体，上下边距14px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">h3</td>
|
||||
<td><pre class="z-text-preline">h3{font-size:1.17em;margin:1em 0;}</pre></td>
|
||||
<td><h3>微软雅黑字体，20号字体<br>微软雅黑字体，22号字体</h3></td>
|
||||
<td>H3字体，上下边距14px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-h1</td>
|
||||
<td><pre class="z-text-preline">.z-h1{font-size:0.32rem;line-height:normal;font-weight:bold;display:block;margin:0.2rem 0;}</pre></td>
|
||||
<td><span class="z-h1">微软雅黑字体，24号字体<br>微软雅黑字体，24号字体</span></td>
|
||||
<td>模拟H1，当H1被覆盖时可以使用z-h1</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-h2</td>
|
||||
<td><pre class="z-text-preline">.z-h2{font-size:0.24rem;line-height:normal;font-weight:bold;display:block;margin:0.19rem 0;}</pre></td>
|
||||
<td><span class="z-h2">微软雅黑字体，22号字体<br>微软雅黑字体，22号字体</span></td>
|
||||
<td>模拟H2，当H2被覆盖时可以使用z-h2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-h3</td>
|
||||
<td><pre class="z-text-preline">.z-h3{font-size:0.18rem;line-height:normal;font-weight:bold;display:block;margin:0.18rem 0;}</pre></td>
|
||||
<td><span class="z-h3">微软雅黑字体，20号字体<br>微软雅黑字体，20号字体</span></td>
|
||||
<td>模拟H3，当H3被覆盖时可以使用z-h3</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 五、文本编码样式 -->
|
||||
<div class="tutorial title">五、文本编码样式（编码字体依次查找Consolas,"Courier New",monospace,Menlo,Monaco,"微软雅黑"）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-px14 z-relative-left">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="36%">样式</td>
|
||||
<td width="*">举例</td>
|
||||
<td width="20%">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">samp<br>.z-samp</td>
|
||||
<td>
|
||||
<pre class="z-text-preline">
|
||||
samp,.z-samp{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<samp>samp{font-family:"Courier New"}</samp><br><br>
|
||||
<span class="z-samp">.z-samp{border-radius:4px;}</span>
|
||||
</td>
|
||||
<td>无背景编码字体</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">kbd<br>.z-kbd</td>
|
||||
<td>
|
||||
<pre class="z-text-preline">
|
||||
kbd,.z-kbd{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
|
||||
<code>kbd,.z-kbd{border-radius:4px;}</code>
|
||||
kbd,.z-kbd{padding:2px 4px;font-size:90%;color:#fff;background-color:#333;-webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.25);box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.25);}
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<kbd>kbd{font-family:"Courier New"}</kbd><br><br>
|
||||
<span class="z-kbd">.z-kbd{border-radius:4px;}</span>
|
||||
</td>
|
||||
<td>黑背景白字键盘输入字体</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">pre<br>.z-pre</td>
|
||||
<td>
|
||||
<pre class="z-text-preline">
|
||||
pre{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
|
||||
<code>pre{border-radius:4px;}</code>
|
||||
pre{overflow:auto;display:block;padding:9.5px;margin:0 0 10px;font-size:13px;line-height:1.42857143;word-break:break-all;word-wrap:break-word;color:#333;background-color:#f5f5f5;border:1px solid #cccccc;}
|
||||
pre code{padding:0;font-size:inherit;color:#c7254e;white-space:pre-wrap;background-color:transparent;border-radius:0;}
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<pre class="z-text-preline">
|
||||
pre{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
|
||||
</pre>
|
||||
<span class="z-pre z-text-preline"><code>.z-pre{border-radius:4px;}</code></span>
|
||||
</td>
|
||||
<td>预处理标记，默认是单行撑大、留白，这里增加了.z-text-preline，改为单行换行，留白合并<br><br>显示红色的为里面使用<code>封装</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">code<br>.z-code</td>
|
||||
<td>
|
||||
<pre class="z-text-preline">
|
||||
code,.z-code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}
|
||||
<code>code,.z-code{border-radius:4px;}</code>
|
||||
code,.z-code{padding:2px 4px;font-size:90%;color:#c7254e;background-color:#f9f2f4;}
|
||||
pre code,.z-pre .z-code{padding:0;font-size:inherit;color:#c7254e;white-space:pre-wrap;background-color:transparent;border-radius:0;}
|
||||
</pre>
|
||||
</td>
|
||||
<td>
|
||||
<code class="z-text-preline">code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}</code><br><br>
|
||||
<span class="z-code z-text-preline">.z-code{font-family:Consolas,"Courier New",monospace,Menlo,Monaco;font-size:1em;}</span><br><br>
|
||||
<span class="z-pre z-text-preline"><span class="z-code">code{border-radius:4px;}</span></span>
|
||||
</td>
|
||||
<td>编码标记，默认是自动换行，且不保留空白<br><br>外边框是在显示红色的为使用<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()}
|
||||
@@ -0,0 +1,200 @@
|
||||
<#def title = "警告对话框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "警告对话框是自定义对话框的一种参考alert方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的警告对话框，支持设置警告内容和点击确定后回调函数。"/>
|
||||
<#def prevUrl = "../form/checkInput.htm"/>
|
||||
<#def nextUrl = "confirm.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
<!--
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
//-->
|
||||
</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", "dialog", "alert")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
警告对话框是自定义对话框的一种参考alert方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的警告对话框，支持设置警告内容和点击确定后回调函数。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、弹出警告（仅文本，无回调函数和参数） -->
|
||||
<div class="tutorial title">一、弹出警告（仅文本，无回调函数和参数）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.alert('这是一个告警!');">点我弹出一行告警选择框</a>
|
||||
<a href="javascript:void(0);" onclick="Z.success('这是一个成功!这是一个成功!这是一个成功!这是一个成功!这是一个成功!');">点我弹出多行告警选择框</a>
|
||||
<a href="javascript:void(0);" onclick="Z.failure('这是一个失败!这是一个失败!abcdefghabcdefghabcdefghabcdefgh11111111111111111111111111111111111111!');">点我弹出多行有字母失败选择框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个告警的对话框
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、弹出警告（文本，回调函数和有背景参数） -->
|
||||
<div class="tutorial title">二、弹出警告（文本，回调函数和有背景参数）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.alert('这是一个告警!', function(){alert('我是回调内容!')}, {hasBackground:true});">点我弹出告警选择框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个告警的对话框<br>
|
||||
2、点击确定后回调函数<br>
|
||||
3、设置有背景
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 三、弹出警告（文本，回调函数和指定高度参数） -->
|
||||
<div class="tutorial title">三、弹出警告（文本，回调函数和指定高度参数）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.alert('这是一个告警!这是一个告警!这是一个告警!这是一个告警!这是一个告警!这是一个告警!', function(){alert('我是回调内容!');}, {height: 140});">点我弹出告警对话框，高度140px</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个告警的对话框<br>
|
||||
2、点击确定后回调函数<br>
|
||||
3、指定对话框高度<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 警告对话框参数说明 -->
|
||||
<div class="tutorial title">警告对话框参数说明（基本参数两个，混合参数三个）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%">参数</td>
|
||||
<td width="30%">值</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">基本参数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">text</td>
|
||||
<td>必填</td>
|
||||
<td>警告文本，显示在对话框中的内容</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">callback</td>
|
||||
<td>可选</td>
|
||||
<td>警告点击确定之后回调函数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">混合参数，通过函数第三个参数param组合</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.width</td>
|
||||
<td>{width:330}</td>
|
||||
<td>警告对话框宽度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.height</td>
|
||||
<td>指定或计算得到值</td>
|
||||
<td>警告对话框高度，可指定高度，未指定高度时，通过文本字数计算出大概高度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.hasBackground</td>
|
||||
<td>{hasBackground:false}</td>
|
||||
<td>警告对话框是否显示背景</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()}
|
||||
@@ -0,0 +1,204 @@
|
||||
<#def title = "询问对话框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "询问对话框是自定义对话框的一种参考confirm方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的确认对话框，支持设置确认内容和点击确定后回调函数，点击取消不向下处理。"/>
|
||||
<#def prevUrl = "alert.htm"/>
|
||||
<#def nextUrl = "prompt.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
<!--
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
//-->
|
||||
</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", "dialog", "confirm")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
询问对话框是自定义对话框的一种参考confirm方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的确认对话框，支持设置确认内容和点击确定后回调函数，点击取消不向下处理。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、弹出确认对话框（文本和回调函数） -->
|
||||
<div class="tutorial title">一、弹出确认对话框（文本和回调函数）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.confirm('您确定删除该字段吗？', function(){alert('我选了确定!');});">点我弹出确认对话框</a>
|
||||
<a href="javascript:void(0);" onclick="Z.confirm('您确定删除该字段吗？您确定删除该字段吗？您确定删除该字段吗？您确定删除该字段吗？', function(){alert('我选了确定!');});">点我弹出多行确认选择框</a>
|
||||
<a href="javascript:void(0);" onclick="Z.confirm('您确定删除该字段吗？您确定删除该字段吗？abcdefghabcdefghabcdefghabcdefgh!', function(){alert('我选了确定!');});">点我弹出多行有字母确认选择框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个确认的对话框<br>
|
||||
2、当选择取消时，不向下处理<br>
|
||||
3、当选择确定时，进入回调函数
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、弹出确认对话框（文本、回调函数和显示背景） -->
|
||||
<div class="tutorial title">二、弹出确认对话框（文本、回调函数和显示背景）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.confirm('您确定删除该字段吗？', function(){alert('我选了确定!');}, {hasBackground:true});">点我弹出确认对话框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个确认的对话框<br>
|
||||
2、当选择取消时，不向下处理<br>
|
||||
3、当选择确定时，进入回调函数<br>
|
||||
4、设置有背景
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 三、弹出确认对话框（文本、回调函数和指定高度） -->
|
||||
<div class="tutorial title">三、弹出确认对话框（文本、回调函数和指定高度）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.confirm('您确定删除该字段吗？您确定删除该字段吗？您确定删除该字段吗？您确定删除该字段吗？', function(){alert('我选了确定，指定高度140!');}, {height: 140});">点我弹出确认对话框，高度140px</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个确认的对话框<br>
|
||||
2、当选择取消时，不向下处理<br>
|
||||
3、当选择确定时，进入回调函数<br>
|
||||
4、指定对话框高度<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 确认对话框参数说明 -->
|
||||
<div class="tutorial title">确认对话框参数说明（基本参数两个，混合参数三个）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%">参数</td>
|
||||
<td width="30%">值</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">基本参数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">text</td>
|
||||
<td>必填</td>
|
||||
<td>确认文本，显示在对话框中的内容</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">callback</td>
|
||||
<td>可选</td>
|
||||
<td>确认点击确定之后回调函数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">混合参数，通过函数第三个参数param组合</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.width</td>
|
||||
<td>{width:330}</td>
|
||||
<td>确认对话框宽度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.height</td>
|
||||
<td>指定或计算得到值</td>
|
||||
<td>确认对话框高度，可指定高度，未指定高度时，通过文本字数计算出大概高度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.hasBackground</td>
|
||||
<td>{hasBackground:false}</td>
|
||||
<td>确认对话框是否显示背景</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()}
|
||||
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>凡狐管理控制台</title>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
${Styles.src("/src/zhiqim.css")}
|
||||
${Scripts.src("/src/zhiqim.js")}
|
||||
${Scripts.src("/src/zhiqim_static.js")}
|
||||
${Scripts.src("/src/zhiqim_static_util.js")}
|
||||
${Scripts.src("/src/zhiqim_query.js")}
|
||||
${Scripts.src("/src/zhiqim_md5.js")}
|
||||
${Scripts.src("/src/zhiqim_dialog.js")}
|
||||
${Scripts.src("/src/zhiqim_ajax.js")}
|
||||
${Scripts.src("/src/zhiqim_calendar.js")}
|
||||
${Scripts.src("/src/zhiqim_clipboard.js")}
|
||||
${Scripts.src("/src/zhiqim_coder.js")}
|
||||
${Scripts.src("/src/zhiqim_form.js")}
|
||||
${Scripts.src("/src/zhiqim_drag.js")}
|
||||
${Scripts.src("/src/zhiqim_dropdown.js")}
|
||||
${Scripts.src("/src/zhiqim_tabnav.js")}
|
||||
${Scripts.src("/src/zhiqim_floater.js")}
|
||||
${Scripts.src("/src/zhiqim_editable.js")}
|
||||
${Scripts.src("/src/zhiqim_upload.js")}
|
||||
${Scripts.src("/src/zhiqim_uploadmult.js")}
|
||||
${Scripts.src("/src/zhiqim_uploadlarge.js")}
|
||||
<script>
|
||||
//Z.onload(function(){
|
||||
alert("您闲置太久或未登录，正在返回初始界面，请确定.....");
|
||||
//parent.Z.Dialog.close(location.hash);
|
||||
//alert(location.hash);
|
||||
parent.Z.Dialog.close(location.hash)
|
||||
//});
|
||||
</script>
|
||||
</head>
|
||||
</html>
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>${context.getContextName()}</title>
|
||||
${Styles.src(zhiqim.css)}
|
||||
${Styles.htmlOverflowYScroll()}
|
||||
<style>body{background:#cad7f7;font-size: 14px;}</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="z-w100p z-h100"></div>
|
||||
|
||||
<table class="z-table z-bd z-blue z-bg-white zi-w80p z-pd10 z-mg-t50 z-relative-center">
|
||||
<tr>
|
||||
<th colspan="2" class="z-px16 z-lh150p z-text-white z-bg-blue-deep">${context.getContextName()}</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right" class="z-bd-l z-blue" width="40%">登录名：</td>
|
||||
<td><input class="z-input z-blue" name="userName" type="text" placeholder="请输入账号" size="15" value="zhiqim" maxlength="32" autocomplete="off"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="right">密 码：</td>
|
||||
<td><input class="z-input z-blue" name="userPass" type="password" size="15" value="zhiqim" maxlength="32" autocomplete="off"></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="z-w100p z-h100"></div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,247 @@
|
||||
<#def title = "加载对话框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "加载对话框是自定义对话框的一种没有标题只有加载中提示的对话框。目标是在屏幕或用户指定的元素可视范围的中间提供没有警告声音且美观的加载对话框，支持设置九个参数来定义加载中界面，无关闭按钮，由业务实现关闭。"/>
|
||||
<#def prevUrl = "prompt.htm"/>
|
||||
<#def nextUrl = "tips.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
<!--
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
//-->
|
||||
</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", "dialog", "loading")}
|
||||
|
||||
<!--主体-->
|
||||
<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>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.loading();">点我弹出全屏加载器</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个正在加载的对话框<br>
|
||||
2、无遮罩层
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、弹出全屏加载器，有遮罩层 -->
|
||||
<div class="tutorial title">二、弹出全屏加载器，有遮罩层</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.loading({shadow: true});">点我弹出全屏加载器</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个正在加载的对话框<br>
|
||||
2、全屏遮罩，不允许操作
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 三、弹出全屏加载器，指定区域加载器 -->
|
||||
<div class="tutorial title">三、弹出全屏加载器，指定区域加载器</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.loading({target: 'loading1', shadow: true});">点我弹出遮住下方DIV的函数</a>
|
||||
<br><br>
|
||||
<div id="loading1" class="z-table z-bordered z-blue" style="width:50%;height:200px;"></div>
|
||||
<br>
|
||||
<a href="javascript:void(0);" onclick="Z.loading({target: 'loading1', shadow: true});">点我弹出遮住上方DIV的函数</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、指定位置遮罩，超出屏幕情况，遮罩目标，不允许操作<br>
|
||||
2、在可视中间显示正在加载的对话框
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 四、弹出全屏加载器，指定区域加载器，超出屏幕情况 -->
|
||||
<div class="tutorial title">四、弹出全屏加载器，指定区域加载器，超出屏幕情况</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.loading({target: 'loading2', shadow: true});">点我弹出遮住下方DIV的函数</a>
|
||||
<br><br>
|
||||
<div id="loading2" class="z-table z-bordered z-blue" style="width:50%;height:800px;"></div>
|
||||
<br>
|
||||
<a href="javascript:void(0);" onclick="Z.loading({target: 'loading2', shadow: true});">点我弹出遮住上方DIV的函数</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、指定位置遮罩，超出屏幕情况，遮罩目标，不允许操作<br>
|
||||
2、在可视中间显示正在加载的对话框
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 加载对话框参数说明 -->
|
||||
<div class="tutorial title">加载对话框参数说明（混合参数九个）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%">参数</td>
|
||||
<td width="30%">值</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">混合参数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.radius</td>
|
||||
<td>{radius:"z-bd-rd5"}</td>
|
||||
<td>圆角，默认5像素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.background</td>
|
||||
<td>{background:"#fff"}</td>
|
||||
<td>背景颜色，默认白色</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.text</td>
|
||||
<td>{text:"正在加载..."}</td>
|
||||
<td>加载中提示文本</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.target</td>
|
||||
<td>{target:document}</td>
|
||||
<td>遮罩目标，默认document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.position</td>
|
||||
<td>未配置默认居中</td>
|
||||
<td>目标位置，参见自定义对话框位置说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.shadow</td>
|
||||
<td>{shadow:false}</td>
|
||||
<td>是否显示遮罩层</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.borderColor</td>
|
||||
<td>{borderColor:"#d8d8d8"}</td>
|
||||
<td>边框颜色，默认"#d8d8d8"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.width</td>
|
||||
<td>{width:150}</td>
|
||||
<td>加载框宽度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.height</td>
|
||||
<td>{height:50}</td>
|
||||
<td>加载框高度</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()}
|
||||
@@ -0,0 +1,216 @@
|
||||
<#def title = "提示对话框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "提示对话框是自定义对话框的一种参考prompt方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的提示对话框，支持设置提示内容和点击确定后回调函数，点击取消不向下处理。"/>
|
||||
<#def prevUrl = "confirm.htm"/>
|
||||
<#def nextUrl = "loading.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
<!--
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
//-->
|
||||
</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", "dialog", "prompt")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
提示对话框是自定义对话框的一种参考prompt方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的提示对话框，支持设置提示内容和点击确定后回调函数，点击取消不向下处理。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、弹出单行提示对话框（文本和回调函数） -->
|
||||
<div class="tutorial title">一、弹出单行提示对话框（文本和回调函数）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.prompt('修改input', 'abc', function(value){alert(value);});">点我弹出单行提示对话框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个提示单行对话框<br>
|
||||
2、当选择取消时，不向下处理<br>
|
||||
3、当选择确定时，进入回调函数
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、弹出多行提示对话框（文本、回调函数和类型参数） -->
|
||||
<div class="tutorial title">二、弹出多行提示对话框（文本、回调函数和类型参数）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.prompt('修改input', 'abc', function(value){alert(value);}, {type: 'textarea'});">点我弹出多行提示对话框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个提示单行对话框<br>
|
||||
2、当选择取消时，不向下处理<br>
|
||||
3、当选择确定时，进入回调函数<br>
|
||||
4、指定类型type=textarea
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<#-- 三、弹出多行提示对话框（回调把内容设置到文本域中） -->
|
||||
<div class="tutorial title">三、弹出多行提示对话框（回调把内容设置到文本域中）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.prompt('修改textarea', Z('#textareaContent').val(), function(value){Z('#textareaContent').val(value);}, {type: 'textarea'});">点我弹出多行提示对话框</a>
|
||||
<br><br>
|
||||
<textarea id="textareaContent" class="z-textarea z-w100p z-h150 zi-px16">我的内容就是我</textarea>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个提示单行对话框<br>
|
||||
2、当选择取消时，不向下处理<br>
|
||||
3、当选择确定时，进入回调函数<br>
|
||||
4、指定类型type=textarea<br>
|
||||
5、点确定把值回填到文本域中
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 提示对话框参数说明 -->
|
||||
<div class="tutorial title">提示对话框参数说明（基本参数三个，混合参数四个）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%">参数</td>
|
||||
<td width="30%">值</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">基本参数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">text</td>
|
||||
<td>必填</td>
|
||||
<td>提示信息，显示在对话框中的提示</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">value</td>
|
||||
<td>必填</td>
|
||||
<td>提示值，显示在对话框中的内容</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">callback</td>
|
||||
<td>可选</td>
|
||||
<td>提示点击确定之后回调函数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">混合参数，通过函数第三个参数param组合</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.width</td>
|
||||
<td>{width:330}</td>
|
||||
<td>提示对话框宽度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.height</td>
|
||||
<td>指定或计算得到值</td>
|
||||
<td>提示对话框高度，可指定高度，未指定高度时，通过文本字数计算出大概高度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.hasBackground</td>
|
||||
<td>{hasBackground:false}</td>
|
||||
<td>提示对话框是否显示背景</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.type</td>
|
||||
<td>{type:"input"}</td>
|
||||
<td>提示对话框内容是使用"input"还是"textarea"，默认"input"</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()}
|
||||
@@ -0,0 +1,248 @@
|
||||
<#def title = "提示对话框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "提示对话框是自定义对话框的一种参考prompt方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的提示对话框，支持设置提示内容和点击确定后回调函数，点击取消不向下处理。"/>
|
||||
<#def prevUrl = "loading.htm"/>
|
||||
<#def nextUrl = "../nav/tabnav.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
<!--
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
//-->
|
||||
</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", "dialog", "tips")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
提示对话框是自定义对话框的一种提示成功之后5秒后自动关闭的对话框。目标是不需要点击确认和关闭，自动隐藏
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<#-- 一、弹出全屏提示框，无遮罩层 -->
|
||||
<div class="tutorial title">一、弹出全屏提示框，无遮罩层</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.tips();">点我弹出全屏提示框</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个正在加载的对话框<br>
|
||||
2、无遮罩层
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、弹出全屏加载器，有遮罩层 -->
|
||||
<div class="tutorial title">二、弹出全屏加载器，有遮罩层</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.loading({shadow: true});">点我弹出全屏加载器</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、在全屏的中间显示一个正在加载的对话框<br>
|
||||
2、全屏遮罩，不允许操作
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 三、弹出全屏加载器，指定区域加载器 -->
|
||||
<div class="tutorial title">三、弹出全屏加载器，指定区域加载器</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.loading({target: 'loading1', shadow: true});">点我弹出遮住下方DIV的函数</a>
|
||||
<br><br>
|
||||
<div id="loading1" class="z-table z-bordered z-blue" style="width:50%;height:200px;"></div>
|
||||
<br>
|
||||
<a href="javascript:void(0);" onclick="Z.loading({target: 'loading1', shadow: true});">点我弹出遮住上方DIV的函数</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、指定位置遮罩，超出屏幕情况，遮罩目标，不允许操作<br>
|
||||
2、在可视中间显示正在加载的对话框
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 四、弹出全屏加载器，指定区域加载器，超出屏幕情况 -->
|
||||
<div class="tutorial title">四、弹出全屏加载器，指定区域加载器，超出屏幕情况</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<a href="javascript:void(0);" onclick="Z.loading({target: 'loading2', shadow: true});">点我弹出遮住下方DIV的函数</a>
|
||||
<br><br>
|
||||
<div id="loading2" class="z-table z-bordered z-blue" style="width:50%;height:800px;"></div>
|
||||
<br>
|
||||
<a href="javascript:void(0);" onclick="Z.loading({target: 'loading2', shadow: true});">点我弹出遮住上方DIV的函数</a>
|
||||
</div>
|
||||
<div class="z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、指定位置遮罩，超出屏幕情况，遮罩目标，不允许操作<br>
|
||||
2、在可视中间显示正在加载的对话框
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 加载对话框参数说明 -->
|
||||
<div class="tutorial title">加载对话框参数说明（混合参数九个）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%">参数</td>
|
||||
<td width="30%">值</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">混合参数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.radius</td>
|
||||
<td>{radius:"z-bd-rd5"}</td>
|
||||
<td>圆角，默认5像素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.background</td>
|
||||
<td>{background:"#fff"}</td>
|
||||
<td>背景颜色，默认白色</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.text</td>
|
||||
<td>{text:"正在加载..."}</td>
|
||||
<td>加载中提示文本</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.target</td>
|
||||
<td>{target:document}</td>
|
||||
<td>遮罩目标，默认document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.position</td>
|
||||
<td>未配置默认居中</td>
|
||||
<td>目标位置，参见自定义对话框位置说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.shadow</td>
|
||||
<td>{shadow:false}</td>
|
||||
<td>是否显示遮罩层</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.borderColor</td>
|
||||
<td>{borderColor:"#d8d8d8"}</td>
|
||||
<td>边框颜色，默认"#d8d8d8"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.width</td>
|
||||
<td>{width:150}</td>
|
||||
<td>加载框宽度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.height</td>
|
||||
<td>{height:50}</td>
|
||||
<td>加载框高度</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()}
|
||||
@@ -0,0 +1,453 @@
|
||||
<#def title = "输入框样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "输入框样式是指对输入框增加样式规则，如指定输入框长度大小、边框颜色、和输入控制等。"/>
|
||||
<#def prevUrl = "../js/query.htm"/>
|
||||
<#def nextUrl = "button.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
//去除多余的cover代码
|
||||
html = Z.S.replaceAll(html, /<span\sclass="z-cover((?!>).)+>/g, '');
|
||||
html = Z.S.replaceAll(html, /<div\sclass="z-absolute((?!>).)+>.+span>/g, '');
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
</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">一、纯文本框，不显示历史记录、显示高度为5条选框高度</div>
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="min-height:200px;"><script>
|
||||
Z.onload(function()
|
||||
{
|
||||
var searchAutoList = new Z.SearchAutoList({
|
||||
id: "auto_input", //输入框 id
|
||||
ajaxClassName: "com.zhiqim.zhiqim.ui.SearchInputAjaxList", //ajax调用的类名
|
||||
ajaxMethodName: "getKeywordsList", //ajax调用的方法名
|
||||
history: 0, //可选项；是否显示历史记录，默认为 “1” 显示
|
||||
listMax: 5, //可选项；结果列表的显示高度，默认为 “10”
|
||||
splitType: ";", //可选项；返回值中的分隔符，默认为 “;”
|
||||
callback: null //可选项；选中后的回调函数，默认为 null，this 为定义的 Z.SearchAutoList 对象
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<input id="auto_input" class="z-input z-large z-w300" type="text">
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、前三个参数为必填项，缺一不可<br>
|
||||
2、Ajax的回调结果为字符串型，字符的分隔符号由类方法决定<br>
|
||||
3、splitType 为可选项，默认值为 “;”，字符的分隔符号不为 “;” 时需要定义<br>
|
||||
</div>
|
||||
</section>
|
||||
<div class="tutorial title">二、带按钮的搜索框，显示历史记录，显示高度为10条选项高度</div>
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="min-height:200px;"><script>
|
||||
Z.onload(function()
|
||||
{
|
||||
var searchAutoList2 = new Z.SearchAutoList({
|
||||
id: "auto_wrap", //盒子 id
|
||||
ajaxClassName: "com.zhiqim.zhiqim.ui.SearchInputAjaxList", //ajax调用的类名
|
||||
ajaxMethodName: "getKeywordsList", //ajax调用的方法名
|
||||
callback: function(){ //可选项；选中后的回调函数，默认为 null，this 为定义的 Z.SearchAutoList 对象
|
||||
alert("输入结果： " + this.value);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<span id="auto_wrap" class="z-show-ib">
|
||||
<input id="auto_input2" class="z-input z-large z-w300" type="text"><button class="z-button z-mg-l-1" style="height:34px" type="submit">搜索</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、前三个参数为必填项，缺一不可<br>
|
||||
2、Ajax的回调结果为字符串型，字符的分隔符号由类方法决定<br>
|
||||
3、splitType 为可选项，默认值为 “;”，字符的分隔符号不为 “;” 时需要定义<br>
|
||||
4、callback 为可选项，表示选中后需要做的操作，默认值为 “null”，this 为定义的 Z.SearchAutoList 本身<br>
|
||||
5、callback 函数中可用到的值：this.value 为输入框内容，this.responseText 为返回的搜索结果字符串
|
||||
</div>
|
||||
</section>
|
||||
</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()}
|
||||
|
||||
<script>
|
||||
+(function(F)
|
||||
{
|
||||
Z.SearchAutoList = Z.Class.newInstance();
|
||||
Z.SearchAutoList.prototype =
|
||||
{
|
||||
defaults:
|
||||
{
|
||||
id: null, //输入框/输入框盒子ID
|
||||
ajaxClassName: null, //Ajax调用的类名
|
||||
ajaxMethodName: null, //Ajax调用的类方法
|
||||
history: 1, //历史记录显示
|
||||
listMax: 10, //结果列表显示高度
|
||||
splitType: ";", //类方法返回的字符串结果中的分隔符
|
||||
callback: null //选中后的回调函数
|
||||
},
|
||||
|
||||
init: function()
|
||||
{//构造函数
|
||||
if (!this.id || !Z.D.has(this.id)){
|
||||
Z.alert("指定[id]出错");
|
||||
}
|
||||
this.responseText = "";
|
||||
this.$wrap = Z("#"+this.id);
|
||||
this.$input = this.$wrap;
|
||||
if (this.$wrap[0].tagName.toUpperCase() != "INPUT")
|
||||
this.$input = this.$wrap.find("input[type=text]");
|
||||
|
||||
var width = this.$wrap.offsetWidth();
|
||||
var height = this.$wrap.offsetHeight();
|
||||
var fontSize = this.$input.css("fontSize");
|
||||
this.pdLeft = this.$input.css("padding-left");
|
||||
this.pdRight = this.$input.css("padding-right");
|
||||
this.lHeight = this.$input.css("line-height");
|
||||
this.mHeight = this.listMax * parseInt(this.lHeight) + "px";
|
||||
|
||||
this.$cover = Z.$cover(this.$wrap).css({display:"inline-block",position:"relative",width:width,height:height,fontSize:fontSize});
|
||||
this.$list = Z('<div class="z-absolute z-w100p z-mg-t-1 z-bg-white z-text-left z-bd z-hide" style="left:0;top:100%;font-size:inherit;z-index:99;"></div>')
|
||||
.appendTo(this.$cover);
|
||||
|
||||
//事件绑定
|
||||
this.$input.on("focus",this.focus,this);
|
||||
this.$input.on("input",this.input,this);
|
||||
this.$input.keydown(this.doKeyDown,this);
|
||||
Z(document).click(this.docClick,this);
|
||||
},
|
||||
|
||||
execute: function()
|
||||
{//执行为空即可，统一在初始化中处理
|
||||
},
|
||||
|
||||
//获取焦点事件
|
||||
focus: function(e)
|
||||
{
|
||||
this.value = this.$input.val();
|
||||
if (this.value == "")
|
||||
return this.doHistoryList();
|
||||
if (this.$list.find('li').length == 0)
|
||||
return;
|
||||
this.$list.show();
|
||||
if (this.beforeValue != this.value)
|
||||
{//无修改时，获取焦点，不调用Ajax
|
||||
this.doAjax();
|
||||
this.beforeValue = this.value;
|
||||
}
|
||||
},
|
||||
|
||||
//input事件
|
||||
input: function(e)
|
||||
{
|
||||
this.value = this.$input.val();
|
||||
if (Z.V.isEmptyBlank(this.value))
|
||||
return this.doHistoryList();
|
||||
this.$list.show();
|
||||
this.doAjax();
|
||||
},
|
||||
|
||||
doAjax: function(e)
|
||||
{
|
||||
this.ajax = new Z.Ajax();
|
||||
this.ajax.OBJ = this;
|
||||
this.ajax.setClassName(this.ajaxClassName);
|
||||
this.ajax.setMethodName(this.ajaxMethodName);
|
||||
this.ajax.addParam(this.value);
|
||||
this.ajax.setCallback(function(){
|
||||
this.OBJ.doFilter.call(this.OBJ,this.responseText);
|
||||
});
|
||||
this.ajax.execute();
|
||||
},
|
||||
|
||||
//筛选对象，生成列表
|
||||
doFilter: function(e)
|
||||
{
|
||||
var responseText = e;
|
||||
this.$list.html("");
|
||||
var keyWordsArr = responseText.split(this.splitType);
|
||||
var htmlStr = '<ul class="z-overflow-auto" style="max-height:' + this.mHeight + '">';
|
||||
for (var i = 0;i < keyWordsArr.length;i++)
|
||||
{
|
||||
if (keyWordsArr[i].indexOf(this.value) > -1)
|
||||
htmlStr += '<li style="padding: 0 ' + this.pdRight + ' 0 ' + this.pdLeft +'; line-height:'+ this.lHeight +'; cursor: default;">'
|
||||
+ keyWordsArr[i] + "</li>";
|
||||
}
|
||||
htmlStr += "</ul>";
|
||||
Z(htmlStr).appendTo(this.$list);
|
||||
if (Z(htmlStr).html() == "")
|
||||
return this.$list.hide();
|
||||
|
||||
//绑定事件
|
||||
this.liSet = this.$list.find("li");
|
||||
this.liSet.click(this.doSelect,this);
|
||||
this.liSet.mouseenter(this.liMouseEnter,this);
|
||||
this.liSet.mouseleave(this.liMouseLeave,this);
|
||||
},
|
||||
|
||||
//鼠标选中
|
||||
doSelect: function(e)
|
||||
{
|
||||
Z.E.forbidden(e);
|
||||
var liVal = Z(Z.E.target(e)).html();
|
||||
this.beforeValue = this.value;
|
||||
this.value = liVal;
|
||||
this.$input.val(liVal);
|
||||
this.$list.hide();
|
||||
this.doAjax();
|
||||
//历史记录存储
|
||||
this.saveHistory(e);
|
||||
//选中后的回调
|
||||
this.doCallback(e);
|
||||
},
|
||||
|
||||
//空白处点击，隐藏列表
|
||||
docClick: function(e)
|
||||
{
|
||||
var target = Z.E.target(e);
|
||||
if (target == this.$input[0])
|
||||
return;
|
||||
this.$list.hide();
|
||||
if (Z.V.isEmptyBlank(this.value))
|
||||
return;
|
||||
if (this.beforeValue != this.value)
|
||||
{//解决多次调用Ajax的问题
|
||||
this.doAjax();
|
||||
this.beforeValue = this.value;
|
||||
//历史记录存储
|
||||
this.saveHistory(e);
|
||||
}
|
||||
},
|
||||
|
||||
//键盘 “上” “下” “回车”按键监听
|
||||
doKeyDown: function(e)
|
||||
{
|
||||
var keyVal = Z.E.key(e);
|
||||
if (keyVal == 38 || keyVal == 40 || keyVal == 13)
|
||||
{//上：38，下：40，回车：13
|
||||
Z.E.forbidden(e);
|
||||
if (this.liSet)
|
||||
{//有选择列表的搜索框
|
||||
var liSetLength = this.liSet.length;
|
||||
var liActive = this.$list.find(".z-bg-gray");
|
||||
var liActiveIndex = -1;
|
||||
var toIndex = null;
|
||||
if (liActive.length != 0)
|
||||
liActiveIndex = Z.EL.parentIndex(liActive[0]);
|
||||
switch (keyVal)
|
||||
{
|
||||
case 38://上
|
||||
toIndex = liActiveIndex - 1;
|
||||
if (toIndex <= -1)
|
||||
toIndex = liSetLength - 1;
|
||||
break;
|
||||
case 40://下
|
||||
toIndex = liActiveIndex + 1;
|
||||
if (toIndex == liSetLength)
|
||||
toIndex = 0;
|
||||
break;
|
||||
case 13://回车选中
|
||||
this.$input[0].blur();
|
||||
this.$list.hide();
|
||||
this.value = this.$input.val();
|
||||
this.doAjax();
|
||||
//历史记录存储
|
||||
this.saveHistory(e);
|
||||
//选中后的回调
|
||||
this.doCallback(e);
|
||||
return;
|
||||
}
|
||||
toIndex++;
|
||||
this.liSet.removeClass("z-bg-gray");
|
||||
var toLi = this.$list.find("li:nth-child(" + toIndex +")").addClass("z-bg-gray");
|
||||
this.value = toLi.html();
|
||||
this.$input.val(toLi.html());
|
||||
}
|
||||
else if (keyVal == 13)
|
||||
{//直接在输入框回车搜索
|
||||
this.value = this.$input.val();
|
||||
this.doAjax();
|
||||
//历史记录存储
|
||||
this.saveHistory(e);
|
||||
//选中后的回调
|
||||
this.doCallback(e);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//选中后的回掉函数
|
||||
doCallback: function(e)
|
||||
{
|
||||
if(!this.callback)
|
||||
return;
|
||||
this.callback(e);
|
||||
},
|
||||
|
||||
//历史记录列表展示
|
||||
doHistoryList: function(e)
|
||||
{
|
||||
if (!this.history) return;
|
||||
this.$list.html("").hide();
|
||||
if (localStorage.getItem(this.id))
|
||||
{
|
||||
var htmlStr = '<ul class="z-text-gray">';
|
||||
var hisArr = localStorage.getItem(this.id).split(";");
|
||||
for (var i = 0;i < hisArr.length;i++)
|
||||
{
|
||||
htmlStr += '<li style="padding:0 ' + this.pdRight + ' 0 ' + this.pdLeft +';line-height:'+ this.lHeight +';cursor:default;">'
|
||||
+ hisArr[i] + "</li>";
|
||||
}
|
||||
htmlStr += "</ul>";
|
||||
Z(htmlStr).appendTo(this.$list.show());
|
||||
var hisBar = '<div class="z-bg-blue z-clearfix" style="padding:0 ' + this.pdRight + ' 0 ' + this.pdLeft +';line-height:'+ this.lHeight +';cursor:default;">'
|
||||
+ '<span class="z-float-right z-pointer z-deleteBtn">清空历史</span>'
|
||||
+ '</div>';
|
||||
Z(hisBar).appendTo(this.$list.show());
|
||||
//绑定事件
|
||||
this.liSet = this.$list.find("li");
|
||||
this.liSet.click(this.doSelect,this);
|
||||
this.liSet.mouseenter(this.liMouseEnter,this);
|
||||
this.liSet.mouseleave(this.liMouseLeave,this);
|
||||
//绑定删除事件
|
||||
var $delBtn = this.$list.find(".z-deleteBtn");
|
||||
$delBtn.click(this.emptyHistory,this);
|
||||
}
|
||||
},
|
||||
|
||||
emptyHistory: function(e)
|
||||
{
|
||||
localStorage.removeItem(this.id);
|
||||
},
|
||||
|
||||
//输入完成，存储历史记录
|
||||
saveHistory: function(e)
|
||||
{
|
||||
if (!this.history) return;
|
||||
if (!localStorage.getItem(this.id))
|
||||
localStorage.setItem(this.id,"");
|
||||
var hisStr = localStorage.getItem(this.id);
|
||||
if (hisStr == "")
|
||||
return localStorage.setItem(this.id,this.value);
|
||||
//去重
|
||||
var hisArr = hisStr.split(";");
|
||||
hisArr.unshift(this.value);
|
||||
var hisObj = {};
|
||||
var resultArr = [];
|
||||
for(var i = 0; i < hisArr.length; i++)
|
||||
{
|
||||
if(!hisObj[hisArr[i]])
|
||||
{
|
||||
resultArr.push(hisArr[i]);
|
||||
hisObj[hisArr[i]] = 1;
|
||||
}
|
||||
}
|
||||
//限制个数
|
||||
if (resultArr.length > 10)
|
||||
resultArr.length = 10;
|
||||
hisStr = resultArr.join(";");
|
||||
localStorage.setItem(this.id,hisStr);
|
||||
},
|
||||
|
||||
//鼠标悬浮，背景颜色变化
|
||||
liMouseEnter: function(e)
|
||||
{
|
||||
var $thisLi = Z(Z.E.target(e));
|
||||
$thisLi.addClass("z-bg-gray");
|
||||
},
|
||||
|
||||
liMouseLeave: function(e)
|
||||
{
|
||||
var $thisLi = Z(Z.E.target(e));
|
||||
$thisLi.removeClass("z-bg-gray");
|
||||
},
|
||||
}
|
||||
}
|
||||
)(zhiqim)
|
||||
</script>
|
||||
@@ -0,0 +1,742 @@
|
||||
<#def title = "按钮样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "按钮样式是指对按钮增加样式规则，按钮分为三种，一是标准按钮、二为筛选按钮、三是多选按钮。样式规则包括按钮大小、颜色、边框颜色、选中特效等。"/>
|
||||
<#def prevUrl = "input.htm"/>
|
||||
<#def nextUrl = "calendar.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());
|
||||
});
|
||||
|
||||
Z("button.z-bordered").click(function()
|
||||
{
|
||||
Z(this).toggleClass("z-active");
|
||||
});
|
||||
|
||||
Z("button.z-bordered-box").click(function()
|
||||
{
|
||||
Z(this).toggleClass("z-active");
|
||||
});
|
||||
});
|
||||
//-->
|
||||
</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", "button")}
|
||||
|
||||
<!--主体-->
|
||||
<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="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>
|
||||
</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()}
|
||||
@@ -0,0 +1,157 @@
|
||||
<#def title = "日历控件"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "日历控件是在输入框触发时展开一个年月日时分秒的日期界面，按日历格式显示出来，通过点击和选择得到要求的日期或时间。当前日历控件支持选择日期、选择日期+时间、选择日期+时分三种。"/>
|
||||
<#def prevUrl = "button.htm"/>
|
||||
<#def nextUrl = "checkInput.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", "calendar")}
|
||||
|
||||
<!--主体-->
|
||||
<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 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 class="z-input" onfocus="Z.date(this);"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.date(this);" value="2015-04-11"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值和onchange方法</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.date(this);" value="2015-04-11" onchange="alert('修改值为'+this.value)"></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 class="z-input" onfocus="Z.datetime(this);"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetime(this);" value="2015-04-11 00:00:01"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值和onchange方法<br><input id="datetime_value" class="z-input z-w150"></td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetime(this);" value="2015-04-11 00:00:01" onchange="Z('#datetime_value').val(this.value);"></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="30%">类型</td>
|
||||
<td width="20%">未指定</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>最简单的方式</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetimeNoSecond(this);"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值</td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetimeNoSecond(this);" value="2015-04-11 00:00:00"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>有默认值和onchange方法<br><input id="datehourminute_value" class="z-input z-w150"></td>
|
||||
<td class="example"><input class="z-input" onfocus="Z.datetimeNoSecond(this);" value="2015-04-11 00:00:00" onchange="Z('#datehourminute_value').val(this.value);"></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()}
|
||||
@@ -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()}
|
||||
@@ -0,0 +1,203 @@
|
||||
<#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 class="z-input" placeholder="默认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>
|
||||
|
||||
<#-- 三、输入框输入控制 -->
|
||||
<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()}
|
||||
@@ -0,0 +1,271 @@
|
||||
<#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()}
|
||||
@@ -0,0 +1,265 @@
|
||||
<#def title = "ZhiqimUI"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "“ZhiqimUI”是一套集成Javascript库、Css库、Font库、常用ico图标和Flash控件等，并在其上开发的大量UI组件组成的前端开发套件。"/>
|
||||
<#def prevUrl = "../index.htm"/>
|
||||
<#def nextUrl = "./css/css.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
${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", "index", "")}
|
||||
|
||||
<!--主体-->
|
||||
<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">什么是“ZmUI”</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
“ZmUI”是“ZhiqimUI.mobile”的简写，是在“ZhiqimUI”的基础上进行修改、优化得到的一套更适用于mobile端的前端开发套件。<br>
|
||||
1、使用方法同“ZhiqimUI”。<br>
|
||||
2、ZhiqimUI中通用的css样式仍使用z-、zi-前缀；mobile端新增的css样式，则统一使用z-前缀约束。<br>
|
||||
3、mobile端专用的插件库后续也会持续增加。<br>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- ZmUI目录结构 -->
|
||||
<div class="tutorial title">ZmUI目录结构</div>
|
||||
<div class="z-relative-left z-text-black z-w400 z-show-ib z-samp" style="height:220px;font-size:16px;line-height:100%;">
|
||||
<i class="z-ico z-tree z-root z-normal z-mg-r6"></i>zhiqim_res.jar
|
||||
<ul>
|
||||
<li><i class="z-ico z-tree z-node z-normal"></i><i class="z-ico z-tree z-open z-normal z-mg-r6"></i>font</li>
|
||||
<li><i class="z-ico z-tree z-vertline z-normal"></i><i class="z-ico z-tree z-lastnode z-normal"></i><i class="z-ico z-tree z-attribute z-normal z-mg-r6"></i>zhiqim.woff</li>
|
||||
<li><i class="z-ico z-tree z-node z-normal"></i><i class="z-ico z-tree z-open z-normal z-mg-r6"></i>image</li>
|
||||
<li><i class="z-ico z-tree z-vertline z-normal"></i><i class="z-ico z-tree z-node z-normal"></i><i class="z-ico z-tree z-attribute z-normal z-mg-r6"></i>ico_12.png</li>
|
||||
<li><i class="z-ico z-tree z-vertline z-normal"></i><i class="z-ico z-tree z-node z-normal"></i><i class="z-ico z-tree z-attribute z-normal z-mg-r6"></i>......</li>
|
||||
<li><i class="z-ico z-tree z-vertline z-normal"></i><i class="z-ico z-tree z-lastnode z-normal"></i><i class="z-ico z-tree z-attribute z-normal z-mg-r6"></i>ico_tree.png</li>
|
||||
<li><i class="z-ico z-tree z-node z-normal"></i><i class="z-ico z-tree z-item z-normal z-mg-r6"></i>zhiqim.mobile_2017010101.css</li>
|
||||
<li><i class="z-ico z-tree z-lastnode z-normal"></i><i class="z-ico z-tree z-item z-normal z-mg-r6"></i>zhiqim.mobile_2017010101.min.js</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tutorial z-relative-left z-text-black z-pd-t3" style="font-size:16px;line-height:250%;">
|
||||
<ul>
|
||||
<li>
|
||||
ZhiqimUI统一打包成[<span class="z-text-cyan">zhiqim_res.jar</span>]。包括font、image和核心的css、js文件。<br>
|
||||
类路径为：com.zhiqim.zhiqim.httpd.context.service.resource
|
||||
</li>
|
||||
<li>目录[<span class="z-text-cyan">font</span>]存放的是z-font对应的字体文件，如<i class="z-font z-config"></i>、<i class="z-font z-save"></i>等。</li>
|
||||
<li>目录[<span class="z-text-cyan">image</span>]存放的CSS和插件常用到的一些图标素材，如文件图标、箭头图标等。</li>
|
||||
<li>文件[<span class="z-text-cyan">zhiqim.mobile_2017010101.css</span>]是CSS核心库，为方便查找支持的样式，目前只作了空格处理，没有作最大压缩，其中2017010101是版本号，升级会变动。</li>
|
||||
<li>文件[<span class="z-text-cyan">zhiqim.mobile_2017010101.min.js</span>]是JS核心库，原文件比较大，压缩后大约100K左右，如需查看API或源文件，在文档中查看，其中2017010101是版本号，升级会变动。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<#-- 看一段简单的FTML代码风格 -->
|
||||
<div class="tutorial title">如何使用ZmUI？</div>
|
||||
|
||||
<div class="z-text-prewrap z-pre zi-px16">
|
||||
<span class="zi-text-green"><!-- 引入zhiqimUI的css文件 --></span>
|
||||
<link rel="stylesheet" href="/service/res/zhiqim.mobile_2017010101.css">
|
||||
|
||||
<span class="zi-text-green"><!-- 引入zhiqimUI的js文件 --></span>
|
||||
<script src="/service/res/zhiqim.mobile_2017010101.min.js"></script>
|
||||
|
||||
<span class="zi-text-green"><!-- 使用zhiqimUI的整体布局架构 --></span>
|
||||
|
||||
<span class="zi-text-green"><!-- 顶部导航 --></span>
|
||||
<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>
|
||||
|
||||
<span class="zi-text-green"><!-- 底部导航 --></span>
|
||||
<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>
|
||||
|
||||
<span class="zi-text-green"><!-- 内容盒子 --></span>
|
||||
<div class="z-container">
|
||||
<div class="z-flexBox-list z-h100p"><div id="testText" class="z-rem30 z-text-center">这里是内容</div></div>
|
||||
</div>
|
||||
|
||||
<span class="zi-text-green"><!-- 使用zhiqimUI的JS代码修改值 --></span>
|
||||
<script>
|
||||
<span class="zi-text-green"> // 这里用来写就是代码</span>
|
||||
Z("#testText").html("这里是内容");
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<#-- ZhiqimUI CSS核心库 -->
|
||||
<div class="tutorial title">ZhiqimUI CSS核心库</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="30%">功能</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="css/css.htm">全局定义</a></td>
|
||||
<td>全局定义是指在全局定义里的标签缺省下的样式规则</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="css/color.htm">颜色定义</a></td>
|
||||
<td>颜色定义是指在ZhiqimUI的核心CSS文件中，默认提供的全局、白色、黑色和红、橙、黄、绿、青、蓝、紫共十种颜色的定义，包括字体颜色、背景颜色和边框颜色等，以及对应的样式名称。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="css/font.htm">字体图标</a></td>
|
||||
<td>“字体图标”是矢量图片按字体规范设计的一种新的图标，凡狐字体图标放在/service/res/font/zhiqim.woff文件中，当前开发和收集的图标分
|
||||
操作类、文档类、设备类、图表类、实体类五种，共五十九个图标。
|
||||
字体图标不支持斜体，以便使用<i>标签来定义，如<i class="z-font z-config"></i>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="css/text.htm">文本样式</a></td>
|
||||
<td>文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="css/block.htm">块样式</a></td>
|
||||
<td>块样式是指对一个块区域增加样式规则，如指定块隐藏显示、块定位、块宽、块宽百分比、块高、块高百分比、内边距、外边距等属性。</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- ZhiqimUI JS核心库 -->
|
||||
<div class="tutorial title">ZhiqimUI JS核心库</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="30%">功能</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="js/js.htm">全局定义</a></td>
|
||||
<td>凡狐JS统一命名空间为“F”，同时“F”也是window下全局函数，如果“F”有定义冲突请使用全称“zhiqim”。在全局“F”命名空间下定义的全局属性、全局函数、全局正则表达式和全局类。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="js/static.htm">静态对象</a></td>
|
||||
<td>静态对象是把一系列常用的对象定义成静态属性和函数。目前包括有浏览器对象（Z.B）、文档对象（Z.D）、
|
||||
事件对象（Z.E）、元素对象（Z.EL）、HTML对象（Z.H）、地址对象（Z.L）、COOKIE对象（Z.CK）。
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="js/util.htm">工具对象</a></td>
|
||||
<td>工具对象也是静态对象的一种，把一系列常用的静态属性和函数归类到一个工具对象中。目前包括断言工具（Z.A/Z.Asserts）、对象工具（Z.O/Z.Objects）、类型工具（Z.T/Z.Types）、
|
||||
验证工具（Z.V/Z.Validates）、表单工具（Z.F/Z.FM）、JSON工具（Z.J/Z.Jsons）、日期工具（Z.DT/Z.DateTimes）、数组工具（Z.AR/Z.Arrays）、字符串工具（Z.S/Z.Strings）、算术工具（Z.Maths）、
|
||||
金额工具（Z.AM/Z.Amounts）和颜色工具（Z.Colors）。
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="js/query.htm">查询对象Z.Query</a></td>
|
||||
<td>Z.Query是设计成类似jQuery的DOM操作类。Z.Query采用HTML5原生的document.querySelectorAll实现了大部分jQuery的API，如selector，DOM操作，事件方法，动画等。
|
||||
并增加了自身的一些特性和命名，如offsetLeftBody()、focusEnd()等。
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- ZhiqimUI 插件库 -->
|
||||
<div class="tutorial title">ZhiqimUI 插件库</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="30%">功能</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr class="z-bg-cyan">
|
||||
<td colspan="2">表单插件库</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="form/input.htm">输入框</a></td>
|
||||
<td>输入框样式是指对输入框增加样式规则，如指定输入框长度大小、边框颜色、和输入控制等。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="form/button.htm">按钮</a></td>
|
||||
<td>按钮样式是指对按钮增加样式规则，按钮分为三种，一是标准按钮、二为筛选按钮、三是多选按钮。样式规则包括按钮大小、颜色、边框颜色、选中特效等。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="form/calendar.htm">日历</a></td>
|
||||
<td>日历控件是在输入框触发时展开一个年月日时分秒的日期界面，按日历格式显示出来，通过点击和选择得到要求的日期或时间。当前日历控件支持选择日期、选择日期+时间、选择日期+时分三种。</td>
|
||||
</tr>
|
||||
<tr class="z-bg-cyan">
|
||||
<td colspan="2">对话框插件库</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="dialog/alert.htm">告警对话框</a></td>
|
||||
<td>警告对话框是自定义对话框的一种参考alert方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的警告对话框，支持设置警告内容和点击确定后回调函数。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="dialog/confirm.htm">询问对话框</a></td>
|
||||
<td>询问对话框是自定义对话框的一种参考confirm方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的确认对话框，支持设置确认内容和点击确定后回调函数，点击取消不向下处理。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="dialog/prompt.htm">提示对话框</a></td>
|
||||
<td>提示对话框是自定义对话框的一种参考prompt方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的提示对话框，支持设置提示内容和点击确定后回调函数，点击取消不向下处理。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="dialog/loading.htm">加载对话框</a></td>
|
||||
<td>加载对话框是自定义对话框的一种没有标题只有加载中提示的对话框。目标是在屏幕或用户指定的元素可视范围的中间提供没有警告声音且美观的加载对话框，支持设置九个参数来定义加载中界面，无关闭按钮，由业务实现关闭。</td>
|
||||
</tr>
|
||||
<tr class="z-bg-cyan">
|
||||
<td colspan="2">导航插件库</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="nav/tabnav.htm">标签页</a></td>
|
||||
<td>标签页是参考tabnav设计出更简单易用的内容重叠布局的导航页。标签页使用nav和section作为是标签和内容显示。在nav中使用li表示每个标签，在section中使用div作为每个标签显示的内容。</td>
|
||||
</tr>
|
||||
<tr class="z-bg-cyan">
|
||||
<td colspan="2">工具插件库</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="tool/ajax.htm">Ajax调用</a></td>
|
||||
<td>AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
|
||||
凡狐AJAX采用面向RMI的概念设计，通过指定类和方法，传入参数对应方法的参数，通过RMI访问JAVA类的方法获取执行结果。
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="tool/upload.htm">文件上传</a></td>
|
||||
<td>凡狐文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传，大文件上传断点续传（HTML5和Flash两种）等。</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()}
|
||||
@@ -0,0 +1,706 @@
|
||||
<#def title = "全局定义"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "凡狐JS统一命名空间为“F”，同时“F”也是window下全局函数，如果“F”有定义冲突请使用全称“zhiqim”。在全局“F”命名空间下定义的全局属性、全局函数、全局正则表达式和全局类。"/>
|
||||
<#def prevUrl = "../css/block.htm"/>
|
||||
<#def nextUrl = "static.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
${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", "js", "js")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局JS定义", "全局定义")}
|
||||
|
||||
<!-- 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;">
|
||||
凡狐JS统一命名空间为“F”，同时“F”也是window下全局函数，如果“F”有定义冲突请使用全称“zhiqim”。在全局“F”命名空间下定义的全局属性、全局函数、全局正则表达式和全局类。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 全局属性定义 -->
|
||||
<div class="tutorial title">全局属性定义</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="30%">属性</td>
|
||||
<td width="25%">值</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.v</td>
|
||||
<td class="z-samp">1.2.2</td>
|
||||
<td>ZhiqimJS的基线版本号</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.u</td>
|
||||
<td class="z-samp">undefinded</td>
|
||||
<td>undefinded的简写，如if (abc == Z.u)来判断是不是未定义</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.d</td>
|
||||
<td class="z-samp">document</td>
|
||||
<td>document的简写</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.n</td>
|
||||
<td class="z-samp">navigator</td>
|
||||
<td>navigator的简写</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.l</td>
|
||||
<td class="z-samp">location</td>
|
||||
<td>location的简写</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.ua</td>
|
||||
<td class="z-samp">userAgent.toLowerCase()</td>
|
||||
<td>userAgent的小写简写</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 全局函数定义 -->
|
||||
<div class="tutorial title">全局函数定义</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="30%">函数</td>
|
||||
<td width="25%">说明</td>
|
||||
<td width="15%">参数</td>
|
||||
<td width="*">参数说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.eval(expression)</td>
|
||||
<td>执行表达式语句</td>
|
||||
<td class="z-samp">expression</td>
|
||||
<td>表达式字符串，如：var abc = "abc";</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.alert(text, callback)</td>
|
||||
<td rowspan="2">弹出警告对话框</td>
|
||||
<td class="z-samp">text</td>
|
||||
<td>警告文本，链接暂不支持</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">callback</td>
|
||||
<td>回调函数，点击确定后回调</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="3" class="z-samp">Z.confirm(text, callback, param)</td>
|
||||
<td rowspan="3">弹出询问对话框</td>
|
||||
<td class="z-samp">text</td>
|
||||
<td>询问文本，链接暂不支持</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">callback</td>
|
||||
<td>回调函数，点击确定后回调，点击取消不处理</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">param</td>
|
||||
<td>设置参数，支持参数有{height: 50}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="4" class="z-samp">Z.prompt(text, value, callback, param)</td>
|
||||
<td rowspan="4">弹出修改对话框</td>
|
||||
<td class="z-samp">text</td>
|
||||
<td> 修改说明，链接暂不支持</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">value</td>
|
||||
<td>修改的值</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">callback</td>
|
||||
<td>回调函数，点击确定后回调</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">param</td>
|
||||
<td>设置参数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.bind(f, $this)</td>
|
||||
<td rowspan="2">返回一个新的函数，使得原函数this指向$this对象下执行</td>
|
||||
<td class="z-samp">f</td>
|
||||
<td>原函数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">$this</td>
|
||||
<td>指向$this对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.each(object, callback)</td>
|
||||
<td rowspan="2">减化循环处理,默认this绑定到item上</td>
|
||||
<td class="z-samp">object</td>
|
||||
<td>对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">callback</td>
|
||||
<td>回调函数</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td rowspan="3" class="z-samp">Z.eachof($this, object, callback)</td>
|
||||
<td rowspan="3">减化循环处理，支持对字符串,数字,类数组和纯对象处理，=true表示中途退出循环，默认this绑定到传入的$this上，如果未传则绑定到item上<br>另外支持除$this,object,callback之外的参数也会出现在回调函数中</td>
|
||||
<td class="z-samp">$this</td>
|
||||
<td>回调函数指针</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">object</td>
|
||||
<td>循环处理对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">callback</td>
|
||||
<td>回调函数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.clone(obj)</td>
|
||||
<td>克隆一个新值</td>
|
||||
<td class="z-samp">obj</td>
|
||||
<td>对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.onload(f)</td>
|
||||
<td>初始化后加载</td>
|
||||
<td class="z-samp">f</td>
|
||||
<td>对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.random(length, type)</td>
|
||||
<td rowspan="2">随机生成一定长度的字符或数字</td>
|
||||
<td class="z-samp">length </td>
|
||||
<td>长度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">type</td>
|
||||
<td>类型表名生成的随机字符串是字母数字(0或undefinde),数字(1),字母(2),大写字母(3),小写字母(4),大写字母和数字(5),小写字母和数字(6)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="5" class="z-samp">Z.timer(speed, times, $this, process, complete)</td>
|
||||
<td rowspan="5">定时任务</td>
|
||||
<td class="z-samp">speed</td>
|
||||
<td>速度，单位毫秒，如50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">times</td>
|
||||
<td>执行次数，-1表示一直运行</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">$this</td>
|
||||
<td>回调函数时的this</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">process</td>
|
||||
<td>运行时回调函数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">complete</td>
|
||||
<td>完成时回调函数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="4" class="z-samp">Z.drag(elem, param, callback, $this)</td>
|
||||
<td rowspan="4">拖拽或滑动</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>属性</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">param</td>
|
||||
<td>拖放参数，如果为字符串或node表示拖放对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">callback</td>
|
||||
<td>回调函数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">$this</td>
|
||||
<td>回调函数时的this</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="5" class="z-samp">Z.dragInParent(elem, drag, parent, callback, $this)</td>
|
||||
<td rowspan="5">拖拽或滑动</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>属性</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">drag</td>
|
||||
<td>拖放对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">parent</td>
|
||||
<td>拖放对象的父对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">callback</td>
|
||||
<td>回调函数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">$this</td>
|
||||
<td>回调函数时的this</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 全局正则表达式定义 -->
|
||||
<div class="tutorial title">全局正则表达式定义（统一定义在Z.R中）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr>
|
||||
<td width="30%">正则表达式</td>
|
||||
<td width="25%">说明</td>
|
||||
<td width="*">值</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">空格</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.SPACE</td>
|
||||
<td>空格</td>
|
||||
<td class="z-samp">/\s+/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.SPACE_LEFT</td>
|
||||
<td>左空格</td>
|
||||
<td class="z-samp">/^\s+/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.SPACE_RIGHT</td>
|
||||
<td>右空格</td>
|
||||
<td class="z-samp">/\s+$/</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">数值型</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.NUMERIC</td>
|
||||
<td>数值型</td>
|
||||
<td class="z-samp">/^\d+$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.INTEGER</td>
|
||||
<td>整数，支持正负数</td>
|
||||
<td class="z-samp">/^(0|[\+\-]?[1-9]\d*)$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.INTEGER_P</td>
|
||||
<td>正整数</td>
|
||||
<td class="z-samp">/^[1-9]\d*$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.INTEGER_N_N</td>
|
||||
<td>非负整数</td>
|
||||
<td class="z-samp">/^(0|[1-9]\d*)$/</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">小数型</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.FLOAT</td>
|
||||
<td>浮点值，支持多位小数点</td>
|
||||
<td class="z-samp">/^(0|[\+\-]?[1-9]\d*)(\.\d+)?$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.FLOAT_N_N</td>
|
||||
<td>非负浮点值，支持多位小数</td>
|
||||
<td class="z-samp">/^(0|[1-9]\d*)(\.\d+)?$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.AMOUNT_2R</td>
|
||||
<td>标准元金额，支持0-2位小数</td>
|
||||
<td class="z-samp">/^(0|[\+\-]?[1-9]\d*)(\.\d{1,2})?$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.AMOUNT_2R_FIXED</td>
|
||||
<td>固定元金额，两位小数</td>
|
||||
<td class="z-samp">/^(0|[\+\-]?[1-9]\d*)(\.\d{2})$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.AMOUNT_N_N_2R</td>
|
||||
<td>非负标准元金额，支持0-2位小数</td>
|
||||
<td class="z-samp">/^(0|[1-9]\d*)(\.\d{1,2})?$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.AMOUNT_N_N_2R_FIXED</td>
|
||||
<td>非负固定元金额，两位小数</td>
|
||||
<td class="z-samp">/^(0|[1-9]\d*)(\.\d{2})$/</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">字符相关</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.ALPHABAT</td>
|
||||
<td>字母</td>
|
||||
<td class="z-samp">/^[A-Za-z]+$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.ALPHABAT_UPPER</td>
|
||||
<td>大写字母</td>
|
||||
<td class="z-samp">/^[A-Z]+$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.ALPHABAT_LOWER</td>
|
||||
<td>小写字母</td>
|
||||
<td class="z-samp">/^[a-z]+$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.ALPHA_LOWER_NUMERIC</td>
|
||||
<td>小写字母或数字</td>
|
||||
<td class="z-samp">/^[a-z0-9]+$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.ALPHA_UPPER_NUMERIC</td>
|
||||
<td>大写字母或数字</td>
|
||||
<td class="z-samp">/^[A-Z0-9]+$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.ALPHA_NUMERIC</td>
|
||||
<td>字母或数字</td>
|
||||
<td class="z-samp">/^[A-Za-z0-9]+$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.ALPHA_NUMERIC_PA</td>
|
||||
<td>大写小字母和数字，字母开头</td>
|
||||
<td class="z-samp">/^[A-Za-z][A-Za-z0-9]*$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.ALPHABAT_DOUBLE</td>
|
||||
<td>双字节</td>
|
||||
<td class="z-samp">/^[^x00-xff]+$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.CHINESE</td>
|
||||
<td>中文</td>
|
||||
<td class="z-samp">/^[\u4e00-\u9fa5]+$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.CHINESE_ALPHA_NUMERIC</td>
|
||||
<td>中文大小写字母和数字</td>
|
||||
<td class="z-samp">/^[\u4e00-\u9fa5A-Za-z0-9]+$/</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">日期相关</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.DATE</td>
|
||||
<td>日期</td>
|
||||
<td class="z-samp">/^((([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29))$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.TIME</td>
|
||||
<td>时间</td>
|
||||
<td class="z-samp">/^([0-1][0-9]|[2][0-3]):([0-5][0-9]):([0-5][0-9])$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.DATE_TIME</td>
|
||||
<td>日期时间</td>
|
||||
<td class="z-samp">/^((([0-9]{3}[1-9]|[0-9]{2}[1-9][0-9]{1}|[0-9]{1}[1-9][0-9]{2}|[1-9][0-9]{3})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29))\s(([0-1][0-9]|[2][0-3]):([0-5][0-9]):([0-5][0-9]))$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.DATE_TIME_MATCH</td>
|
||||
<td>日期时间简单匹配</td>
|
||||
<td class="z-samp">/^(\d{4})-(\d{2})-(\d{2})\s(\d{2}):(\d{2}):(\d{2})$/</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">HTML相关</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.HTML</td>
|
||||
<td>是否包含HTML</td>
|
||||
<td class="z-samp">/<|&#?\w+;/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.HTML_XHTML_TAG</td>
|
||||
<td>适配HTML成XHTML标记</td>
|
||||
<td class="z-samp">/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.HTML_TAG_NAME</td>
|
||||
<td>查找HTML标记名称</td>
|
||||
<td class="z-samp">/<([\w:]+)/</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">其他</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.ACCOUNT</td>
|
||||
<td>账号,要求5-25位，中文大小写字母和数字和下划线、邮件符、点号，并且不能以@._开头和结尾</td>
|
||||
<td class="z-samp">/^(?!(_|@|\.))(?!.*?(_|@|\.)$)[\w@\.\u4e00-\u9fa5]{5,25}$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.PASSWORD</td>
|
||||
<td>密码，要求6-16位，大小写字母和.@_#$!~%符号</td>
|
||||
<td class="z-samp">/^[\w@\.#$!~%]{6,16}$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.MOBILE</td>
|
||||
<td>手机号，支持+86</td>
|
||||
<td class="z-samp">/^((\+86)|(86)|)?(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|170|18[0|1|2|3|5|6|7|8|9])\d{8}$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.MOBILE11</td>
|
||||
<td>11位手机号</td>
|
||||
<td class="z-samp">/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|170|18[0|1|2|3|5|6|7|8|9])\d{8}$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.IP</td>
|
||||
<td>IP地址</td>
|
||||
<td class="z-samp">/^((?:[01]?\d{1,2}|2[0-4]\d|25[0-5])\.){3}(?:[01]?\d{1,2}|2[0-4]\d|25[0-5])$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.MAC</td>
|
||||
<td>MAC地址</td>
|
||||
<td class="z-samp">/^[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}:[0-9A-Fa-f]{2}$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.QQ</td>
|
||||
<td>QQ号</td>
|
||||
<td class="z-samp">/^[1-9]\d{4,10}$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.POSTAL_CODE</td>
|
||||
<td>邮政编码</td>
|
||||
<td class="z-samp">/^[1-9]\d{5}$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.EMAIL</td>
|
||||
<td>邮箱</td>
|
||||
<td class="z-samp">/^([\w-_]+(?:\.[\w-_]+)*)@((?:[a-z0-9]+(?:-[a-zA-Z0-9]+)*)+\.[a-z]{2,6})$/</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.R.IDCARD</td>
|
||||
<td>身份证号</td>
|
||||
<td class="z-samp">/^(\d{6})((((19|20)[0-9]{2})-(((0[13578]|1[02])-(0[1-9]|[12][0-9]|3[01]))|((0[469]|11)-(0[1-9]|[12][0-9]|30))|(02-(0[1-9]|[1][0-9]|2[0-8]))))|((([0-9]{2})(0[48]|[2468][048]|[13579][26])|((0[48]|[2468][048]|[3579][26])00))-02-29))(\d{3}[0-9xX*])$/</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 全局类定义 -->
|
||||
<div class="tutorial title">全局类定义（由Z.Class.newInstance()派生的函数称为类）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr>
|
||||
<td width="15%">属性/方法</td>
|
||||
<td width="30%">属性/方法说明</td>
|
||||
<td width="*">举例</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">默认属性和方法</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">immediate</td>
|
||||
<td>是否立即执行，默认false</td>
|
||||
<td>在构造函数中设置，如var draggable = new Draggable({immediate:true});</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">set</td>
|
||||
<td>设置属性</td>
|
||||
<td class="z-samp">draggable.set(key, value);</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">派出的类可定义的属性</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">defaults</td>
|
||||
<td>缺省字段表</td>
|
||||
<td class="z-samp">defaults = {elem:null, id="123456"},</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">派出的类可定义的方法</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">init</td>
|
||||
<td>初始化函数，无参数</td>
|
||||
<td class="z-samp">init(){},</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">execute</td>
|
||||
<td>执行函数，无参数</td>
|
||||
<td class="z-samp">execute(){},</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table class="z-table z-pd10 z-lh200p z-mg-t20">
|
||||
<tr>
|
||||
<td class="zi-px18">一、哈唏表类（Z.HashMap）：</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr>
|
||||
<td width="15%">属性/方法</td>
|
||||
<td width="30%">属性/方法说明</td>
|
||||
<td width="*">举例</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">构造函数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">new</td>
|
||||
<td>构造函数</td>
|
||||
<td class="z-samp">var aMap = new Z.HashMap();</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">方法</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">put</td>
|
||||
<td>设置值</td>
|
||||
<td class="z-samp">aMap.put("abc", "ABC");</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">get</td>
|
||||
<td>获取值</td>
|
||||
<td class="z-samp">var value = aMap.get("abc");</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">remove</td>
|
||||
<td>删除值</td>
|
||||
<td class="z-samp">aMap.remove("abc");</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">clear</td>
|
||||
<td>清空表</td>
|
||||
<td class="z-samp">aMap.clear();</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">size</td>
|
||||
<td>获取表大小</td>
|
||||
<td class="z-samp">var size = aMap.size();</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">isEmpty</td>
|
||||
<td>判断是否为空</td>
|
||||
<td class="z-samp">var isEmpty = aMap.isEmpty();</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">containKey</td>
|
||||
<td>判断KEY中是否包含值</td>
|
||||
<td class="z-samp">var containKey = aMap.containKey("abc");</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">containValue</td>
|
||||
<td>判断VALUE中是否包含值</td>
|
||||
<td class="z-samp">var containValue = aMap.containValue("ABC");</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">keySet</td>
|
||||
<td>获取KEY数组</td>
|
||||
<td class="z-samp">var keys = aMap.keySet();</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">values</td>
|
||||
<td>获取VALUE数组</td>
|
||||
<td class="z-samp">var values = aMap.values();</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table class="z-table z-pd10 z-lh200p z-mg-t20">
|
||||
<tr>
|
||||
<td class="zi-px18">二、可拖动类（Z.Draggable）：</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr>
|
||||
<td width="15%">属性/函数</td>
|
||||
<td width="30%">属性/方法说明</td>
|
||||
<td width="*">举例</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">构造函数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">new</td>
|
||||
<td>构造函数</td>
|
||||
<td class="z-samp">var draggable = new Z.Draggable();</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">属性</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>拖拽对象</td>
|
||||
<td class="z-samp">draggable.elem = Z.D.id("drag");</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">drag</td>
|
||||
<td>拖拽手把</td>
|
||||
<td class="z-samp">draggable.drag = Z.D.id("drag");</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param</td>
|
||||
<td>拖拽参数（支持left,top,right,bottom,width,height其中right,bottom时width,height无效）</td>
|
||||
<td class="z-samp">draggable.param = {left:0,top:0,width:500;height:300};</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">cursor</td>
|
||||
<td>拖拽手势，默认move</td>
|
||||
<td class="z-samp">draggable.cursor = "move";</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">callback</td>
|
||||
<td>拖拽回调函数</td>
|
||||
<td class="z-samp">draggable.callback(){};</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">callthis</td>
|
||||
<td>拖拽回调函数this指针</td>
|
||||
<td class="z-samp">draggable.callthis = $this;</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">函数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">execute</td>
|
||||
<td>执行拖拽</td>
|
||||
<td class="z-samp">draggable.execute();</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">close</td>
|
||||
<td>关闭拖拽</td>
|
||||
<td class="z-samp">draggable.close();</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()}
|
||||
文件差异内容过多而无法显示
加载差异
@@ -0,0 +1,881 @@
|
||||
<#def title = "静态对象"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "静态对象是把一系列常用的对象定义成静态属性和函数。目前包括有浏览器对象（Z.B）、文档对象（Z.D）、"/>
|
||||
<#def prevUrl = "js.htm"/>
|
||||
<#def nextUrl = "util.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
${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", "js", "static")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "全局JS定义", "静态对象")}
|
||||
|
||||
<!-- 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;">
|
||||
静态对象是把一系列常用的对象定义成静态属性和函数。目前包括有浏览器对象（Z.B）、文档对象（Z.D）、
|
||||
事件对象（Z.E）、元素对象（Z.EL）、HTML对象（Z.H）、地址对象（Z.L）、COOKIE对象（Z.CK）。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 浏览器对象（Z.B） -->
|
||||
<div class="tutorial title">浏览器对象（Z.B/Z.Browser）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="28%">属性/函数</td>
|
||||
<td width="33%">值范围</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.win64</td>
|
||||
<td class="z-samp">true/false</td>
|
||||
<td>是否是64位系统</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.mobile</td>
|
||||
<td class="z-samp">true/false</td>
|
||||
<td>是否是移动端</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.firefox</td>
|
||||
<td class="z-samp">true/false</td>
|
||||
<td>是否是firefox浏览器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.webkit</td>
|
||||
<td class="z-samp">true/false</td>
|
||||
<td>是否是webkit浏览器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.safari</td>
|
||||
<td class="z-samp">true/false</td>
|
||||
<td>是否是safari浏览器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.chrome</td>
|
||||
<td class="z-samp">true/false</td>
|
||||
<td>是否是chrome浏览器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.opera</td>
|
||||
<td class="z-samp">true/false</td>
|
||||
<td>是否是opera浏览器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.msie</td>
|
||||
<td class="z-samp">true/false</td>
|
||||
<td>是否是msie浏览器（含trident）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.msieOnly</td>
|
||||
<td class="z-samp">true/false</td>
|
||||
<td>是否是msie浏览器（不含trident）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.msie11</td>
|
||||
<td class="z-samp">true/false</td>
|
||||
<td>是否是msie11浏览器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.msie10</td>
|
||||
<td class="z-samp">true/false</td>
|
||||
<td>是否是msie10浏览器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.msie9</td>
|
||||
<td class="z-samp">true/false</td>
|
||||
<td>是否是msie9浏览器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.msie8</td>
|
||||
<td class="z-samp">true/false</td>
|
||||
<td>是否是msie8浏览器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.msie7</td>
|
||||
<td class="z-samp">true/false</td>
|
||||
<td>是否是msie7浏览器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.msie6</td>
|
||||
<td class="z-samp">true/false</td>
|
||||
<td>是否是msie6浏览器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.B.msieVer</td>
|
||||
<td class="z-samp">6,7,8,9,10,11,12,100</td>
|
||||
<td>IE版本号，100表示不是IE</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 文档对象 -->
|
||||
<div class="tutorial title">文档对象（Z.D/Z.Document）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="28%">函数</td>
|
||||
<td width="33%">说明</td>
|
||||
<td width="10%">参数</td>
|
||||
<td width="*">参数说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.D.id(id, doc)</td>
|
||||
<td rowspan="2">通过ID获取元素<br>document.getElementById(id);</td>
|
||||
<td class="z-samp">id</td>
|
||||
<td>元素id编码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">doc</td>
|
||||
<td>所在的文档对象，未传入取当前document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.D.has(id, doc)</td>
|
||||
<td rowspan="2">通过ID获取元素判断是否存在<br>document.getElementById(id)!=null;</td>
|
||||
<td class="z-samp">id</td>
|
||||
<td>元素id编码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">doc</td>
|
||||
<td>所在的文档对象，未传入取当前document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.D.create(tag, doc)</td>
|
||||
<td rowspan="2">通过tag创建元素<br>document.createElement(tag);</td>
|
||||
<td class="z-samp">tag</td>
|
||||
<td>元素标签，如div</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">doc</td>
|
||||
<td>所在的文档对象，未传入取当前document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.D.tagNames(name, doc)</td>
|
||||
<td rowspan="2">获取指定标记名称的对象列表<br>document.getElementsByTagName(name);</td>
|
||||
<td class="z-samp">name</td>
|
||||
<td>名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">doc</td>
|
||||
<td>所在的文档对象，未传入取当前document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.D.names(name, doc)</td>
|
||||
<td rowspan="2">获取指定名称的对象列表<br>document.getElementsByName(name);</td>
|
||||
<td class="z-samp">name </td>
|
||||
<td>指定名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">doc</td>
|
||||
<td>所在的文档对象，未传入取当前document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.D.classNames(name, doc)</td>
|
||||
<td rowspan="2">获取指定类名的对象列表<br>document.getElementsByClassName(name);</td>
|
||||
<td class="z-samp">name</td>
|
||||
<td>指定类名 </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">doc</td>
|
||||
<td>所在的文档对象，未传入取当前document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="3" class="z-samp">Z.D.attrs(name, value, doc)</td>
|
||||
<td rowspan="3">获取指定属性名和属性值相等的对象列表</td>
|
||||
<td class="z-samp">name</td>
|
||||
<td>指定属性名 </td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">value</td>
|
||||
<td>指定属性值</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">doc</td>
|
||||
<td>所在的文档对象，未传入取当前document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.D.scrollTop(doc)</td>
|
||||
<td>窗口垂直滚动条上偏移值</td>
|
||||
<td class="z-samp">doc</td>
|
||||
<td>指定的文档对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.D.scrollLeft(doc)</td>
|
||||
<td>窗口水平滚动条左偏移值 </td>
|
||||
<td class="z-samp">doc</td>
|
||||
<td>所在的文档对象，未传入取当前document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.D.scrollWidth(doc)</td>
|
||||
<td>可滚动展示宽度 </td>
|
||||
<td class="z-samp">doc</td>
|
||||
<td>所在的文档对象，未传入取当前document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.D.scrollHeight(doc)</td>
|
||||
<td>可滚动展示高度 </td>
|
||||
<td class="z-samp">doc</td>
|
||||
<td>所在的文档对象，未传入取当前document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.D.clientWidth(doc)</td>
|
||||
<td>窗口可视宽度（看得见的宽度）</td>
|
||||
<td class="z-samp">doc</td>
|
||||
<td>所在的文档对象，未传入取当前document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.D.clientHeight(doc)</td>
|
||||
<td>窗口可视高度（看得见的高度）</td>
|
||||
<td class="z-samp">doc</td>
|
||||
<td>所在的文档对象，未传入取当前document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.D.offsetWidth(doc)</td>
|
||||
<td>可操作宽度（由元素决定，和窗口无关）</td>
|
||||
<td class="z-samp">doc</td>
|
||||
<td>所在的文档对象，未传入取当前document</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.D.offsetHeight(doc)</td>
|
||||
<td>可操作高度（由元素决定，和窗口无关）</td>
|
||||
<td class="z-samp">doc</td>
|
||||
<td>所在的文档对象，未传入取当前document</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 事件对象 -->
|
||||
<div class="tutorial title">事件对象（Z.E/Z.Event）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="28%">函数</td>
|
||||
<td width="33%">说明</td>
|
||||
<td width="10%">参数</td>
|
||||
<td width="*">参数说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.KEY</td>
|
||||
<td colspan="2">{
|
||||
ESC: 27,
|
||||
LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40, DELETE: 46
|
||||
}</td>
|
||||
<td>事件键值属性</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="4" class="z-samp">Z.E.add(target, name, listener, $this)</td>
|
||||
<td rowspan="4">增加事件</td>
|
||||
<td class="z-samp">target</td>
|
||||
<td>目标地址</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">name</td>
|
||||
<td>事件名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">listener</td>
|
||||
<td>事件侦听器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">$this</td>
|
||||
<td>事件侦听器对应的this指针</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="4" class="z-samp">Z.E.remove(target, name, listener, $this)</td>
|
||||
<td rowspan="4">移除事件</td>
|
||||
<td class="z-samp">target</td>
|
||||
<td>目标地址</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">name</td>
|
||||
<td>事件名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">listener</td>
|
||||
<td>事件侦听器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">$this</td>
|
||||
<td>事件侦听器对应的this指针</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.event(e)</td>
|
||||
<td>对事件对象作适配，IE取window.event</td>
|
||||
<td class="z-samp">e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.key(e)</td>
|
||||
<td>产生事件的键值</td>
|
||||
<td class="z-samp">e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.target(e)</td>
|
||||
<td>产生事件的目标对象</td>
|
||||
<td class="z-samp">e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.current(e)</td>
|
||||
<td>产生事件的当前目标对象</td>
|
||||
<td class="z-samp">e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.cancel(e)</td>
|
||||
<td>取消缺省事件</td>
|
||||
<td class="z-samp">e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.stop(e)</td>
|
||||
<td>停止冒泡</td>
|
||||
<td class="z-samp">e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.forbidden(e)</td>
|
||||
<td>停止冒泡和取消缺省事件 </td>
|
||||
<td class="z-samp">e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.clientX(e)</td>
|
||||
<td>点击位置相对于浏览器的X坐标</td>
|
||||
<td class="z-samp">e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.clientY(e)</td>
|
||||
<td>点击位置相对于浏览器的Y坐标</td>
|
||||
<td class="z-samp">e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.screenX(e)</td>
|
||||
<td>点击位置相对于屏幕的X坐标</td>
|
||||
<td class="z-samp">e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.screenY(e)</td>
|
||||
<td>点击位置相对于屏幕的Y坐标 </td>
|
||||
<td class="z-samp">e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.wheelDelta()</td>
|
||||
<td>滚轮增量</td>
|
||||
<td class="z-samp">e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.isCtrl(e)</td>
|
||||
<td>是否按住了Ctrl键</td>
|
||||
<td class="z-samp">e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.isEsc(e)</td>
|
||||
<td>是否退出键</td>
|
||||
<td class="z-samp">e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.isBackspace(e)</td>
|
||||
<td>是否退格键</td>
|
||||
<td>e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.isEnter(e)</td>
|
||||
<td>是否回车键</td>
|
||||
<td>e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.isCtrlC(e)</td>
|
||||
<td>是否复制</td>
|
||||
<td>e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.E.isCtrlV(e)</td>
|
||||
<td>是否粘贴</td>
|
||||
<td>e</td>
|
||||
<td>事件对象</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
<#-- 元素对象 -->
|
||||
<div class="tutorial title">元素对象（Z.EL/Z.Element）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="28%">函数</td>
|
||||
<td width="33%">说明</td>
|
||||
<td width="10%">参数</td>
|
||||
<td width="*">参数说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.has(elem, name)</td>
|
||||
<td rowspan="2">是否有属性 </td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">name</td>
|
||||
<td>属性名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.get(elem, name)</td>
|
||||
<td rowspan="2">获取属性值</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">name</td>
|
||||
<td>属性名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="3" class="z-samp">Z.EL.set(elem, name, value)</td>
|
||||
<td rowspan="3">设置属性值 </td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">name</td>
|
||||
<td>属性名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">value</td>
|
||||
<td>需要传入的值</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="3" class="z-samp">Z.EL.equals(elem, name, value)</td>
|
||||
<td rowspan="3">判断属性值是否等于指定值 </td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">name</td>
|
||||
<td>属性名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">value</td>
|
||||
<td>传入的值</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.style(elem, style)</td>
|
||||
<td rowspan="2">获取或设置样式字符串</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">style</td>
|
||||
<td>未传值表示获取样式，传值表示设置样式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="3" class="z-samp">Z.EL.css(elem, name, value)</td>
|
||||
<td rowspan="3">获取或设置一个样式</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">name</td>
|
||||
<td>样式名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">value</td>
|
||||
<td>未传值表示获取样式，传值表示设置样式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.cssNum(elem, name)</td>
|
||||
<td rowspan="2">获取样式数值型的值</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">name</td>
|
||||
<td>样式名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.opacity(elem, value)</td>
|
||||
<td rowspan="2">获取和设置透明度值0-1之间</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">value</td>
|
||||
<td>未传值表示获取，传值表示设置</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.className(elem)</td>
|
||||
<td rowspan="2">获取类样式名称值</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">className</td>
|
||||
<td>类样式名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.addClass(elem, className)</td>
|
||||
<td rowspan="2">增加类样式</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">className</td>
|
||||
<td>类样式名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.removeClass(elem, className)</td>
|
||||
<td rowspan="2">删除类样式</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">className</td>
|
||||
<td>类样式名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.hasClass(elem, className)</td>
|
||||
<td rowspan="2">判断是否有类样式</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">className</td>
|
||||
<td>类样式名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.toggleClass(elem, className)</td>
|
||||
<td rowspan="2">切换类样式，没有则加入，有则删除</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">className</td>
|
||||
<td>类样式名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.EL.select(elem)</td>
|
||||
<td>选中对象文本</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.EL.selection(elem)</td>
|
||||
<td>选中对象的文本内容</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.EL.focus(elem)</td>
|
||||
<td>设置元素获取焦点</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.focusEnd(elem, len)</td>
|
||||
<td rowspan="2">设置元素获取焦点，并把光标定位到结尾</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">len</td>
|
||||
<td>长度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.EL.parent(elem)</td>
|
||||
<td>获取元素父元素</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.EL.parentIndex(elem)</td>
|
||||
<td>获取元素在父元素的索引号</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.EL.childs(elem)</td>
|
||||
<td>获取元素子节点列表<br>elem.childNodes</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.EL.children(elem)</td>
|
||||
<td>获取元素子元素列表<br>elem.children</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.html(elem, value)</td>
|
||||
<td rowspan="2">获取和设置HTML代码</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">value</td>
|
||||
<td>未传值表示获取，传值表示设置</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.text(elem, value)</td>
|
||||
<td rowspan="2">获取或设置元素文本</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">value</td>
|
||||
<td>未传值表示获取，传值表示设置</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.append(elem, child)</td>
|
||||
<td rowspan="2">增加子元素</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>本元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">child</td>
|
||||
<td>子元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.remove(elem, name)</td>
|
||||
<td rowspan="2">删除元素或删除属性</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">name</td>
|
||||
<td>未传值表示删除元素，传值表示删除元素的属性</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.EL.replace(elem, newElem)</td>
|
||||
<td rowspan="2">替代元素</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>原元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">newElem</td>
|
||||
<td>新元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.EL.offsetLeft(elem)</td>
|
||||
<td>获取相对于父对象的左偏移</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.EL.offsetTop(elem)</td>
|
||||
<td>获取相对于父对象的上偏移 </td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.EL.offsetLeftBody(elem)</td>
|
||||
<td>获取相对body的左偏移（绝对左偏移）</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.EL.offsetTopBody(elem)</td>
|
||||
<td>获取相对body的上偏移（绝对上偏移）</td>
|
||||
<td class="z-samp">elem</td>
|
||||
<td>元素</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- HTML对象 -->
|
||||
<div class="tutorial title">HTML对象（Z.H/Z.Html）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="33%">函数</td>
|
||||
<td width="28%">说明</td>
|
||||
<td width="10%">参数</td>
|
||||
<td width="*">参数说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.H.createElement(html)</td>
|
||||
<td >通过HTML文本创建元素列表</td>
|
||||
<td class="z-samp">html</td>
|
||||
<td>HTML文本</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.H.displayDefault(tag)</td>
|
||||
<td>获取HTML标签缺省的display值</>
|
||||
<td class="z-samp">tag</td>
|
||||
<td>HTML标签名</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 地址对象 -->
|
||||
<div class="tutorial title">地址对象（Z.L/Z.Location）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="33%">函数</td>
|
||||
<td width="28%">说明</td>
|
||||
<td width="10%">参数</td>
|
||||
<td width="*">参数说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">Z.L.reload(target)</td>
|
||||
<td>刷新</td>
|
||||
<td class="z-samp">target</td>
|
||||
<td>目标对象，为空表示当前window</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.L.access(url, target)</td>
|
||||
<td rowspan="2">访问URL</td>
|
||||
<td class="z-samp">url</td>
|
||||
<td>URL地址</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">target</td>
|
||||
<td>目标对象，为空表示当前window</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="4" class="z-samp">Z.L.check(url, name, form, target)</td>
|
||||
<td rowspan="4">带检测访问URL</td>
|
||||
<td class="z-samp">url</td>
|
||||
<td>URL地址</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">name</td>
|
||||
<td>单选框或多选框名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">form</td>
|
||||
<td>指定表单内的单选或多选框</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">target</td>
|
||||
<td>目标对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="5" class="z-samp">Z.L.confirm(url, message, name, form, target)</td>
|
||||
<td rowspan="5">带询问访问URL<br>
|
||||
<td class="z-samp">url</td>
|
||||
<td>URL地址</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">message</td>
|
||||
<td>询问的显示信息</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">name</td>
|
||||
<td>单选框或多选框名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">form</td>
|
||||
<td>确认的形式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">target</td>
|
||||
<td>目标对象</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td rowspan="2" class="z-samp">Z.L.href(param, param2)</td>
|
||||
<td rowspan="2">含对象参数的访问URL<br>
|
||||
<td class="z-samp">param</td>
|
||||
<td>参数1：<br>字符串时表示URL，功能同access函数<br>对象时取值{url:url,target:target,name:name,form:form,message:message}，相应地判断是check|confirm方法</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param2</td>
|
||||
<td>参数2：<br>传值时为target，优先于参数1中对象target</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- COOKIE对象 -->
|
||||
<div class="tutorial title">COOKIE对象（Z.CK/Z.Cookie）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="33%">函数</td>
|
||||
<td width="28%">说明</td>
|
||||
<td width="10%">参数</td>
|
||||
<td width="*">参数说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Z.Cookie.all()</td>
|
||||
<td colspan="3">设置或返回当前文档有关的所有Cookie，等同document.cookie</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Z.Cookie.add(cookie)</td>
|
||||
<td>添加Cookie</td>
|
||||
<td>cookie</td>
|
||||
<td>
|
||||
Cookie对象：<br>
|
||||
name：Cookie名称，value：Cookie值<br>
|
||||
expires：Cookie到期时长，单位秒，未传值表示随浏览器关闭失效<br>
|
||||
path：Cookie有效路径，建议/结尾<br>
|
||||
domain：Cookie有效域名<br>
|
||||
secure：安全标识true|false，HTTPS时有效<br><br>
|
||||
如：{name:"test", value:"value", expires=3600, path="/", domain="127.0.0.1", secure:false}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Z.Cookie.remove(name)</td>
|
||||
<td>删除Cookie</td>
|
||||
<td>name</td>
|
||||
<td>Cookie名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Z.Cookie.get(name)</td>
|
||||
<td>获取Cookie</td>
|
||||
<td>name</td>
|
||||
<td>Cookie名称</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()}
|
||||
文件差异内容过多而无法显示
加载差异
@@ -0,0 +1,227 @@
|
||||
<#def title = "标签页"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " 标签页是参考tabnav设计出更简单易用的内容重叠布局的导航页。标签页使用nav和section作为是标签和内容显示。在nav中使用li表示每个标签，在section中使用div作为每个标签显示的内容。"/>
|
||||
<#def prevUrl = "../dialog/loading.htm"/>
|
||||
<#def nextUrl = "../tool/ajax.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
<!--
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
html = Z.Strings.replaceAll(html, " class=\"\"", "");
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
//-->
|
||||
</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", "nav", "tabnav")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
标签页是参考tabnav设计出更简单易用的内容重叠布局的导航页。标签页使用nav和section作为是标签和内容显示。在nav中使用li表示每个标签，在section中使用div作为每个标签显示的内容。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、无边框和无标题，标签在左侧 -->
|
||||
<div class="tutorial title">一、无边框和无标题，标签在左侧</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 无边框和无标题，标签在左侧 -->
|
||||
<div data-role="z-tabnav" class="z-tabnav">
|
||||
<nav>
|
||||
<ul>
|
||||
<li class="z-active">标签一</li>
|
||||
<li>标签二</li>
|
||||
<li>标签三</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section>
|
||||
<div class="z-active z-pd10">
|
||||
标签一内容
|
||||
</div>
|
||||
<div class="z-pd10">
|
||||
标签二内容
|
||||
</div>
|
||||
<div class="z-pd10">
|
||||
标签三内容
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、定义一个div，包含属性[data-role="z-tabnav"]和[class="z-tabnav"]<br>
|
||||
2、在div下包括两大元素nav和section。其中nav表示标签部分，section表示内容显示部分<br>
|
||||
3、在nav中通过ul和li把标签设定好，如例子中标签一、标签二、标签三。其中有[class="z-active"]的表示当前激活标签<br>
|
||||
4、在section中对应li编写三个标签内容div和li个数和顺序对应。其中有[class="z-active"]的表示当前激活标签，[class="z-pd10"]表示标签内容内边距10px
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、无边框和有标题，标签在右侧，内容有边框 -->
|
||||
<div class="tutorial title">二、无边框和有标题，标签在右侧，内容有边框</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 无边框和有标题，标签在右侧，内容有边框 -->
|
||||
<div data-role="z-tabnav" class="z-tabnav">
|
||||
<nav>
|
||||
<span>标题</span>
|
||||
<ul class="zi-float-right">
|
||||
<li class="z-active">标签一</li>
|
||||
<li>标签二</li>
|
||||
<li>标签三</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section class="z-pd-t20">
|
||||
<div class="z-active z-bd z-bd-rd5 z-pd10">
|
||||
标签一内容
|
||||
</div>
|
||||
<div class="z-bd z-bd-rd5 z-pd10">
|
||||
标签二内容
|
||||
</div>
|
||||
<div class="z-bd z-bd-rd5 z-pd10">
|
||||
标签三内容
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、定义一个div，包含属性[data-role="z-tabnav"]和[class="z-tabnav"]<br>
|
||||
2、在div下包括两大元素nav和section。其中nav表示标签部分，section表示内容显示部分<br>
|
||||
3、在nav中通过ul和li把标签设定好，如例子中标签一、标签二、标签三。其中有[class="z-active"]的表示当前激活标签<br>
|
||||
4、在section中对应li编写三个标签内容div和li个数和顺序对应。其中在section中定义[class="z-pd-t20"]表示所有标签内容顶部内边距为20px<br>
|
||||
5、在section标签内容中[class="z-active"]的表示当前激活标签，[class="z-pd10"]表示标签内容内边距10px，[class="z-bd z-bd-rd5"]表示标签内容有5像素圆角边框
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 三、有边框和有标题，标签在右侧，加大字体 -->
|
||||
<div class="tutorial title">三、有边框和有标题，标签在右侧，加大字体</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 有边框和有标题，标签在右侧 -->
|
||||
<div data-role="z-tabnav" class="z-tabnav z-bordered">
|
||||
<nav class="zi-h60">
|
||||
<span class="zi-px22 zi-mg-t8">标题</span>
|
||||
<ul class="zi-float-right zi-h50 zi-px20">
|
||||
<li class="z-active">标签一</li>
|
||||
<li>标签二</li>
|
||||
<li>标签三</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section>
|
||||
<div class="z-active z-pd10">
|
||||
标签一内容
|
||||
</div>
|
||||
<div class="z-pd10">
|
||||
标签二内容
|
||||
</div>
|
||||
<div class="z-pd10">
|
||||
标签三内容
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、定义一个div，包含属性[data-role="z-tabnav"]和[class="z-tabnav z-bordered"]表示有边框<br>
|
||||
2、在div下包括两大元素nav和section。其中nav表示标签部分，section表示内容显示部分<br>
|
||||
3、在nav中通过ul和li把标签设定好，如例子中标签一、标签二、标签三。其中有[class="z-active"]的表示当前激活标签<br>
|
||||
4、在section中对应li编写三个标签内容div和li个数和顺序对应。其中有[class="z-active"]的表示当前激活标签，[class="z-pd10"]表示标签内容内边距10px
|
||||
</div>
|
||||
</section>
|
||||
</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()}
|
||||
@@ -0,0 +1,759 @@
|
||||
<#def title = "AJAX"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术"/>
|
||||
<#def prevUrl = "../nav/tabnav.htm"/>
|
||||
<#def nextUrl = "imageClipper.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
<!--
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
//-->
|
||||
</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", "tool", "ajax")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
|
||||
${zhiqim_com_breadcrumb("UI", "ZmUI", "工具", "Ajax")}
|
||||
|
||||
<!-- 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">AJAX：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
|
||||
凡狐AJAX采用面向RMI的概念设计，通过指定类和方法，传入参数对应方法的参数，通过RMI访问JAVA类的方法获取执行结果。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、调用成功，回调函数（无参数的方法） -->
|
||||
<div class="tutorial title">一、调用成功，回调函数（无参数的方法）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestSuccess()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("com.zhiqim.zhiqim.tutorial.presenter.AjaxPresenter");
|
||||
ajax.setMethodName("doTestSuccess");
|
||||
ajax.setFailureAlert();
|
||||
ajax.setSuccess(function(){Z.alert(this.responseText);});
|
||||
ajax.setLoading(document, true);
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:void(0);" onclick="doTestSuccess();">点我执行[doTestSuccess]函数</a>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、定义一个AJAX调用函数，设置类名或类别名、类方法和回调函数，然后执行<br>
|
||||
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、调用成功，回调函数（带参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">二、调用成功，回调函数（带参数、使用类别名@AnAlias）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestParam()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("AjaxPresenter");
|
||||
ajax.setMethodName("doTestParam");
|
||||
ajax.addParam("111111");
|
||||
ajax.addParam("222222");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
Z.alert("状态："+this.responseStatus+"<br>信息："+this.responseText);
|
||||
});
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestParam();">点我执行[doTestParam]函数</a>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、通过ajax.addParam();设置参数，参数个数和类型要和后端对应，支持字符串和基本类型
|
||||
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 三、调用成功，显示到元素中（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">三、调用成功，显示到元素中（无参数、使用类别名@AnAlias）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestSuccess2()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("AjaxPresenter");
|
||||
ajax.setMethodName("doTestSuccess");
|
||||
ajax.setCallback("successId");
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestSuccess2();">点我执行[doTestSuccess]函数</a><br><br>
|
||||
<!-- 编写AJAX的响应结果 -->
|
||||
返回内容：<span id="successId"></span>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、定义一个AJAX调用函数，设置类名或类别名、类方法和回调函数，然后执行<br>
|
||||
2、在页面上设置点击执行函数，把结果放置到Z("#"+id)中<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 四、调用成功，加载器，后端等待5秒（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">四、调用成功，加载器，后端等待5秒（无参数、使用类别名@AnAlias）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestLoading()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("AjaxPresenter");
|
||||
ajax.setMethodName("doTestLoading");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
Z.alert("状态："+this.responseStatus+"<br>信息："+this.responseText);
|
||||
});
|
||||
ajax.setLoading(document, true);
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestLoading();">点我执行[doTestLoading]函数</a><br><br>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、通过ajax.setLoading(document, true);设置全屏加载器且遮罩，然后执行<br>
|
||||
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 五、调用成功，指定加载器元素，后端等待5秒（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">五、调用成功，指定加载器元素，后端等待5秒（无参数、使用类别名@AnAlias）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestLoading2()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("AjaxPresenter");
|
||||
ajax.setMethodName("doTestLoading");
|
||||
ajax.setCallback("testLoading2");
|
||||
ajax.setLoading("testLoading2");
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestLoading2();">点我执行[doTestLoading2]函数</a><br><br>
|
||||
|
||||
<!-- 指定加载器的位置 -->
|
||||
<div id="testLoading2" class="z-w100p z-h100 z-text-center z-bd z-red" style="line-height:100px;"></div>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、通过ajax.setLoading("testLoading2");设置在testLoading2上显示加载器无遮罩，然后执行<br>
|
||||
3、如果需要遮罩层，设置为ajax.setLoading("testLoading2", true);
|
||||
4、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 六、调用成功，自定义加载器，后端等待5秒（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">六、调用成功，自定义加载器，后端等待5秒（无参数、使用类别名@AnAlias）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestLoading3()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("AjaxPresenter");
|
||||
ajax.setMethodName("doTestLoading");
|
||||
ajax.setCallback("testLoading3");
|
||||
ajax.setLoading(Z.loading({target: "testLoading3", shadow: true, position: 1}));
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestLoading3();">点我执行[doTestLoading3]函数</a><br><br>
|
||||
|
||||
<!-- 指定加载器的位置 -->
|
||||
<div id="testLoading3" class="z-w100p z-h100 z-text-center z-bd z-red" style="line-height:100px;"></div>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、通过Z.loading()函数自定义加载器，然后通过ajax.setLoading();设置到Z.Ajax中<br>
|
||||
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 七、调用失败（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">七、调用失败（无参数、使用类别名@AnAlias）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestError()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("AjaxPresenter");
|
||||
ajax.setMethodName("doTestError");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
Z.alert("状态："+this.responseStatus+"<br>信息："+this.responseText);
|
||||
});
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestError();">点我执行[doTestError]函数</a>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 八、调用异常（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">八、调用异常（无参数、使用类别名@AnAlias）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestException()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("AjaxPresenter");
|
||||
ajax.setMethodName("doTestException");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
Z.alert("状态："+this.responseStatus+"<br>信息："+this.responseText);
|
||||
});
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestException();">点我执行[doTestException]函数</a>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 九、拦截器，未通过显示未通过信息（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">九、拦截器，未通过显示未通过信息（无参数、使用类别名@AnAlias）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestInterceptor()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("AjaxPresenter");
|
||||
ajax.setMethodName("doTestInterceptor");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
Z.alert("状态："+this.responseStatus+"<br>信息："+this.responseText);
|
||||
});
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestInterceptor();">点我执行[doTestInterceptor]函数</a>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
3、拦截器由Java后端设置，如：
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnInterceptor("chkAjax1")
|
||||
public static void doTestInterceptor(HttpRequest request)
|
||||
{
|
||||
request.setResponseResult("返回成功信息");
|
||||
}
|
||||
</span>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnAlias("chkAjax1")
|
||||
public class AjaxChk1Interceptor implements Interceptor
|
||||
{
|
||||
@Override
|
||||
public void intercept(HttpRequest request) throws Exception
|
||||
{
|
||||
request.setResponseError("拦截器不通过");
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 十、拦截器，未通过显示未通过信息（同步调用、无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">十、拦截器（同步调用、无参数、使用类别名@AnAlias）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestSyncInterceptor()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setSync();
|
||||
ajax.setClassName("AjaxPresenter");
|
||||
ajax.setMethodName("doTestInterceptor");
|
||||
ajax.execute();
|
||||
|
||||
Z.alert("状态："+ajax.responseStatus+"<br>信息："+ajax.responseText);
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestSyncInterceptor();">点我执行[doTestSyncInterceptor]函数</a>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、定义一个AJAX调用函数，设置类类别名、类方法<br>
|
||||
2、通过ajax.setSync();设置表示设置成同步等待，同步调用时无需提供回调函数，直接在执行后读出结果即可<br>
|
||||
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
4、拦截器由Java后端设置，如：
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnInterceptor("chkAjax1")
|
||||
public static void doTestInterceptor(HttpRequest request)
|
||||
{
|
||||
request.setResponseResult("返回成功信息");
|
||||
}
|
||||
</span>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnAlias("chkAjax1")
|
||||
public class AjaxChk1Interceptor implements Interceptor
|
||||
{
|
||||
@Override
|
||||
public void intercept(HttpRequest request) throws Exception
|
||||
{
|
||||
request.setResponseError("拦截器不通过");
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 十一、拦截器，未通过跳转到新页面（无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">十一、拦截器，未通过跳转到新页面（无参数、使用类别名@AnAlias）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestInterceptor2()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setClassName("AjaxPresenter");
|
||||
ajax.setMethodName("doTestInterceptor2");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
alert("状态:"+this.responseStatus+",信息:"+this.responseText);
|
||||
});
|
||||
ajax.execute();
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestInterceptor2();">点我执行[doTestInterceptor2]函数</a>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、定义一个AJAX调用函数，设置类类别名、类方法和回调函数<br>
|
||||
2、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
3、拦截器由Java后端设置，如：
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnInterceptor("chkAjax2")
|
||||
public static void doTestInterceptor2(HttpRequest request)
|
||||
{
|
||||
request.setResponseResult("返回成功信息");
|
||||
}
|
||||
</span>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnAlias("chkAjax2")
|
||||
public class AjaxChk2Interceptor implements Interceptor
|
||||
{
|
||||
|
||||
@Override
|
||||
public void intercept(HttpRequest request) throws Exception
|
||||
{
|
||||
request.setRedirectTop(request.getRootPath("/index.htm"), "拦截器要求,正地跳转到首页");
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 十二、拦截器，未通过跳转到新页面（同步调用、无参数、使用类别名@AnAlias） -->
|
||||
<div class="tutorial title">十二、拦截器，未通过跳转到新页面（同步调用、无参数、使用类别名@AnAlias）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 编写AJAX的函数 -->
|
||||
<script>
|
||||
function doTestSyncInterceptor2()
|
||||
{
|
||||
var ajax = new Z.Ajax();
|
||||
ajax.setContextPath("${context.getContextPath()}");
|
||||
ajax.setSync();
|
||||
ajax.setClassName("AjaxPresenter");
|
||||
ajax.setMethodName("doTestInterceptor2");
|
||||
ajax.execute();
|
||||
|
||||
alert("状态:"+ajax.responseStatus+",信息:"+ajax.responseText);
|
||||
}
|
||||
</script>
|
||||
<!-- 编写AJAX的点击调用 -->
|
||||
<a href="javascript:doTestSyncInterceptor2();">点我执行[doTestSyncInterceptor2]函数</a>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、定义一个AJAX调用函数，设置类类别名、类方法<br>
|
||||
2、通过ajax.setSync();设置表示设置成同步等待，同步调用时无需提供回调函数，直接在执行后读出结果即可<br>
|
||||
3、在页面上设置点击执行函数，通过设置callback回调得到responseStatus和responseText<br>
|
||||
4、拦截器由Java后端设置，如：
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnInterceptor("chkAjax2")
|
||||
public static void doTestInterceptor2(HttpRequest request)
|
||||
{
|
||||
request.setResponseResult("返回成功信息");
|
||||
}
|
||||
</span>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnAlias("chkAjax2")
|
||||
public class AjaxChk2Interceptor implements Interceptor
|
||||
{
|
||||
|
||||
@Override
|
||||
public void intercept(HttpRequest request) throws Exception
|
||||
{
|
||||
request.setRedirectTop(request.getRootPath("/index.htm"), "拦截器要求,正地跳转到首页");
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- AJAX调用参数说明 -->
|
||||
<div class="tutorial title">AJAX调用参数说明（请求参数十个，响应结果两个）</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh200p z-bd-rd8">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%">参数</td>
|
||||
<td width="30%">值</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">请求参数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">contextPath</td>
|
||||
<td>默认为空</td>
|
||||
<td>当前上下文环境路径，如/admin，默认为空表示根上下文路径</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">className</td>
|
||||
<td>必须</td>
|
||||
<td>调用的类名或类别名，如AjaxPresenter/com.zhiqim.zhiqim.tutorial.presenter.AjaxPresenter</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">methodName</td>
|
||||
<td>必须</td>
|
||||
<td>调用的类的方法名，如doTestInterceptor</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">async</td>
|
||||
<td>true</td>
|
||||
<td>异常还是同步调用，默认异步，true|false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">params</td>
|
||||
<td>[]</td>
|
||||
<td>参数数组，可通过addParam();函数设置参数，如addParam("abc");</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">callback</td>
|
||||
<td>null</td>
|
||||
<td>回调函数或回调elem的id<br>
|
||||
1、函数的this为Z.Ajax对象，可以通过this.responseStatus和this.responseText获取结果状态和结果文本<br>
|
||||
2、回调ID时，填写elem的id，即把this.responseText的值填充到elem中，有三种填充方式，见callbackMethod参数
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">callbackMethod</td>
|
||||
<td>"html"</td>
|
||||
<td>回调ID时的方法，三种"html"|"text"|"val"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">callScript</td>
|
||||
<td>true</td>
|
||||
<td>是否在AJAX结果的改变重置由data-role的缓存，如Z.Tooltip,Z.Select等，true|false，默认true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">loading</td>
|
||||
<td>null</td>
|
||||
<td>三种加载器，通过方法setLoading();方法来设置<br>
|
||||
1、传入Z.loading对象，参数由对象指定，如ajax.setLoading(Z.loading({target: "testLoading3", shadow: true, position: 1}));
|
||||
2、传入target和是否遮罩，如ajax.setLoading(document, true);或无遮罩ajax.setLoading(document);
|
||||
3、传入targetId和是否遮罩，如ajax.setLoading("testLoading3", true);或无遮罩ajax.setLoading("testLoading3");
|
||||
4、传入一个函数，在加载时回调该函数，如ajax.setLoading(function(){});此方式用于自定义操作
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">loadingParam</td>
|
||||
<td>null</td>
|
||||
<td>加载器参数，通过方法setLoading();方法来设置，是第二个参数<br>
|
||||
1、当loading是Z.loading和字符串时表示是否遮罩<br>
|
||||
2、当#ID时指定的HTML，成功后换回原始HTML
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">响应参数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">responseStatus</td>
|
||||
<td>0</td>
|
||||
<td>响应状态，0表示成功，601－603表示跳转，其他表示错误</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">responseText</td>
|
||||
<td>null</td>
|
||||
<td>响应文本字符串，默认是text/plain格式，XML或JSON格式自行转化</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()}
|
||||
@@ -0,0 +1,113 @@
|
||||
<#def title = "头像裁剪"/>
|
||||
<#def keyword = "Avatar"/>
|
||||
<#def desc = "头像裁剪是指对上传的图片，根据要求裁剪成指定大小的图片。支持放大和缩小图片，和通过移动图片，锁定裁剪位置"/>
|
||||
<#def prevUrl = "ajax.htm"/>
|
||||
<#def nextUrl = "upload.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
${Scripts.src("/zinc/www/zhiqim_image_clipper.js")}
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
var clipper = new Z.ImageClipper();
|
||||
clipper.tigger = "clipper";
|
||||
clipper.img = "/zinc/www/default.jpg";
|
||||
clipper.execute();
|
||||
});
|
||||
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
</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", "tool", "imageClipper")}
|
||||
|
||||
<!--主体-->
|
||||
<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>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="min-height:250px;">
|
||||
<!-- 初始化头像裁切控件 -->
|
||||
<div id="clipper" style="margin-left:50px;margin-top:10px;width:620px;height:460px;"></div>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、拖拽三要求，可拖拽对象、拖把和拖拽父范围，这三个对象都需要设置id<br>
|
||||
2、简单拖拽只需要配置可拖拽对象、拖把两个id，简单拖拽不固定范围<br>
|
||||
</div>
|
||||
</section>
|
||||
</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()}
|
||||
@@ -0,0 +1,191 @@
|
||||
<#def title = "文件上传"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " 凡狐文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传等。"/>
|
||||
<#def prevUrl = "zeditor.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
<!--
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
//-->
|
||||
</script>
|
||||
${Scripts.src(context.getRootPath("/src/qrcode/qrcode.js"))}
|
||||
${Scripts.src(context.getRootPath("/src/qrcode/zhiqim_qrcode.js"))}
|
||||
${zhiqim_com_head_end()}
|
||||
|
||||
${zhiqim_com_body()}
|
||||
${zhiqim_com_topnav("ui")}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
|
||||
${zhiqim_com_container_ui("ZmUI", "tool", "qrcode")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
通过本地 JS 将字符串转成二维码图形输出，支持方法定义、实例定义两种。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、调用方法的方式 -->
|
||||
<div class="tutorial title">一、调用方法的方式</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z("#ZQrcodeTrigger").on("click",function(){
|
||||
var urlString = Z("#ZQrcodeUrl").val();
|
||||
|
||||
//调用方法的方式一
|
||||
Z("#ZQrcodeCompleted").qrcode(urlString);
|
||||
|
||||
/*调用方法的方式二
|
||||
Z("#ZQrcodeCompleted").qrcode({
|
||||
text: "urlString", // 需转换成二维码的字符串
|
||||
render: "canvas", // 实现方式，可选："canvas"、"table"，默认为 "canvas"
|
||||
width: 256, // 二维码的宽度，默认为 256
|
||||
height: 256, // 二维码的高度，默认为 256
|
||||
typeNumber: -1, // < 1，则自动计算，最大值为40；数值越大，二维码密度越大，默认为 -1
|
||||
correctLevel: 2, // 取值范围[0-3]，4种计算方式，默认为2
|
||||
background: "#ffffff", // 背景色，默认为 "#ffffff"
|
||||
foreground: "#000000" // 二维码颜色，默认为 "#000000"
|
||||
});
|
||||
*/
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- 自定义 url -->
|
||||
<input id="ZQrcodeUrl" type="text" class="z-input z-blue" value=""/>
|
||||
<!-- 触发按钮 -->
|
||||
<button id="ZQrcodeTrigger" type="button" class="z-button z-blue z-w120">生成二维码</button><br><br>
|
||||
|
||||
<!-- 生成二维码图片区域 -->
|
||||
<span id="ZQrcodeCompleted"></span>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、text 参数必须传入非空值，只有字符串一个参数时，无需详细写明，如方式一<br>
|
||||
2、这种方法不需要传入 elem 参数<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、定义实例的方式 -->
|
||||
<div class="tutorial title">二、定义实例的方式</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z("#ZQrcodeTrigger2").on("click",function(){
|
||||
var urlString = Z("#ZQrcodeUrl2").val();
|
||||
|
||||
//定义实例的方式
|
||||
var newQrcode = new Z.Qrcode();
|
||||
newQrcode.elem= Z("#ZQrcodeCompleted2"); // 呈现二维码的地方
|
||||
newQrcode.text= urlString; // 需转换的字符串
|
||||
newQrcode.render= "canvas"; // 实现方式，可选："canvas"、"table"，默认为 "canvas"
|
||||
newQrcode.width= 256; // 二维码的宽度，默认为 256
|
||||
newQrcode.height= 256; // 二维码的高度，默认为 256
|
||||
newQrcode.typeNumber= 0; // < 1，则自动计算，最大值为40；数值越大，二维码密度越大，默认为 -1
|
||||
newQrcode.correctLevel= 2; // 取值范围[0-3]，4种计算方式，默认为2
|
||||
newQrcode.background= "#ffffff"; // 背景色，默认为 "#ffffff"
|
||||
newQrcode.foreground= "#000000" // 二维码颜色，默认为 "#000000"
|
||||
newQrcode.execute();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- 自定义 url -->
|
||||
<input id="ZQrcodeUrl2" type="text" class="z-input z-blue" value=""/>
|
||||
<!-- 触发按钮 -->
|
||||
<button id="ZQrcodeTrigger2" type="button" class="z-button z-blue z-w120">生成二维码</button><br><br>
|
||||
|
||||
<!-- 生成二维码图片区域 -->
|
||||
<span id="ZQrcodeCompleted2"></span>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、text 参数必须传入非空值<br>
|
||||
2、实例方式清晰明了，必须传入 elem 的值<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
</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()}
|
||||
@@ -0,0 +1,342 @@
|
||||
<#def title = "文件上传"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " 凡狐文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传等。"/>
|
||||
<#def prevUrl = "imageClipper.htm"/>
|
||||
<#def nextUrl = "uploadLarge.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
<!--
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
//-->
|
||||
</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", "tool", "upload")}
|
||||
|
||||
<!--主体-->
|
||||
<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>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 初始化上传控件 -->
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
var upload = new Z.Upload();
|
||||
upload.contextPath = "${context.getContextPath()}";
|
||||
upload.elem = "FUploadone";
|
||||
upload.onCompleted = function(fileUrl){Z("#FUploadoneCompleted").html("上传成功，URL："+fileUrl);};
|
||||
upload.execute();
|
||||
});
|
||||
</script>
|
||||
<!-- 上传文件按钮 -->
|
||||
<button id="FUploadone" type="button" class="z-button z-blue z-w120">上传文件</button><br><br>
|
||||
|
||||
<!-- 上传文件完成信息 -->
|
||||
<span id="FUploadoneCompleted"></span>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、最简文件上传，是初始化单个文件上传控件<br>
|
||||
2、参数只需要指定上传按钮id和上传成功事件onCompleted<br>
|
||||
3、在后台配置上下文环境属性upload.rootDir即可
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、单文件上传（先预览后上传） -->
|
||||
<div class="tutorial title">二、单文件上传（先预览后上传）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 初始化上传控件 -->
|
||||
<script>
|
||||
var uploadpreview = null;
|
||||
Z.onload(function()
|
||||
{
|
||||
uploadpreview = new Z.Upload();
|
||||
uploadpreview.elem = "FUploadonePreview";
|
||||
uploadpreview.contextPath = "${context.getContextPath()}";
|
||||
uploadpreview.onPreview = function(fileUrl){Z("#FUploadonePreviewLocation").html("<img src='"+fileUrl+"' width='80' height='80'>")};
|
||||
uploadpreview.onCompleted = function(fileUrl){Z("#FUploadonePreviewCompleted").html("上传成功，URL："+fileUrl);};
|
||||
uploadpreview.execute();
|
||||
});
|
||||
|
||||
function doUploadonePreview()
|
||||
{
|
||||
uploadpreview.upload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 上传文件预览 -->
|
||||
<div id="FUploadonePreviewLocation" class="z-w100p z-h80"></div>
|
||||
|
||||
<!-- 上传文件按钮 -->
|
||||
<button id="FUploadonePreview" type="button" class="z-button z-blue z-w120">选择文件</button>
|
||||
<button id="FUploadoneUpload" type="button" class="z-button z-w120" onclick="doUploadonePreview();">上传文件</button><br><br>
|
||||
|
||||
<!-- 上传文件完成信息 -->
|
||||
<span id="FUploadonePreviewCompleted"></span>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、最简文件上传，是初始化单个文件上传控件<br>
|
||||
2、参数只需要指定上传按钮id和上传成功事件onCompleted<br>
|
||||
3、在后台配置上下文环境属性upload.rootDir<br>
|
||||
4、如果需要分成两步，先预览后上传，则增加预览处理
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 三、多文件上传（先预览后上传，默认图片） -->
|
||||
<div class="tutorial title">三、多文件上传（先预览后上传，默认图片）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:200px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px">
|
||||
<!-- 初始化上传控件 -->
|
||||
<script>
|
||||
var uploadmultpreview = null;
|
||||
Z.onload(function()
|
||||
{
|
||||
uploadmultpreview = new Z.Uploadmult();
|
||||
uploadmultpreview.elem = "FUploadmultPreview";
|
||||
uploadmultpreview.onPreview = function(results)
|
||||
{
|
||||
uploadmultpreview.buildPreviewHtml("FUploadmultPreviewLocation");
|
||||
};
|
||||
uploadmultpreview.onCompleted = function(results)
|
||||
{
|
||||
var html = "";
|
||||
for (var i=0;i<results.length;i++){
|
||||
if (i != 0)
|
||||
html += "<br>";
|
||||
if (results[i].success)
|
||||
html += "上传成功，URL："+results[i].success;
|
||||
else
|
||||
html += "上传失败，原因："+results[i].error;
|
||||
}
|
||||
Z("#FUploadmultPreviewCompleted").html(html);
|
||||
};
|
||||
uploadmultpreview.execute();
|
||||
});
|
||||
|
||||
function doUploadmultPreview()
|
||||
{
|
||||
uploadmultpreview.upload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 上传文件预览 -->
|
||||
<div id="FUploadmultPreviewLocation" class="z-w100p z-h80"></div>
|
||||
|
||||
<!-- 上传文件按钮 -->
|
||||
<div class="z-relative-left z-w100p">
|
||||
<button id="FUploadmultPreview" class="z-button z-blue z-w120">选择文件</button>
|
||||
<button id="FUploadmultUpload" class="z-button z-w120" onclick="doUploadmultPreview();">上传文件</button>
|
||||
</div>
|
||||
|
||||
<!-- 上传文件完成信息 -->
|
||||
<div id="FUploadmultPreviewCompleted" class="z-relative-left z-w100p z-mg10 z-lh150p"></div>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、最简文件上传，是初始化多个文件上传控件<br>
|
||||
2、参数只需要指定上传按钮id和上传成功事件onCompleted<br>
|
||||
3、在后台配置上下文环境属性upload.rootDir<br>
|
||||
4、如果需要分成两步，先预览后上传，则增加预览处理
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 四、表单文件上传，可以含参数 -->
|
||||
<div class="tutorial title">四、表单文件上传，可以含参数</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16 z-lh300p" style="padding-top:40px;">
|
||||
<!-- 表单文件上传 -->
|
||||
<form action="uploadForm.htm" method="post" enctype="multipart/form-data">
|
||||
参数1：<input name="p1" class="z-input"><br>
|
||||
参数2：<input name="p2" class="z-input"><br>
|
||||
<button type="button" class="z-button z-blue z-w120" onclick="Z(this).next('input')[0].value=null;Z(this).next('input')[0].click();">选择文件</button>
|
||||
<input class="z-hide" type="file" name="file" accept="*.*" onchange="Z(this).next('span').text(this.value);" single>
|
||||
<span></span>
|
||||
<button type="submit" class="z-button">上传</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、表单文件上传的特点是支持参数一起传递，采用multipart/form-data格式<br>
|
||||
2、把真实的文件上传按钮隐藏起来（各浏览器表现不一样，太不美观），使用一个button代替<br>
|
||||
3、提供一个span用户显示文件选择的路径，这里也可以设计成预览<br>
|
||||
4、上传button，和提供一个Action处理数据。如下：
|
||||
<span class="z-text-prewrap z-pre">
|
||||
public class UploadFormAction implements Action, HttpdConstants
|
||||
{
|
||||
private static final Log log = LogFactory.getLog(UploadFormAction.class);
|
||||
|
||||
@Override
|
||||
public void execute(HttpRequest request) throws Exception
|
||||
{
|
||||
String rootDir = request.getContextAttributeString(_SERV_UPLOAD_ROOT_DIR_);
|
||||
if (Validates.isEmptyBlank(rootDir) || !Files.mkDirectory(rootDir))
|
||||
{
|
||||
request.setAlertMsg("未配置上传目录，不支持上传");
|
||||
return;
|
||||
}
|
||||
|
||||
HttpUploader uploader = new HttpUploader();
|
||||
|
||||
try
|
||||
{//最大支持2M
|
||||
uploader.parseHttpRequest(request, 2*1024*1024);
|
||||
|
||||
String fileExt = uploader.getFileExt();
|
||||
if(Validates.isEmpty(fileExt) || !Validates.isContain("jpg,png,gif", ",", fileExt))
|
||||
{
|
||||
request.setAlertMsg("仅支持图片，请重新上传");
|
||||
return;
|
||||
}
|
||||
|
||||
//文件字节比较
|
||||
byte[] content = uploader.getBytes();
|
||||
if (!(Bytes.isGIZ(content) || Bytes.isPNG(content) || Bytes.isJPG(content)))
|
||||
{
|
||||
request.setAlertMsg("图片格式不正确，请重新上传");
|
||||
return;
|
||||
}
|
||||
|
||||
//读出参数
|
||||
String param1 = uploader.getParameter("p1");
|
||||
String param2 = uploader.getParameter("p2");
|
||||
log.info("参数1："+param1+",参数2："+param2);
|
||||
|
||||
//保存文件
|
||||
String fileDir = Strings.addEndsWith(Files.toLinuxPath(rootDir), "/");
|
||||
String fileName = Ids.longId() + "." + fileExt;
|
||||
uploader.writeToFile(fileDir + fileName);
|
||||
|
||||
request.setAlertMsg("上传成功");
|
||||
}
|
||||
catch(Exception e)
|
||||
{
|
||||
request.setAlertMsg("上传失败");
|
||||
}
|
||||
finally
|
||||
{
|
||||
uploader.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</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()}
|
||||
@@ -0,0 +1,169 @@
|
||||
<#def title = "大文件上传"/>
|
||||
<#def keyword = "大文件上传 ZhiqimUI zhiqim"/>
|
||||
<#def desc = " 凡狐文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传，大文件上传断点续传（HTML5和Flash两种）等。"/>
|
||||
<#def prevUrl = "upload.htm"/>
|
||||
<#def nextUrl = "zeditor.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
${zhiqim_com_head_main()}
|
||||
<script>
|
||||
<!--
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
//-->
|
||||
</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", "tool", "uploadlarge")}
|
||||
|
||||
<!--主体-->
|
||||
<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;">
|
||||
凡狐大文件上传提供了（HTML5和Flash两种）的上传方式，支持断点续传、数据库存储文件碎片和文件信息，提供指定目录和文件名等功能。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、HTML5大文件断点续传 -->
|
||||
<div class="tutorial title">一、HTML5大文件断点续传</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px;">
|
||||
<!-- 初始化上传控件 -->
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
var upload = new Z.UploadLarge();
|
||||
upload.elem = "FUpload_HTML5";
|
||||
//upload.showResult = false;
|
||||
upload.contextPath = "${context.getContextPath()}";
|
||||
upload.onCompleted = function(fileId, fileName, fileUrl){};
|
||||
upload.execute();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- HTML5大文件断点续传 -->
|
||||
<button id="FUpload_HTML5" class="z-button z-red z-w120">HTML5上传</button>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、需要zhiqim_uploader组件，或者自己实现com.zhiqim.zhiqim.httpd.context.service.upload.Upload接口<br>
|
||||
2、设计目标是针对大文件分块上传，支持断点续传和秒传（MD5码相同认为已上传）<br>
|
||||
3、在后台配置上下文环境属性upload.rootDir<br>
|
||||
4、指定目录：upload.fileDir = "html5";
|
||||
5、指定文件格式：upload.setFileFormatExt("image/gif, image/jpeg");
|
||||
6、需支持HTML5协议的浏览器支持
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、Flash大文件断点续传 -->
|
||||
<div class="tutorial title">二、Flash大文件断点续传</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<ul class="zi-float-left">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:150px;">
|
||||
<div class="z-active z-pd10 z-px16" style="padding-top:40px;">
|
||||
<!-- 初始化上传控件 -->
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
var upload2 = new Z.UploadLarge();
|
||||
upload2.elem = "FUpload_flash";
|
||||
upload2.flash = true;
|
||||
upload2.flashPath = "${FUploadLarge.swf}";
|
||||
upload2.contextPath = "${context.getContextPath()}";
|
||||
upload2.onCompleted = function(fileId, fileName, fileUrl){};
|
||||
upload2.execute();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Flash大文件断点续传 -->
|
||||
<button id="FUpload_flash" class="z-button z-orange z-w120">Flash上传</button>
|
||||
</div>
|
||||
<div class="z-relative-left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、需要zhiqim_uploader组件，或者自己实现com.zhiqim.zhiqim.httpd.context.service.upload.Upload接口<br>
|
||||
2、设计目标是针对大文件分块上传，支持断点续传和秒传（MD5码相同认为已上传）<br>
|
||||
3、在后台配置上下文环境属性upload.rootDir<br>
|
||||
4、指定目录：upload.fileDir = "html5";
|
||||
5、指定文件格式描述：upload.setFileFormatDesc("PNG和GIF图片(*.png;*.gif)");
|
||||
6、指定文件格式：upload.setFileFormatExt("*.png;*.gif");
|
||||
7、需支持Flash的浏览器
|
||||
</div>
|
||||
</section>
|
||||
</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()}
|
||||
@@ -0,0 +1,106 @@
|
||||
<#def title = "富文本编辑器"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " 实现源码编辑、撤销、重做、字体样式、文本对齐、超链接、图片上传、复制粘贴等功能。"/>
|
||||
<#def prevUrl = "uploadLarge.htm"/>
|
||||
<#def nextUrl = "qrcode.htm"/>
|
||||
${zhiqim_com_head()}
|
||||
<#var zRTEditor.css=context.getRootPath("/src/zRTEditor/zRTEditor.css")/>
|
||||
<#var zRTEditor.js=context.getRootPath("/src/zRTEditor/zRTEditor.js")/>
|
||||
${Styles.src(zRTEditor.css)}
|
||||
${Scripts.src(zRTEditor.js)}
|
||||
${zhiqim_com_head_main()}
|
||||
${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", "tool", "zeditor")}
|
||||
|
||||
<!--主体-->
|
||||
<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="">效果预览</td>
|
||||
<!--
|
||||
<td width="50%">代码</td>
|
||||
-->
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="example">
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
var editor = new Z.ZhiqimEditor();
|
||||
editor.setId("test");
|
||||
editor.setAjaxClass("com.zhiqim.zhiqim.ui.FteUploadImagePresenter");
|
||||
editor.execute();
|
||||
});
|
||||
</script>
|
||||
<textarea id="test" name="test" class="z-textarea z-w100p z-h500"></textarea>
|
||||
<button type="button" class="z-button z-mg-t15" onclick='Z("#result").html(Z("#test").val())'>点击查看输入内容</button>
|
||||
|
||||
<div class="z-mg-t40 z-mg-b40">
|
||||
<div>查看结果</div>
|
||||
<pre id="result"></pre>
|
||||
</div>
|
||||
|
||||
</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()}
|
||||
在新工单中引用
屏蔽一个用户