first commit
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,613 @@
|
||||
<#def title = "颜色定义"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "颜色定义是指在ZhiqimUI的核心CSS文件中，默认提供的全局、白色、黑色和红、橙、黄、绿、青、蓝、紫共十种颜色的定义，包括字体颜色、背景颜色和边框颜色等，以及对应的样式名称。"/>
|
||||
<#def prevUrl = "css.htm"/>
|
||||
<#def nextUrl = "font.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "css", "color")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "颜色定义")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">颜色定义：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
颜色定义是指在ZhiqimUI的核心CSS文件中，默认提供的全局、白色、黑色和红、橙、黄、绿、青、蓝、紫共十种颜色的定义，包括字体颜色、背景颜色和边框颜色等，以及对应的样式名称。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#var colorMap = Jsons.toMapSS(context.getResourceString("/document/tutorial/ui/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><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><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><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><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><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><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><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><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><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><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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,250 @@
|
||||
<#def title = "全局定义"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "全局定义是指在全局定义里的标签缺省下的样式规则，包括三部分。"/>
|
||||
<#def prevUrl = "../index.htm"/>
|
||||
<#def nextUrl = "color.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "css", "global")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "全局定义")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">全局定义：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
全局定义是指在全局定义里的标签缺省下的样式规则，包括三部分：<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">
|
||||
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
|
||||
*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;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);/*iOS高亮色不透明*/
|
||||
height:100%;
|
||||
}
|
||||
|
||||
1、设置全局字体，防止一些设备上字体随屏幕放大而改变字体大小,如webkit的Safari
|
||||
2、指定文档隐藏X轴滚动条，Y轴滚动条自动
|
||||
3、当屏幕横坚切换时字体大小调整和以前一样
|
||||
4、iOS下链接点中是修改为黑色
|
||||
</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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,917 @@
|
||||
<#def title = "字体图标"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "“字体图标”是矢量图片按字体规范设计的一种新的图标，知启蒙字体图标放在/service/res/font/zhiqim.woff文件中，当前开发和收集的图标分"/>
|
||||
<#def prevUrl = "color.htm"/>
|
||||
<#def nextUrl = "ico.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "css", "font")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "字体图标")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">什么是“字体图标”？</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
“字体图标”是矢量图片按字体规范设计的一种新的图标，知启蒙字体图标放在/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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,470 @@
|
||||
<#def title = "表格样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "表格样式是指对表格增加样式规则，如指定表格边框、表格圆角、表格行线、表格单元格内边距、表格单元格字体大小、表格单元格文本对齐方式、表格单元格文本行高等，默认表格无边框。"/>
|
||||
<#def prevUrl = "block.htm"/>
|
||||
<#def nextUrl = "../js/js.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<style>
|
||||
.color{display:block;width:20px;height:20px !important;margin:15px 0 15px 10px !important;cursor:pointer;}
|
||||
</style>
|
||||
<script>
|
||||
function doSelectBorder(elem)
|
||||
{
|
||||
Z(elem).parent().parent().next("section > div > table").each(function(table)
|
||||
{
|
||||
Z(table).removeClass("z-bordered");
|
||||
Z(table).removeClass("z-bordered-line");
|
||||
|
||||
if (Z.Validates.isNotEmpty(elem.value))
|
||||
Z(table).addClass(elem.value);
|
||||
else
|
||||
{//删除可能的颜色
|
||||
Z(table).removeClass("z-red");
|
||||
Z(table).removeClass("z-orange");
|
||||
Z(table).removeClass("z-yellow");
|
||||
Z(table).removeClass("z-green");
|
||||
Z(table).removeClass("z-cyan");
|
||||
Z(table).removeClass("z-blue");
|
||||
Z(table).removeClass("z-purple");
|
||||
Z(table).removeClass("z-bd-rd5");
|
||||
Z(table).removeClass("z-bd-rd8");
|
||||
Z(table).removeClass("z-bd-rd10");
|
||||
}
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent());
|
||||
}
|
||||
|
||||
function doSelectRadius(elem)
|
||||
{
|
||||
Z(elem).parent().parent().next("section > div > table").each(function(table)
|
||||
{
|
||||
Z(table).removeClass("z-bd-rd5");
|
||||
Z(table).removeClass("z-bd-rd8");
|
||||
Z(table).removeClass("z-bd-rd10");
|
||||
|
||||
if (Z.Validates.isNotEmpty(elem.value))
|
||||
Z(table).addClass(elem.value);
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent());
|
||||
}
|
||||
|
||||
function doSelectColor(elem, color)
|
||||
{
|
||||
Z(elem).parent().next("section > div > table").each(function(table)
|
||||
{
|
||||
Z(table).removeClass("z-red");
|
||||
Z(table).removeClass("z-orange");
|
||||
Z(table).removeClass("z-yellow");
|
||||
Z(table).removeClass("z-green");
|
||||
Z(table).removeClass("z-cyan");
|
||||
Z(table).removeClass("z-blue");
|
||||
Z(table).removeClass("z-purple");
|
||||
|
||||
if (Z.Validates.isNotEmpty(color))
|
||||
Z(table).addClass(color);
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent());
|
||||
}
|
||||
|
||||
function doSelectPadding(elem)
|
||||
{
|
||||
Z(elem).parent().parent().next("section > div > table").each(function(table)
|
||||
{
|
||||
Z(table).removeClass("z-pd3");
|
||||
Z(table).removeClass("z-pd10");
|
||||
Z(table).removeClass("z-pd16");
|
||||
Z(table).removeClass("z-pd20");
|
||||
|
||||
if (Z.Validates.isNotEmpty(elem.value))
|
||||
Z(table).addClass(elem.value);
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent());
|
||||
}
|
||||
|
||||
function doSelectPx(elem)
|
||||
{
|
||||
Z(elem).parent().parent().next("section > div > table").each(function(table)
|
||||
{
|
||||
Z(table).removeClass("z-px16");
|
||||
Z(table).removeClass("z-px14");
|
||||
Z(table).removeClass("z-px12");
|
||||
Z(table).removeClass("z-px18");
|
||||
|
||||
if (Z.Validates.isNotEmpty(elem.value))
|
||||
Z(table).addClass(elem.value);
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent());
|
||||
}
|
||||
|
||||
function doSelectAlign(elem)
|
||||
{
|
||||
Z(elem).parent().parent().next("section > div > table").each(function(table)
|
||||
{
|
||||
Z(table).removeClass("z-text-left");
|
||||
Z(table).removeClass("z-text-center");
|
||||
Z(table).removeClass("z-text-right");
|
||||
|
||||
if (Z.Validates.isNotEmpty(elem.value))
|
||||
Z(table).addClass(elem.value);
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent());
|
||||
}
|
||||
|
||||
function doSelectLh(elem)
|
||||
{
|
||||
Z(elem).parent().parent().next("section > div > table").each(function(table)
|
||||
{
|
||||
Z(table).removeClass("z-lh100p");
|
||||
Z(table).removeClass("z-lh150p");
|
||||
Z(table).removeClass("z-lh200p");
|
||||
Z(table).removeClass("z-lh30");
|
||||
|
||||
if (Z.Validates.isNotEmpty(elem.value))
|
||||
Z(table).addClass(elem.value);
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent());
|
||||
}
|
||||
|
||||
function doRepairRadius(elem)
|
||||
{
|
||||
var $tr = Z(elem).parent().parent().parent().next("section > div > table > tbody > tr:last-child");
|
||||
var $first = $tr.find(" > td:first-child");
|
||||
var $last = $tr.find(" > td:last-child");
|
||||
|
||||
if (elem.checked)
|
||||
{
|
||||
$first.addClass("z-bd-rd-bl8");
|
||||
$last.addClass("z-bd-rd-br8");
|
||||
}
|
||||
else
|
||||
{
|
||||
$first.removeClass("z-bd-rd-bl8");
|
||||
$last.removeClass("z-bd-rd-br8");
|
||||
}
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent().parent());
|
||||
}
|
||||
|
||||
function doRepairLeftBorder(elem)
|
||||
{
|
||||
var $tr = Z(elem).parent().parent().parent().next("section > div > table > tbody > tr:first-child");
|
||||
var $first = $tr.next("tr>td:first-child");
|
||||
var $second = $tr.next("tr").next("tr>td:first-child");
|
||||
|
||||
if (elem.checked)
|
||||
{
|
||||
$first.addClass("zi-bd-l");
|
||||
$second.addClass("zi-bd-l");
|
||||
}
|
||||
else
|
||||
{
|
||||
$first.removeClass("zi-bd-l");
|
||||
$second.removeClass("zi-bd-l");
|
||||
}
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent().parent().parent());
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "css", "table")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "表格样式")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">表格样式：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
表格样式是指对表格增加样式规则，如指定表格边框、表格圆角、表格行线、表格单元格内边距、表格单元格字体大小、表格单元格文本对齐方式、表格单元格文本行高等，默认表格无边框。
|
||||
另外，CSS对底部圆角当有背景时需要手动对第一和最后单元格补圆角，当圆角首列合并单元格时也需要对被合并的行第一单元格补左边线。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#var colorMap = Jsons.toMapSS(context.getResourceString("/document/tutorial/ui/css/zhiqim.pre.json", "UTF-8"))/>
|
||||
|
||||
<#-- 一、表格边框 -->
|
||||
<div class="tutorial title">一、表格边框（默认灰色无圆角，单元格内边框10px）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<span class="z-px14">边框：</span>
|
||||
<select data-role="z-select" class="z-select z-relative-left z-w80 z-h30 z-mg-t8" onchange="doSelectBorder(this);">
|
||||
<option value="z-bordered">边框</option>
|
||||
<option value="z-bordered-line">边线</option>
|
||||
<option value="">无边框</option>
|
||||
</select>
|
||||
<select data-role="z-select" class="z-select z-relative-left z-w80 z-h30 z-mg-t8 z-mg-l-1" onchange="doSelectRadius(this);">
|
||||
<option value="">无圆角</option>
|
||||
<option value="z-bd-rd5">5像素</option>
|
||||
<option value="z-bd-rd8">8像素</option>
|
||||
<option value="z-bd-rd10">10像素</option>
|
||||
</select>
|
||||
<span class="z-px14">颜色：</span>
|
||||
<span class="color" style="background-color:${colorMap.get("btnBdColor")}" onclick="doSelectColor(this, '');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("redBdColor")}" onclick="doSelectColor(this, 'z-red');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("orangeBdColor")}" onclick="doSelectColor(this, 'z-orange');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("yellowBdColor")}" onclick="doSelectColor(this, 'z-yellow');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("greenBdColor")}" onclick="doSelectColor(this, 'z-green');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("cyanBdColor")}" onclick="doSelectColor(this, 'z-cyan');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("blueBdColor")}" onclick="doSelectColor(this, 'z-blue');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("purpleBdColor")}" onclick="doSelectColor(this, 'z-purple');"></span>
|
||||
<span class="z-px14">内边距：</span>
|
||||
<select data-role="z-select" class="z-select z-relative-left z-w80 z-h30 z-mg-t8" onchange="doSelectPadding(this);">
|
||||
<option value="z-pd10">z-pd10</option>
|
||||
<option value="z-pd3">z-pd3</option>
|
||||
<option value="z-pd16">z-pd16</option>
|
||||
<option value="z-pd20">z-pd20</option>
|
||||
<option value="">无边距</option>
|
||||
</select>
|
||||
<ul class="zi-float-right">
|
||||
<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">
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">示例</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="30%">用户名称</td>
|
||||
<td width="30%">&价格</td>
|
||||
<td width="*">操作</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin</td>
|
||||
<td>10000</td>
|
||||
<td>查看</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin</td>
|
||||
<td>10000</td>
|
||||
<td>查看</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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">默认有边框表格，格式为[class="z-table z-bordered"]<br>
|
||||
1、[z-table]表示表格使用知启蒙表格样式<br>
|
||||
2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
|
||||
3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、表格单元格文本设置 -->
|
||||
<div class="tutorial title">二、表格单元格文本设置（默认左对齐、字体继承14px、行高继承120%）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<span class="z-px14">单元格对齐：</span>
|
||||
<select data-role="z-select" class="z-select z-relative-left z-w100 z-h30 z-mg-t8" onchange="doSelectAlign(this);">
|
||||
<option value="">默认左对齐</option>
|
||||
<option value="z-text-left">左对齐</option>
|
||||
<option value="z-text-center">居中</option>
|
||||
<option value="z-text-right">右对齐</option>
|
||||
</select>
|
||||
<span class="z-px14">字体大小：</span>
|
||||
<select data-role="z-select" class="z-select z-relative-left z-w90 z-h30 z-mg-t8" onchange="doSelectPx(this);">
|
||||
<option value="">默认大小</option>
|
||||
<option value="z-px14">z-px14</option>
|
||||
<option value="z-px16">z-px16</option>
|
||||
<option value="z-px12">z-px12</option>
|
||||
<option value="z-px18">z-px18</option>
|
||||
</select>
|
||||
<span class="z-px14">字体行高：</span>
|
||||
<select data-role="z-select" class="z-select z-relative-left z-w90 z-h30 z-mg-t8" onchange="doSelectLh(this);">
|
||||
<option value="">默认大小</option>
|
||||
<option value="z-lh100p">z-lh100p</option>
|
||||
<option value="z-lh150p">z-lh150p</option>
|
||||
<option value="z-lh200p">z-lh200p</option>
|
||||
<option value="z-lh30">z-lh30</option>
|
||||
</select>
|
||||
<ul class="zi-float-right">
|
||||
<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">
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">示例</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="30%">用户名称</td>
|
||||
<td width="30%">&价格</td>
|
||||
<td width="*">操作</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin</td>
|
||||
<td>10000</td>
|
||||
<td>查看<br>修改<br>删除</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>admin</td>
|
||||
<td>10000</td>
|
||||
<td>查看<br>修改<br>删除</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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">默认有边框表格，格式为[class="z-table z-bordered"]<br>
|
||||
1、[z-table]表示表格使用知启蒙表格样式<br>
|
||||
2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
|
||||
3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
|
||||
4、单元格文本对齐三种左对齐[z-text-left]、居中[z-text-center]、右对齐[z-text-right]，未配置默认左对齐<br>
|
||||
5、单元格文本字体大小，如[z-px16]、[z-px18]等，可以去[<a href="text.htm">文本样式</a>]查看更多定义<br>
|
||||
6、单元格文本行高，如百分比行高[z-lh150p]、[z-lh200p]和固定行高[z-lh30]等，可以去[<a href="text.htm">文本样式</a>]查看更多定义<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 三、表格圆角最后一行有背景补圆角 -->
|
||||
<div class="tutorial title">三、表格圆角边框最后一行有背景补圆角</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<span><input type="checkbox" checked data-role="z-checkbox" data-class="z-cyan" class="z-mg-b3 z-mg-r10" onchange="doRepairRadius(this);">补底部圆角</span>
|
||||
<ul class="zi-float-right">
|
||||
<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">
|
||||
<table class="z-table z-bordered z-bd-rd8 z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3">示例</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="30%">序号</td>
|
||||
<td width="30%">用户名称</td>
|
||||
<td width="*">操作</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>admin</td>
|
||||
<td>查看</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>admin</td>
|
||||
<td>查看</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td colspan="3" class="z-bd-rd-bl8 z-bd-rd-br8">脚注</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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">圆角边框时，最后一行有背景时，需要对当前行第一列和最后一列增加[class="z-bd-rd-bl8"]和[class="z-bd-rd-br8"]<br>
|
||||
1、[z-table]表示表格使用知启蒙表格样式<br>
|
||||
2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
|
||||
3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
|
||||
4、[z-bd-rd8]表示圆角8像素，表格支持圆角5像素、8像素、10像素三种<br>
|
||||
5、[z-bd-rd-bl8 z-bd-rd-br8]表示脚注最后一行，也增加下左和下右8像素圆角，这样就不会被背景遮住圆角
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 四、表格圆角边框第一列有向下合并单元格时被合并行首列补左边线 -->
|
||||
<div class="tutorial title">四、表格圆角边框第一列有向下合并单元格时，被合并行剩余首列补左边线</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<span><input type="checkbox" checked data-role="z-checkbox" data-class="z-cyan" class="z-mg-b3 z-mg-r10" onchange="doRepairLeftBorder(this);">补左边线</span>
|
||||
<ul class="zi-float-right">
|
||||
<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">
|
||||
<table class="z-table z-bordered z-bd-rd8 z-pd10">
|
||||
<tr>
|
||||
<td width="30%" rowspan="3">示例</td>
|
||||
<td width="30%">用户名称</td>
|
||||
<td width="*">操作</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="zi-bd-l">admin</td>
|
||||
<td>查看</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="zi-bd-l">admin</td>
|
||||
<td>查看</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>脚注</td>
|
||||
<td>admin</td>
|
||||
<td>查看</td>
|
||||
</tr>
|
||||
</table>
|
||||
</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">圆角边框时，如果有第一列向下合并单元格的情况，被合并的行的第一列要求增加左边线，格式为[class="zi-bd-l"]，有颜色还要加上颜色[class="zi-bd-l z-red"]<br>
|
||||
1、[z-table]表示表格使用知启蒙表格样式<br>
|
||||
2、[z-bordered]表示表格有边框，默认是灰色[#d3d3d3]，可选支持7种颜色<br>
|
||||
3、[z-pd10]表示单元格内边距，这里只列出了几个内边框值，可以去[<a href="block.htm">块样式</a>]查看更多定义<br>
|
||||
4、[z-bd-rd8]表示圆角8像素，表格支持圆角5像素、8像素、10像素三种<br>
|
||||
5、第二行和第三行的第一列被第一行第一列向下合并了，因此第二行和第三行剩余的第一列要求增加左边线，格式为[class="zi-bd-l"]
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,782 @@
|
||||
<#def title = "文本样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等"/>
|
||||
<#def prevUrl = "ico.htm"/>
|
||||
<#def nextUrl = "block.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "css", "text")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "文本样式")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">文本样式：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等。
|
||||
</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-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-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:24px;color:#333;line-height:150%;}</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:22px;color:#333;line-height:150%;}</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:20px;color:#333;line-height:150%;}</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:24px;color:#333;line-height:150%;display:block;margin:14px 0;font-weight:bold;}</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:22px;color:#333;line-height:150%;display:block;margin:14px 0;font-weight:bold;}</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:20px;color:#333;line-height:150%;display:block;margin:14px 0;font-weight:bold;}</pre></td>
|
||||
<td><span class="z-h3">微软雅黑字体，20号字体<br>微软雅黑字体，20号字体</span></td>
|
||||
<td>模拟H3，当H3被覆盖时可以使用z-h3</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 五、正文文本字体大小（px10-px30） -->
|
||||
<div class="tutorial title">五、正文文本字体大小（px10-px30），其中z-为常用，zi-为优先</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">名称</td>
|
||||
<td width="36%">样式</td>
|
||||
<td width="*">举例</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px10</td>
|
||||
<td><pre class="z-text-preline">.z-px10{font-size:10px;}</pre></td>
|
||||
<td><span class="z-px10">微软雅黑字体，10号字体<br>微软雅黑字体，10号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px11</td>
|
||||
<td><pre class="z-text-preline">.z-px11{font-size:11px;}</pre></td>
|
||||
<td><span class="z-px11">微软雅黑字体，11号字体<br>微软雅黑字体，11号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px12</td>
|
||||
<td><pre class="z-text-preline">.z-px12{font-size:12px;}</pre></td>
|
||||
<td><span class="z-px12">微软雅黑字体，12号字体<br>微软雅黑字体，12号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px13</td>
|
||||
<td><pre class="z-text-preline">.z-px13{font-size:13px;}</pre></td>
|
||||
<td><span class="z-px13">微软雅黑字体，13号字体<br>微软雅黑字体，13号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px14</td>
|
||||
<td><pre class="z-text-preline">.z-px14{font-size:14px;}</pre></td>
|
||||
<td><span class="z-px14">微软雅黑字体，14号字体<br>微软雅黑字体，14号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px15</td>
|
||||
<td><pre class="z-text-preline">.z-px15{font-size:15px;}</pre></td>
|
||||
<td><span class="z-px15">微软雅黑字体，15号字体<br>微软雅黑字体，15号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px16</td>
|
||||
<td><pre class="z-text-preline">.z-px16{font-size:16px;}</pre></td>
|
||||
<td><span class="z-px16">微软雅黑字体，16号字体<br>微软雅黑字体，16号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px17</td>
|
||||
<td><pre class="z-text-preline">.z-px17{font-size:17px;}</pre></td>
|
||||
<td><span class="z-px17">微软雅黑字体，17号字体<br>微软雅黑字体，17号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px18</td>
|
||||
<td><pre class="z-text-preline">.z-px18{font-size:18px;}</pre></td>
|
||||
<td><span class="z-px18">微软雅黑字体，18号字体<br>微软雅黑字体，18号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px19</td>
|
||||
<td><pre class="z-text-preline">.z-px19{font-size:19px;}</pre></td>
|
||||
<td><span class="z-px19">微软雅黑字体，19号字体<br>微软雅黑字体，19号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px20</td>
|
||||
<td><pre class="z-text-preline">.z-px20{font-size:20px;}</pre></td>
|
||||
<td><span class="z-px20">微软雅黑字体，20号字体<br>微软雅黑字体，20号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px22</td>
|
||||
<td><pre class="z-text-preline">.z-px22{font-size:22px;}</pre></td>
|
||||
<td><span class="z-px22 z-lh120p">微软雅黑字体，22号字体<br>微软雅黑字体，22号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px24</td>
|
||||
<td><pre class="z-text-preline">.z-px24{font-size:24px;}</pre></td>
|
||||
<td><span class="z-px24 z-lh120p">微软雅黑字体，24号字体<br>微软雅黑字体，24号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px26</td>
|
||||
<td><pre class="z-text-preline">.z-px26{font-size:26px;}</pre></td>
|
||||
<td><span class="z-px26 z-lh120p">微软雅黑字体，26号字体<br>微软雅黑字体，26号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-px30</td>
|
||||
<td><pre class="z-text-preline">.z-px30{font-size:30px;}</pre></td>
|
||||
<td><span class="z-px30 z-lh120p">微软雅黑字体，30号字体<br>微软雅黑字体，30号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="zi-text-cyan">以下为文本优先zi-px10 - zi-px30</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px10</td>
|
||||
<td><pre class="z-text-preline">.zi-px10{font-size:10px !important;}</pre></td>
|
||||
<td><span class="z-px10">微软雅黑字体，10号字体<br>微软雅黑字体，10号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px11</td>
|
||||
<td><pre class="z-text-preline">.zi-px11{font-size:11px !important;}</pre></td>
|
||||
<td><span class="z-px11">微软雅黑字体，11号字体<br>微软雅黑字体，11号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px12</td>
|
||||
<td><pre class="z-text-preline">.zi-px12{font-size:12px !important;}</pre></td>
|
||||
<td><span class="z-px12">微软雅黑字体，12号字体<br>微软雅黑字体，12号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px13</td>
|
||||
<td><pre class="z-text-preline">.zi-px13{font-size:13px !important;}</pre></td>
|
||||
<td><span class="z-px13">微软雅黑字体，13号字体<br>微软雅黑字体，13号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px14</td>
|
||||
<td><pre class="z-text-preline">.zi-px14{font-size:14px !important;}</pre></td>
|
||||
<td><span class="z-px14">微软雅黑字体，14号字体<br>微软雅黑字体，14号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px15</td>
|
||||
<td><pre class="z-text-preline">.zi-px15{font-size:15px !important;}</pre></td>
|
||||
<td><span class="z-px15">微软雅黑字体，15号字体<br>微软雅黑字体，15号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px16</td>
|
||||
<td><pre class="z-text-preline">.zi-px16{font-size:16px !important;}</pre></td>
|
||||
<td><span class="z-px16">微软雅黑字体，16号字体<br>微软雅黑字体，16号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px17</td>
|
||||
<td><pre class="z-text-preline">.zi-px17{font-size:17px !important;}</pre></td>
|
||||
<td><span class="z-px17">微软雅黑字体，17号字体<br>微软雅黑字体，17号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px18</td>
|
||||
<td><pre class="z-text-preline">.zi-px18{font-size:18px !important;}</pre></td>
|
||||
<td><span class="z-px18">微软雅黑字体，18号字体<br>微软雅黑字体，18号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px19</td>
|
||||
<td><pre class="z-text-preline">.zi-px19{font-size:19px !important;}</pre></td>
|
||||
<td><span class="z-px19">微软雅黑字体，19号字体<br>微软雅黑字体，19号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px20</td>
|
||||
<td><pre class="z-text-preline">.zi-px20{font-size:20px !important;}</pre></td>
|
||||
<td><span class="z-px20">微软雅黑字体，20号字体<br>微软雅黑字体，20号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px22</td>
|
||||
<td><pre class="z-text-preline">.zi-px22{font-size:22px !important;}</pre></td>
|
||||
<td><span class="z-px22">微软雅黑字体，22号字体<br>微软雅黑字体，22号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px24</td>
|
||||
<td><pre class="z-text-preline">.zi-px24{font-size:24px !important;}</pre></td>
|
||||
<td><span class="z-px24 z-lh120p">微软雅黑字体，24号字体<br>微软雅黑字体，24号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px26</td>
|
||||
<td><pre class="z-text-preline">.zi-px26{font-size:26px !important;}</pre></td>
|
||||
<td><span class="z-px26 z-lh120p">微软雅黑字体，26号字体<br>微软雅黑字体，26号字体</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.zi-px30</td>
|
||||
<td><pre class="z-text-preline">.zi-px30{font-size:30px !important;}</pre></td>
|
||||
<td><span class="z-px30 z-lh120p">微软雅黑字体，30号字体<br>微软雅黑字体，30号字体</span></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="36%">样式</td>
|
||||
<td width="*">举例</td>
|
||||
<td width="20%">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="zi-text-cyan">行高定义lh10-lh40</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh10<br>.zi-lh10</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh10{height:10px;}
|
||||
.zi-lh10{height:10px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh10">行高<br>行高</div></td>
|
||||
<td>行高10px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh12<br>.zi-lh12</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh12{height:12px;}
|
||||
.zi-lh12{height:12px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh12">行高<br>行高</div></td>
|
||||
<td>行高12px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh14<br>.zi-lh14</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh14{height:14px;}
|
||||
.zi-lh14{height:14px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh14">行高<br>行高</div></td>
|
||||
<td>行高14px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh15<br>.zi-lh15</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh15{height:15px;}
|
||||
.zi-lh15{height:15px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh15">行高<br>行高</div></td>
|
||||
<td>行高15px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh16<br>.zi-lh16</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh16{height:16px;}
|
||||
.zi-lh16{height:16px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh16">行高<br>行高</div></td>
|
||||
<td>行高16px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh18<br>.zi-lh18</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh18{height:18px;}
|
||||
.zi-lh18{height:18px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh18">行高<br>行高</div></td>
|
||||
<td>行高18px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh20<br>.zi-lh20</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh20{height:20px;}
|
||||
.zi-lh20{height:20px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh20">行高<br>行高</div></td>
|
||||
<td>行高20px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh22<br>.zi-lh22</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh22{height:22px;}
|
||||
.zi-lh22{height:22px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh22">行高<br>行高</div></td>
|
||||
<td>行高22px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh25<br>.zi-lh25</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh25{height:25px;}
|
||||
.zi-lh25{height:25px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh25">行高<br>行高</div></td>
|
||||
<td>行高25px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh28<br>.zi-lh28</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh28{height:28px;}
|
||||
.zi-lh28{height:28px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh28">行高<br>行高</div></td>
|
||||
<td>行高28px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh30<br>.zi-lh30</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh30{height:30px;}
|
||||
.zi-lh30{height:30px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh30">行高<br>行高</div></td>
|
||||
<td>行高30px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh35<br>.zi-lh35</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh35{height:35px;}
|
||||
.zi-lh35{height:35px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh35">行高<br>行高</div></td>
|
||||
<td>行高35px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh40<br>.zi-lh40</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh40{height:40px;}
|
||||
.zi-lh40{height:40px !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh40">行高<br>行高</div></td>
|
||||
<td>行高40px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="zi-text-cyan">行高百分比</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh100p<br>.zi-lh100p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh100p{line-height:100%;}
|
||||
.zi-lh100p{line-height:100% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh100p">行高<br>行高</div></td>
|
||||
<td>行高100%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh110p<br>.zi-lh110p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh110p{line-height:110%;}
|
||||
.zi-lh110p{line-height:110% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh110p">行高<br>行高</div></td>
|
||||
<td>行高110%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh120p<br>.zi-lh120p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh120p{line-height:120%;}
|
||||
.zi-lh120p{line-height:120% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh120p">行高<br>行高</div></td>
|
||||
<td>行高120%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh130p<br>.zi-lh130p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh130p{line-height:130%;}
|
||||
.zi-lh130p{line-height:130% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh130p">行高<br>行高</div></td>
|
||||
<td>行高130%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh140p<br>.zi-lh140p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh140p{line-height:140%;}
|
||||
.zi-lh140p{line-height:140% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh140p">行高<br>行高</div></td>
|
||||
<td>行高140%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh150p<br>.zi-lh150p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh150p{line-height:150%;}
|
||||
.zi-lh150p{line-height:150% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh150p">行高<br>行高</div></td>
|
||||
<td>行高150%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh180p<br>.zi-lh180p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh180p{line-height:180%;}
|
||||
.zi-lh180p{line-height:180% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh180p">行高<br>行高</div></td>
|
||||
<td>行高180%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh200p<br>.zi-lh200p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh200p{line-height:200%;}
|
||||
.zi-lh200p{line-height:200% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh200p">行高<br>行高</div></td>
|
||||
<td>行高200%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">.z-lh250p<br>.zi-lh250p</td>
|
||||
<td><pre class="z-text-preline">
|
||||
.z-lh250p{line-height:250%;}
|
||||
.zi-lh250p{line-height:250% !important;}
|
||||
</pre></td>
|
||||
<td><div class="z-bd z-lh250p">行高<br>行高</div></td>
|
||||
<td>行高250%</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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</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,169 @@
|
||||
<#def title = "警告对话框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "警告对话框是自定义对话框的一种参考alert方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的警告对话框，支持设置警告内容和点击确定后回调函数。"/>
|
||||
<#def prevUrl = "dialog.htm"/>
|
||||
<#def nextUrl = "confirm.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "dialog", "alert")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "警告对话框")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">警告对话框：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
警告对话框是自定义对话框的一种参考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.alert('这是一个告警!这是一个告警!这是一个告警!这是一个告警!这是一个告警!');">点我弹出多行告警选择框</a>
|
||||
<a href="javascript:void(0);" onclick="Z.alert('这是一个告警!这是一个告警!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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,171 @@
|
||||
<#def title = "询问对话框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "询问对话框是自定义对话框的一种参考confirm方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的确认对话框，支持设置确认内容和点击确定后回调函数，点击取消不向下处理。"/>
|
||||
<#def prevUrl = "alert.htm"/>
|
||||
<#def nextUrl = "prompt.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "dialog", "confirm")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "询问对话框")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">询问对话框：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
询问对话框是自定义对话框的一种参考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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,434 @@
|
||||
<#def title = "自定义对话框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "自定义对话框是指根据业务要求，自动组装对话框参数，完成对话框的弹出。自定义对话框支持的参数有标题、宽度、高度、边框颜色、目标区域、指定弹出HTML、指定弹出URL等一系列参数，是各种对话框的基础。"/>
|
||||
<#def prevUrl = "../form/calendar.htm"/>
|
||||
<#def nextUrl = "alert.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "dialog", "dialog")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "自定义对话框")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">自定义对话框：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
自定义对话框是指根据业务要求，自动组装对话框参数，完成对话框的弹出。自定义对话框支持的参数有标题、宽度、高度、边框颜色、目标区域、指定弹出HTML、指定弹出URL等一系列参数，是各种对话框的基础。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、弹出HTML内容（对象方式） -->
|
||||
<div class="tutorial title">一、弹出HTML内容（对象方式）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<span class="zi-text-cyan">默认有背景边框、有遮罩层、固定中间位置</span>
|
||||
<ul class="zi-float-right">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 example">
|
||||
<script>
|
||||
function openDialogText()
|
||||
{//标题、文本HTML、宽度和高度和固定位置五个值是必须的
|
||||
var dialog = new Z.Dialog();
|
||||
dialog.title = "我是标题";
|
||||
dialog.text = "<table class='z-table z-w100p z-h100p'><tr><td class='z-text-center'>我是内容</td></tr></table>";
|
||||
dialog.width = 500;
|
||||
dialog.height = 200;
|
||||
dialog.fixed = true;
|
||||
dialog.execute();
|
||||
}
|
||||
</script>
|
||||
<br><br>
|
||||
<a href="javascript:void(0);" onclick="openDialogText()">点我弹出对话框</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="relative left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh150p">
|
||||
最简单的弹出对话框，要求标题、文本HTML、宽度和高度和固定位置五个值：<br>
|
||||
1、title指明对话框标题<br>
|
||||
2、text指定弹出对话框文本HTML<br>
|
||||
3、width指定对话框宽度<br>
|
||||
4、height指定对话框高度<br>
|
||||
5、fixed指定对话框在文档的位置固定<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、弹出HTML内容（函数方式） -->
|
||||
<div class="tutorial title">二、弹出HTML内容（函数方式）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<span class="zi-text-cyan">指定有背景边框、无遮罩层，固定位置</span>
|
||||
<ul class="zi-float-right">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 example">
|
||||
<script>
|
||||
function openDialogText2()
|
||||
{//设置参数方式并立即执行
|
||||
Z.dialog({
|
||||
title: "我是标题",
|
||||
text: "<table class='z-table z-w100p z-h100p'><tr><td class='z-text-center'>我是内容</td></tr></table>",
|
||||
width: 500,
|
||||
height: 200,
|
||||
fixed: true,
|
||||
shadow: false
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<br><br>
|
||||
<a href="javascript:void(0);" onclick="openDialogText2()">调用Z.dialog函数弹出对话框</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="relative left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p"><br>
|
||||
1、最简单的弹出对话框，要求标题、文本HTML、宽度和高度四个值<br>
|
||||
2、这里定义了shadow: false表示无遮罩层<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 三、弹出HTML内容（函数方式） -->
|
||||
<div class="tutorial title">三、弹出HTML内容（函数方式）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<span class="zi-text-cyan">指定无背景边框、无遮罩层，不固定位置（随滚动条滚动）</span>
|
||||
<ul class="zi-float-right">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 example">
|
||||
<script>
|
||||
function openDialogText3()
|
||||
{//设置参数方式并立即执行
|
||||
Z.dialog({
|
||||
title: "我是标题",
|
||||
text: "<table class='z-table z-w100p z-h100p'><tr><td class='z-text-center'>我是内容</td></tr></table>",
|
||||
width: 500,
|
||||
height: 200,
|
||||
hasBackground: false,
|
||||
shadow: false
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<br><br>
|
||||
<a href="javascript:void(0);" onclick="openDialogText3()">调用Z.dialog函数弹出对话框</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="relative left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p"><br>
|
||||
1、最简单的弹出对话框，要求标题、文本HTML、宽度和高度四个值<br>
|
||||
2、这里定义了hasBackground: false表示无背景边框<br>
|
||||
3、这里定义了shadow: false表示无遮罩层<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 四、弹出URL（最简方式） -->
|
||||
<div class="tutorial title">四、弹出URL（最简方式）</div>
|
||||
|
||||
<div class="z-tabnav z-bordered z-mg-t20" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<span class="zi-text-cyan">嵌入一个新的页面（页面内提供确定和关闭按钮）</span>
|
||||
<ul class="zi-float-right">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 example">
|
||||
<script>
|
||||
function openDialogUrl()
|
||||
{//标题、URL、宽度和高度四个值是必须的
|
||||
var dialog = new Z.Dialog();
|
||||
dialog.title = "我是标题";
|
||||
dialog.url = "dialog_url.htm";
|
||||
dialog.width = 500;
|
||||
dialog.height = 300;
|
||||
dialog.fixed = true;
|
||||
dialog.execute();
|
||||
}
|
||||
</script>
|
||||
<br><br>
|
||||
<a href="javascript:void(0);" onclick="openDialogUrl()">点我弹出对话框，有控制台</a>
|
||||
</div>
|
||||
|
||||
<div class="relative left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、最简单的弹出URL对话框，要求标题、URL、宽度和高度四个值<br>
|
||||
2、在弹出页中编写[关闭]按钮，通过JS关闭方法：parent.Z.Dialog.close(location.hash);或全部关闭parent.Z.Dialog.close();，如：<br>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
<button class="z-button z-blue" onclick="parent.Z.Dialog.close(location.hash);">关闭</button>
|
||||
<button class="z-button z-blue" onclick="parent.Z.Dialog.close();">关闭</button>
|
||||
</span>
|
||||
3、设计控制台方式：通过设计两个DIV，第一个DIV指定块溢出为auto或scroll，第二个DIV底部绝对定位高度50，两个DIV的高度之和=dialog.height。如下：
|
||||
<span class="z-text-prewrap z-pre">
|
||||
<div class="z-w100p z-overflow-x-hidden z-overflow-y-scroll" style="height:250px;">
|
||||
...正文内容...
|
||||
</div>
|
||||
<div class="z-absolute z-w100p z-h50" style="bottom:0;left:0;background-color:#e9f3fd;">
|
||||
<div class="z-button z-blue z-w100 z-absolute" style="left:160px;top:12px;" onclick="alert('我点了确定!');">确定</div>
|
||||
<div class="z-button z-absolute" style="right:160px;top:12px;" onclick="parent.Z.Dialog.close();">关闭</div>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 五、弹出URL（设置参数） -->
|
||||
<div class="tutorial title">五、弹出URL（设置参数）</div>
|
||||
|
||||
|
||||
<div class="z-tabnav z-bordered z-mg-t20" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<span class="zi-text-cyan">嵌入一个新的页面，并设置参数</span>
|
||||
<ul class="zi-float-right">
|
||||
<li class="z-active">示例</li>
|
||||
<li>代码</li>
|
||||
<li>说明</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<section style="min-height:100px;">
|
||||
<div class="z-active z-pd10 example">
|
||||
<script>
|
||||
function openDialogUrl2()
|
||||
{//设置遮罩参数，设置颜色，设置滚动到最下方
|
||||
var dialog = new Z.Dialog();
|
||||
dialog.title = "我是标题";
|
||||
dialog.url = "dialog_url2.htm";
|
||||
dialog.width = 500;
|
||||
dialog.height = 300;
|
||||
dialog.shadowOpacity = 0.8;
|
||||
dialog.borderColor = "#d3d3d3";
|
||||
dialog.fixed = true;
|
||||
dialog.scroll = true;
|
||||
dialog.execute();
|
||||
}
|
||||
</script>
|
||||
<br><br>
|
||||
<a href="javascript:void(0);" onclick="openDialogUrl2()">点我弹出对话框，滚动最底部</a>
|
||||
</div>
|
||||
|
||||
<div class="relative left z-w100p z-pd10">
|
||||
<span class="z-text-prewrap z-pre"></span>
|
||||
</div>
|
||||
|
||||
<div class="z-pd10 z-px16 z-lh200p">
|
||||
1、最简单的弹出URL对话框，要求标题、URL、宽度和高度四个值<br>
|
||||
2、设置shadowOpacity = 0.1;遮罩层透明度为0.8<br>
|
||||
3、设置borderColor = "#e9fefd";边框颜色<br>
|
||||
4、设置scroll = true;滚动滚动条到最底部
|
||||
</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">id</td>
|
||||
<td>Z.random(10);</td>
|
||||
<td>该对话框使用的编号，如果未指定，则用系统取随机值，要求必须唯一</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">title</td>
|
||||
<td>提示</td>
|
||||
<td>对话框标题</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">width</td>
|
||||
<td>300</td>
|
||||
<td>对话框宽度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">height</td>
|
||||
<td>200</td>
|
||||
<td>对话框高度</td>
|
||||
</tr>
|
||||
</tr>
|
||||
<td class="z-samp">borderColor</td>
|
||||
<td>#ccc</td>
|
||||
<td>边框颜色</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">target</td>
|
||||
<td>document</td>
|
||||
<td>目标区域</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">fixed</td>
|
||||
<td>false</td>
|
||||
<td>是否在document下固定位置，只有当target===document时有效</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">position</td>
|
||||
<td>未配置默认居中</td>
|
||||
<td>1、数字0表示居中，1-3左中下，4-5中上下，6-8右上中下<br>2、指定位置如：{top:100,left:100}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">timeout</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">内容相关2个参数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">url</td>
|
||||
<td>和text互斥，只能且必须填写一个</td>
|
||||
<td>对话框调用的URL，和text配置项互斥</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">text</td>
|
||||
<td>和url互斥，只能且必须填写一个</td>
|
||||
<td>对话框显示的HTML文本，和url配置项互斥</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">遮罩层参数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">shadow</td>
|
||||
<td>true</td>
|
||||
<td>遮罩层是否启用 true|false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">shadowColor</td>
|
||||
<td>#757575</td>
|
||||
<td>遮罩层颜色</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">shadowOpacity</td>
|
||||
<td>0.6</td>
|
||||
<td>遮罩层透明度，值在0-1之间</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">标题拖拽</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">hasTitle</td>
|
||||
<td>true</td>
|
||||
<td>标题栏是否显示，true|false 默认true，当=false时drag无意义</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">titleBgColor</td>
|
||||
<td>#f5f5f5</td>
|
||||
<td>标题背景色</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">drag</td>
|
||||
<td>true</td>
|
||||
<td>是否支持拖拽标题，true|false 默认true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">dragOpacity</td>
|
||||
<td>0.8</td>
|
||||
<td>拖拽时透明度，值在0-1之间，默认0.8</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">背景参数</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">hasBackground</td>
|
||||
<td>true</td>
|
||||
<td>背景是否显示，true|false 默认true</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">backgroundColor</td>
|
||||
<td>#e9f3fd</td>
|
||||
<td>背景颜色，默认#e9fefd</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3" class="z-text-cyan">滚动滚动条</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">scroll</td>
|
||||
<td>false</td>
|
||||
<td>是否滚动，true|false 默认false</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">scrollHeight</td>
|
||||
<td>0</td>
|
||||
<td>指定滚动高度，(scrollHeight==0)表示到底部，即最大高度，!=0表示指定高度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">scrollPad</td>
|
||||
<td>0</td>
|
||||
<td>指定滚动高度时，保留一部分即height=scrollHeight-scrollPad</td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</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,214 @@
|
||||
<#def title = "加载对话框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "加载对话框是自定义对话框的一种没有标题只有加载中提示的对话框。目标是在屏幕或用户指定的元素可视范围的中间提供没有警告声音且美观的加载对话框，支持设置九个参数来定义加载中界面，无关闭按钮，由业务实现关闭。"/>
|
||||
<#def prevUrl = "prompt.htm"/>
|
||||
<#def nextUrl = "../nav/tabnav.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "dialog", "loading")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "加载对话框")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">加载对话框：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
加载对话框是自定义对话框的一种没有标题只有加载中提示的对话框。目标是在屏幕或用户指定的元素可视范围的中间提供没有警告声音且美观的加载对话框，支持设置九个参数来定义加载中界面，无关闭按钮，由业务实现关闭。
|
||||
</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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,291 @@
|
||||
<#def title = "提示对话框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "提示对话框是自定义对话框的一种参考prompt方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的提示对话框，支持设置提示内容和点击确定后回调函数，点击取消不向下处理。"/>
|
||||
<#def prevUrl = "confirm.htm"/>
|
||||
<#def nextUrl = "loading.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "dialog", "prompt")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "提示对话框")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">提示对话框：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
提示对话框是自定义对话框的一种参考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', '', function(value){alert(value);}, {hasBackground:true, maxLength:5, dataOptions:'type:Numeric;', placeholder:'最多5位数字'});">点我弹出单行提示对话框</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('选择', '2', function(value){alert(value);}, {type:'select', hasBackground:true, selects:[{name:'湖南',value:1},{name:'江西',value:2}]});">点我弹出单行提示对话框</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('修改input', 'abc', function(value){alert(value);}, {type:'textarea', maxLength:5, placeholder:'最多5位字符'});">点我弹出多行提示对话框</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', height: 500});">点我弹出多行提示对话框</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>内容是使用"select","input"还是"textarea"，默认"input"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.style</td>
|
||||
<td>{className:"z-samp zi-px16"}</td>
|
||||
<td>为输入框增加样式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.className</td>
|
||||
<td>{className:"z-samp zi-px16"}</td>
|
||||
<td>为输入框增加样式类</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.placeholder</td>
|
||||
<td>{placeholder:"请输入数字"}</td>
|
||||
<td>为输入框指定引导文字</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.maxLength</td>
|
||||
<td>{maxLength:5}</td>
|
||||
<td>为输入框指定最大长度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.dataOptions</td>
|
||||
<td>{dataOptions:"type:Numeric"}</td>
|
||||
<td>为输入框指定输入控制（input时有效）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">param.selects</td>
|
||||
<td>{selects:[{name:"湖南",value:1},{name:"江西",value:2]}</td>
|
||||
<td>为选择框时指定option表，和value相等时表示selected</td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,709 @@
|
||||
<#def title = "按钮样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "按钮样式是指对按钮增加样式规则，按钮分为三种，一是标准按钮、二为筛选按钮、三是多选按钮。样式规则包括按钮大小、颜色、边框颜色、选中特效等。"/>
|
||||
<#def prevUrl = "input.htm"/>
|
||||
<#def nextUrl = "checkbox.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z(".example").each(function(elem)
|
||||
{
|
||||
Z(elem).next("td > pre").html(Z(elem).htmlt());
|
||||
});
|
||||
|
||||
Z("button.z-bordered").click(function()
|
||||
{
|
||||
Z(this).toggleClass("z-active");
|
||||
});
|
||||
|
||||
Z("button.z-bordered-box").click(function()
|
||||
{
|
||||
Z(this).toggleClass("z-active");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "form", "button")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "按钮样式")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">按钮样式：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
按钮样式是指对按钮增加样式规则，按钮分为三种，一是标准按钮、二为筛选按钮、三是多选按钮。样式规则包括按钮大小、颜色、边框颜色、选中特效等。
|
||||
</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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,126 @@
|
||||
<#def title = "日历控件"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "日历控件是在输入框触发时展开一个年月日时分秒的日期界面，按日历格式显示出来，通过点击和选择得到要求的日期或时间。当前日历控件支持选择日期、选择日期+时间、选择日期+时分三种。"/>
|
||||
<#def prevUrl = "editable.htm"/>
|
||||
<#def nextUrl = "../dialog/dialog.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z(".example").each(function(elem)
|
||||
{
|
||||
Z(elem).next("td > pre").html(Z(elem).htmlt());
|
||||
});
|
||||
});
|
||||
|
||||
function onchangea()
|
||||
{
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "form", "calendar")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "日历控件")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">日历控件：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
日历控件是在输入框触发时展开一个年月日时分秒的日期界面，按日历格式显示出来，通过点击和选择得到要求的日期或时间。当前日历控件支持选择日期、选择日期+时间、选择日期+时分三种。
|
||||
</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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,429 @@
|
||||
<#def title = "多选框样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "多选框样式是指参考多选按钮设计出有颜色设定的多选的方框样式。多选框默认1像素边框，移入时变为2像素边框，选中后增加背景颜色并显示打勾图标表示已选中，多选框默认黑色，支持红橙黄绿青蓝紫等颜色和大小5种设定。"/>
|
||||
<#def prevUrl = "button.htm"/>
|
||||
<#def nextUrl = "radio.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z(".example").each(function(elem)
|
||||
{
|
||||
Z(elem).next("td > pre").html(Z(elem).htmlt());
|
||||
});
|
||||
|
||||
Z(".example-link").each(function(elem)
|
||||
{
|
||||
var html = Z(elem).htmlt();
|
||||
html = Z.S.trim(html);
|
||||
html = Z.S.replaceAll(html, /\sdata-id="[^"]+"/g, ''); //去除 data-id
|
||||
html = Z.S.replaceAll(html, /\sstyle="[^"]+"/g, '');
|
||||
html = Z.S.replaceAll(html, ' >', '>');
|
||||
var ind = html.indexOf("i ");
|
||||
if (ind != -1){
|
||||
html = html.substring(0, ind-4);
|
||||
}
|
||||
|
||||
Z(elem).next("td > pre").html(html);
|
||||
});
|
||||
|
||||
Z(".click i.z-checkbox").click(function()
|
||||
{
|
||||
Z(this).toggleClass("z-active");
|
||||
});
|
||||
});
|
||||
|
||||
function abc(text, checked)
|
||||
{
|
||||
alert(text+checked);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "form", "checkbox")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "多选框样式")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">多选框样式：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
多选框样式是指参考多选按钮设计出有颜色设定的多选的方框样式。多选框默认1像素边框，移入时变为2像素边框，选中后增加背景颜色并显示打勾图标表示已选中，多选框默认黑色，支持红橙黄绿青蓝紫等颜色和大小5种设定。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、纯多选框样式 -->
|
||||
<div class="tutorial title">一、纯多选框样式（标准大小）</div>
|
||||
|
||||
<table class="click z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><i class="z-checkbox"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><i class="z-checkbox z-red"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-red z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><i class="z-checkbox z-orange"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-orange z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><i class="z-checkbox z-yellow"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-yellow z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><i class="z-checkbox z-green"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-green z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><i class="z-checkbox z-cyan"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-cyan z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><i class="z-checkbox z-blue"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-blue z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><i class="z-checkbox z-purple"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-purple z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、纯多选框样式(大号） -->
|
||||
<div class="tutorial title">二、纯多选框样式(大号）</div>
|
||||
|
||||
<table class="click z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><i class="z-checkbox z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><i class="z-checkbox z-red z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-red z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><i class="z-checkbox z-orange z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-orange z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><i class="z-checkbox z-yellow z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-yellow z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><i class="z-checkbox z-green z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-green z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><i class="z-checkbox z-cyan z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-cyan z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><i class="z-checkbox z-blue z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-blue z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><i class="z-checkbox z-purple z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-purple z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 三、纯多选框样式(加大） -->
|
||||
<div class="tutorial title">三、纯多选框样式(加大）</div>
|
||||
|
||||
<table class="click z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><i class="z-checkbox z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><i class="z-checkbox z-red z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-red z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><i class="z-checkbox z-orange z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-orange z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><i class="z-checkbox z-yellow z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-yellow z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><i class="z-checkbox z-green z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-green z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><i class="z-checkbox z-cyan z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-cyan z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><i class="z-checkbox z-blue z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-blue z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><i class="z-checkbox z-purple z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-checkbox z-purple z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 四、多选框样式和多选按钮联动 -->
|
||||
<div class="tutorial title">四、多选框样式和多选按钮联动</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="8%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="35%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="40%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="type">默认</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" style="width:16px;height:16px;" data-class="z-red"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-red" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-orange"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-orange" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-yellow"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-yellow" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-green"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-green" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-cyan"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-cyan" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-blue"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-blue" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-purple"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-purple" checked></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-px14 left z-mg-t20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" onclick="Z.FM.doSelectCheckBox('subCheckBox', this.checked);"><br><input type="checkbox" name="subCheckBox"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="checkbox" data-role="z-checkbox" data-class="z-red" onclick="javascript:abc('弹出我的值', this.checked);"></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-px14 left z-mg-t20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="8%" align="center">选择</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="example-link" align="center">
|
||||
<input type="checkbox" data-role="z-checkbox" onclick="Z.FM.doSelectCheckBox('subcb', this.checked);">
|
||||
<br><br><br><br>
|
||||
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb" value="1" data-class="z-red"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb" value="2"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb" value="3" data-class="z-cyan"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb" value="4" data-class="z-blue"><br><br>
|
||||
</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-px14 left z-mg-t20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%" align="center">选择</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="example-link" align="center">
|
||||
<button type="button" class="z-button z-blue" onclick="Z.FM.doSelectCheckBox('subcb2', 1);">全选</button>
|
||||
<button type="button" class="z-button z-blue" onclick="Z.FM.doSelectCheckBox('subcb2', 2);">取消</button>
|
||||
<button type="button" class="z-button z-blue" onclick="Z.FM.doSelectCheckBox('subcb2', 0);">反选</button>
|
||||
<br><br><br><br>
|
||||
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb2" value="1" data-class="z-red"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb2" value="2"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb2" value="3" data-class="z-cyan"><br><br>
|
||||
<input type="checkbox" data-role="z-checkbox" name="subcb2" value="4" data-class="z-blue"><br><br>
|
||||
</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-px14 left z-mg-t20">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="20%" align="center">选择</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="example-link" align="center">
|
||||
<button class="z-button z-large zi-bg-white zi-mg-l10" onclick="Z(this).find('i.z-checkbox').click();">
|
||||
<input type="checkbox" class="display:inline-block" data-role="z-checkbox" data-class="z-blue">只设计不印刷
|
||||
</button>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,267 @@
|
||||
<#def title = "可编辑文本"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "可编辑文本是定义一段文本（span），在该文本之后增加一个笔状图标，当点击笔状图标时显示输入框和保存按钮，输入框支持输入控制，点击保存按钮触发保存事件。"/>
|
||||
<#def prevUrl = "select.htm"/>
|
||||
<#def nextUrl = "calendar.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "form", "editable")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "可编辑文本")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">可编辑文本：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
可编辑文本是定义一段文本（span），在该文本之后增加一个笔状图标，当点击笔状图标时显示输入框和保存按钮，输入框支持输入控制，点击保存按钮触发保存事件。
|
||||
</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="20%">参数</td>
|
||||
<td width="30%">值</td>
|
||||
<td width="10%">是否必须</td>
|
||||
<td width="*">说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-role</td>
|
||||
<td>z-editable</td>
|
||||
<td>必须</td>
|
||||
<td>表明该文本是可编辑的文本</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-value</td>
|
||||
<td>1.0</td>
|
||||
<td>必须</td>
|
||||
<td>可编辑文本值，不要配置到<span></span>中</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-save</td>
|
||||
<td>function(value){return true;}</td>
|
||||
<td>必须</td>
|
||||
<td>保存触发函数，无还回值和返回true表示成功，返回false表示失败，返回字符串表示弹出错误提示并且失败</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-value-class</td>
|
||||
<td>z-bold</td>
|
||||
<td>可选</td>
|
||||
<td>可编辑文本样式类</td>
|
||||
</tr>
|
||||
</tr>
|
||||
<td class="z-samp">data-value-style</td>
|
||||
<td>color:red;font-size:14px;font-weight:700;</td>
|
||||
<td>可选</td>
|
||||
<td>可编辑文本样式，遵循css规则</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-input-class</td>
|
||||
<td>z-blue</td>
|
||||
<td>可选</td>
|
||||
<td>输入框样式类</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-input-style</td>
|
||||
<td>width:50px;</td>
|
||||
<td>可选</td>
|
||||
<td>输入框样式表</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-input-maxlength</td>
|
||||
<td>10</td>
|
||||
<td>可选</td>
|
||||
<td>输入框支持的最大长度</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-input-check</td>
|
||||
<td>type:Discount;</td>
|
||||
<td>可选</td>
|
||||
<td>输入框控制，请参考输入框说明</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-button-class</td>
|
||||
<td>z-blue</td>
|
||||
<td>可选</td>
|
||||
<td>按钮样式类</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp">data-button-style</td>
|
||||
<td>width:50px;</td>
|
||||
<td>可选</td>
|
||||
<td>按钮样式表</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 一、无返回或返回true保存 -->
|
||||
<div class="tutorial title">一、无返回或返回true保存</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}"></span></td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}"></span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return true;}"></span></td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return true;}"></span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示但不返回值可保存');}"></span></td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示但不返回值可保存');}"></span></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、返回false不保存 -->
|
||||
<div class="tutorial title">二、返回false不保存</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return false;}"></span></td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return false;}"></span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示返回false不保存');return false;}"></span></td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){alert('弹出提示返回false不保存');return false;}"></span></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="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return '弹出提示信息';}"></span></td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){return '弹出提示信息';}"></span></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="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<input id="modify" class="z-input z-blue z-w100" value="内容可编辑"> <button type="button" onclick="Z.Editable.get(Z('#modified')[0]).val(Z('#modify').val());" class="z-button z-blue">修改</button><br><br>
|
||||
<span id="modified" data-role="z-editable" data-value="内容可编辑" data-save="function(value){}"></span>
|
||||
</td>
|
||||
<td><pre class="z-text-prewrap">
|
||||
<input id="modify" class="z-input z-blue z-w100" value="内容可编辑">
|
||||
<button type="button" onclick="Z.Editable.get(Z('#modified')[0]).val(Z('#modify').val());" class="z-button z-blue">修改</button><br><br>
|
||||
|
||||
<span id="modified" data-role="z-editable" data-value="内容可编辑" data-save="doSave"></span>
|
||||
</pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 五、可选参数展示 -->
|
||||
<div class="tutorial title">五、可选参数展示</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh150p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="25%">说明</td>
|
||||
<td width="25%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>文本样式类：加粗、16像素<br>文本样式表：红色</td>
|
||||
<td>
|
||||
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-value-class="z-bold z-px16" data-value-style="color:red;"></span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-value-class="z-bold z-px16" data-value-style="color:red;"></span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>输入框样式类：蓝色、大号<br>输入框样式表：宽度90px</td>
|
||||
<td>
|
||||
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-input-class="z-blue z-large" data-input-style="width:90px;"></span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-input-class="z-blue z-large" data-input-style="width:90px;"></span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>按钮样式类：蓝色、大号<br>按钮样式表：宽度70px</td>
|
||||
<td>
|
||||
<span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-button-class="z-blue z-large" data-button-style="width:70px;"></span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="内容可编辑" data-save="function(value){}" data-button-class="z-blue z-large" data-button-style="width:70px;"></span></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>输入控制：只能输入整数，且最大6个</td>
|
||||
<td>
|
||||
<span data-role="z-editable" data-value="123456" data-save="function(value){}" data-input-maxlength="6" data-input-check="type:Integer;"></span>（整数）
|
||||
</td>
|
||||
<td><pre class="z-text-preline"><span data-role="z-editable" data-value="123456" data-save="function(value){}" data-input-maxlength="6" data-input-check="type:Integer;"></span></pre></td>
|
||||
</tr>
|
||||
<table>
|
||||
|
||||
<#-- 六、完整参数展示 -->
|
||||
<div class="tutorial title">六、完整参数展示</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-lh150p">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="*">说明</td>
|
||||
<td width="60%">效果预览</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
1、文本样式类：加粗、16像素<br>
|
||||
2、文本样式表：红色<br>
|
||||
3、输入框样式类：蓝色、大号<br>
|
||||
4、输入框样式表：宽度90px、高度38px<br>
|
||||
5、按钮样式类：蓝色、大号<br>
|
||||
6、按钮样式表：宽度70px<br>
|
||||
7、输入控制：只能输入折扣值<br>
|
||||
8、输入控制：最长6个
|
||||
</td>
|
||||
<td width="60%">
|
||||
<span data-role="z-editable" data-value="8.96" data-save="function(value){}"
|
||||
data-value-class="z-bold z-px16" data-value-style="color:red;"
|
||||
data-input-class="z-blue z-large" data-input-style="width:90px;height:38px;"
|
||||
data-button-class="z-blue z-large" data-button-style="width:70px;"
|
||||
data-input-maxlength="6" data-input-check="type:Discount;"></span><span class="z-px16"> 折</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2"><pre class="z-text-prewrap zi-px14">
|
||||
<span data-role="z-editable" data-value="8.96" data-save="function(value){}"
|
||||
data-value-class="z-bold z-px16" data-value-style="color:red;"
|
||||
data-input-class="z-blue z-large" data-input-style="width:90px;height:38px;"
|
||||
data-button-class="z-blue z-large" data-button-style="width:70px;"
|
||||
data-input-maxlength="6" data-input-check="type:Discount;">
|
||||
</span>
|
||||
<span class="z-px16"> 折</span>
|
||||
</pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,172 @@
|
||||
<#def title = "输入框样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "输入框样式是指对输入框增加样式规则，如指定输入框长度大小、边框颜色、和输入控制等。"/>
|
||||
<#def prevUrl = "../js/query.htm"/>
|
||||
<#def nextUrl = "button.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z(".example").each(function(elem)
|
||||
{
|
||||
Z(elem).next("td > pre").html(Z(elem).htmlt());
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "form", "input")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "输入框样式")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">输入框样式：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
输入框样式是指对输入框增加样式规则，如指定输入框长度大小、边框颜色、和输入控制等。
|
||||
</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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,309 @@
|
||||
<#def title = "单选框样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "单选框样式是指参考单选按钮设计出有颜色设定单选的圆框的样式。单选框默认1像素边框，移入时变为2像素边框，选中后增加背景颜色并显示打勾图标表示已选中，单选框默认黑色，支持红橙黄绿青蓝紫等颜色和大小5种设定。"/>
|
||||
<#def prevUrl = "checkbox.htm"/>
|
||||
<#def nextUrl = "select.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z(".example").each(function(elem)
|
||||
{
|
||||
Z(elem).next("td > pre").html(Z(elem).htmlt());
|
||||
});
|
||||
|
||||
Z(".example-link").each(function(elem)
|
||||
{
|
||||
var html = Z(elem).htmlt();
|
||||
html = html.replace('style="visibility: hidden;"', '');
|
||||
html = html.replace(' >', '>');
|
||||
var ind = html.indexOf("i ");
|
||||
if (ind != -1){
|
||||
html = html.substring(0, ind-4);
|
||||
}
|
||||
|
||||
Z(elem).next("td > pre").html(html);
|
||||
});
|
||||
|
||||
Z(".click i.z-checkbox").click(function()
|
||||
{
|
||||
Z(this).toggleClass("z-active");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "form", "radio")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "单选框样式")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">单选框样式：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
单选框样式是指参考单选按钮设计出有颜色设定单选的圆框的样式。单选框默认1像素边框，移入时变为2像素边框，选中后增加背景颜色并显示打勾图标表示已选中，单选框默认黑色，支持红橙黄绿青蓝紫等颜色和大小5种设定。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、纯单选框样式 -->
|
||||
<div class="tutorial title">一、纯单选框样式（标准大小）</div>
|
||||
|
||||
<table class="click z-table z-bordered z-pd10">
|
||||
<tr>
|
||||
<td colspan="5">单选标准按钮</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><i class="z-radio"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><i class="z-radio z-red"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-red z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><i class="z-radio z-orange"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-orange z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><i class="z-radio z-yellow"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-yellow z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><i class="z-radio z-green"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-green z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><i class="z-radio z-cyan"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-cyan z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><i class="z-radio z-blue"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-blue z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><i class="z-radio z-purple"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-purple z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 二、纯单选框样式（大号） -->
|
||||
<div class="tutorial title">二、纯单选框样式（大号）</div>
|
||||
|
||||
<table class="click z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><i class="z-radio z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><i class="z-radio z-red z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-red z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><i class="z-radio z-orange z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-orange z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><i class="z-radio z-yellow z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-yellow z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><i class="z-radio z-green z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-green z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><i class="z-radio z-cyan z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-cyan z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><i class="z-radio z-blue z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-blue z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><i class="z-radio z-purple z-large"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-purple z-large z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 三、纯单选框样式（加大） -->
|
||||
<div class="tutorial title">三、纯单选框样式（加大）</div>
|
||||
|
||||
<table class="click z-table z-bordered z-pd10">
|
||||
<tr>
|
||||
<td colspan="5">单选加大按钮</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="44%">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example"><i class="z-radio z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example"><i class="z-radio z-red z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-red z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>橙色</td>
|
||||
<td class="example"><i class="z-radio z-orange z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-orange z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>黄色</td>
|
||||
<td class="example"><i class="z-radio z-yellow z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-yellow z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>绿色</td>
|
||||
<td class="example"><i class="z-radio z-green z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-green z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>青色</td>
|
||||
<td class="example"><i class="z-radio z-cyan z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-cyan z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>蓝色</td>
|
||||
<td class="example"><i class="z-radio z-blue z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-blue z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>紫色</td>
|
||||
<td class="example"><i class="z-radio z-purple z-xlarge"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example"><i class="z-radio z-purple z-xlarge z-active"></i></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<#-- 四、单选框样式和单选按钮联动 -->
|
||||
<div class="tutorial title">四、单选框样式和单选按钮联动</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="10%">类型</td>
|
||||
<td width="8%">未选中</td>
|
||||
<td width="30%">未选中代码</td>
|
||||
<td width="8%">已选中</td>
|
||||
<td width="*">未选中代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>默认</td>
|
||||
<td class="example-link"><input type="radio" data-role="z-radio"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="radio" data-role="z-radio" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><span class="z-pointer" onclick="Z('.z-radio[data-id=test]').click();">有名称，点我也可以</span></td>
|
||||
<td class="example-link"><input id="test" type="radio" name="name" data-role="z-radio"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="radio" name="name" data-role="z-radio" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>红色</td>
|
||||
<td class="example-link"><input type="radio" data-role="z-radio" data-class="z-red"></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
<td class="example-link"><input type="radio" data-role="z-radio" data-class="z-red" checked></td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,160 @@
|
||||
<#def title = "选择框样式"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "选择框样式是参考选择按钮设计出有颜色设定下拉列表的样式。选择框是一种下拉列表样式，目标是和表单选择按钮联动，实现跨浏览器且更美观的样式。"/>
|
||||
<#def prevUrl = "radio.htm"/>
|
||||
<#def nextUrl = "editable.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z(".example").each(function(elem)
|
||||
{
|
||||
Z(elem).next("td > pre").html(Z(elem).htmlt());
|
||||
});
|
||||
|
||||
Z(".example-link").each(function(elem)
|
||||
{
|
||||
var html = Z(elem).htmlt();
|
||||
html = html.trim();
|
||||
html = html.replace('<span class="z-relative z-show-ib">', '');
|
||||
html = html.replace(' z-hidden', '');
|
||||
var ind = html.indexOf("div ");
|
||||
if (ind != -1){
|
||||
html = html.substring(0, ind-4);
|
||||
}
|
||||
|
||||
Z(elem).next("td > pre").html(html);
|
||||
});
|
||||
});
|
||||
|
||||
function doSelect(value)
|
||||
{
|
||||
var $select = Z.Select.get("z-select-search");
|
||||
$select.setValue(value);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "form", "select")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "选择框样式")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">选择框样式：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
选择框样式是参考选择按钮设计出有颜色设定下拉列表的样式。选择框是一种下拉列表样式，目标是和表单选择按钮联动，实现跨浏览器且更美观的样式。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、简单选择按钮转选择框 -->
|
||||
<div class="tutorial title">一、简单选择按钮转选择框</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-relative-left">
|
||||
<tr>
|
||||
<td colspan="2" class="zi-px18">1、原始选择按钮：</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td width="20%" class="zi-px18 example"><select class="z-select z-cyan" style="width:160px;">
|
||||
<option value="1">广东省</option>
|
||||
<option value="2" selected>湖南省</option>
|
||||
<option value="3" onclick="location.href='/index.htm'">江西省</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2" class="zi-px18">2、转化后的选择框（增加角色data-role="z-select"和颜色data-class="z-cyan"）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="example-link"><select data-role="z-select" class="z-select z-float-left" data-class="z-select z-cyan" style="width:80px;">
|
||||
<option value="1">广东省</option>
|
||||
<option value="2">湖南省</option>
|
||||
<option value="3" onclick="location.href='/index.htm'">江西省</option>
|
||||
</select>
|
||||
<button class="z-button zi-bd-rd0 z-float-left z-font z-config"></button>
|
||||
<input class="z-input z-w30 z-float-left">
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="example-link" onclick="alert('向上冒泡');"><select data-role="z-select" class="z-select" data-class="z-select z-cyan" style="width:160px;">
|
||||
<option value="1">广东省</option>
|
||||
<option value="2">湖南省</option>
|
||||
<option value="3" onclick="location.href='/index.htm'">江西省</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="example-link" onclick="alert('不向上冒泡');"><select data-role="z-select" class="z-select" data-class="z-select z-cyan" data-options="stop:true;" style="width:160px;">
|
||||
<option value="1">广东省</option>
|
||||
<option value="2">湖南省</option>
|
||||
<option value="3" onclick="location.href='/index.htm'">江西省</option>
|
||||
</select>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="example-link"><select class="z-select z-w160" data-role="z-select" data-class="z-cyan" data-options="itemWidth:159px;width:337px">
|
||||
<option value="1">广东省</option>
|
||||
<option value="1">广东省</option>
|
||||
<option value="2">湖南省</option>
|
||||
<option value="2">湖南省</option>
|
||||
<option value="2">湖南省</option>
|
||||
<option value="2">湖南省</option>
|
||||
<option value="2">湖南省</option>
|
||||
<option value="1">广东省</option>
|
||||
<option value="1">广东省</option>
|
||||
<option value="1">广东省</option>
|
||||
<option value="1">广东省</option>
|
||||
<option value="1">广东省</option>
|
||||
<option value="3" onclick="location.href='/index.htm'">江西省</option>
|
||||
</select>
|
||||
</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-relative-left">
|
||||
<tr>
|
||||
<td>可模糊搜索的选择框：</td>
|
||||
<td class="example-link">AAAA
|
||||
<select id="z-select-search" data-role="z-select-search" data-options="maxHeight:100" class="z-select z-large z-w300" data-class="z-cyan">
|
||||
<option value="1">广东省</option>
|
||||
<option value="2">湖南省</option>
|
||||
<option value="2">湖南省</option>
|
||||
<option value="2">湖南省</option>
|
||||
<option value="2">湖南省</option>
|
||||
<option value="2">湖南省</option>
|
||||
<option value="1">广东省</option>
|
||||
<option value="1">广东省</option>
|
||||
<option value="1">广东省</option>
|
||||
<option value="1">广东省</option>
|
||||
<option value="1">广东省</option>
|
||||
<option value="3" onclick="location.href='/index.htm'">江西省</option>
|
||||
</select>
|
||||
<a href="javascript:doSelect('2')">湖南省</a>
|
||||
<a href="javascript:doSelect('3')">江西省</a>
|
||||
</td>
|
||||
<td class="z-w60p"><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,287 @@
|
||||
<#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_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "ui", "")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "前端UI")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">什么是“ZhiqimUI”</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
“ZhiqimUI”是一套集成Javascript库、Css库、Font库、常用ico图标和Flash控件等，并在其上开发的大量UI组件组成的前端开发套件。<br>
|
||||
1、ZhiqimUI压缩打包成一个jar文件（zhiqim_ui.jar），配合ZhiqimHttpd使用，可直接通过/service/res/*访问。<br>
|
||||
2、ZhiqimUI的JS库拥有类似于jQuery的DOM操作能力，通过Z(selector)方式访问，并集成了大量常用的静态工具。<br>
|
||||
3、ZhiqimUI的Css库类似于bootstrap，统一使用z-前缀约束，定义了大量常用的css规则，同时兼容其他的css库。<br>
|
||||
4、ZhiqimUI的插件库非常丰富并持续增加中，有对话框、Ajax调用、表单套件、日历、复制、标签页、文件上传等。<br>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- ZhiqimUI目录结构 -->
|
||||
<div class="tutorial title">ZhiqimUI目录结构</div>
|
||||
<div class="z-relative-left z-text-black z-show-ib z-samp" style="width:390px;height:300px;font-size:16px;line-height:100%;">
|
||||
<i class="z-ico z-tree z-root z-normal z-mg-r6"></i>zhiqim_ui.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_v1.5.0.r2018091201.css</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_v1.5.0.r2018091201.min.js</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_v1.5.0.r2018091201.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_v1.5.0.r2018091201.min.js</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="tutorial z-relative-left z-text-black z-pd-t3" style="width:610px;height:300px;font-size:16px;line-height:250%;">
|
||||
<ul>
|
||||
<li>
|
||||
ZhiqimUI统一打包成[<span class="z-text-cyan">zhiqim_ui.jar</span>]。包括font、image目录和核心的css、js文件。类路径为：org.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_v1.5.0.r2018091201.css</span>]是CSS核心库，为方便查找支持的样式，目前只作了空格处理，没有压缩，其中v1.5.0.r2018091201是版本号，升级会变动。</li>
|
||||
<li>文件[<span class="z-text-cyan">zhiqim_v1.5.0.r2018091201.min.js</span>]是JS核心库，原文件比较大，压缩后大约100K左右，如需查看API或源文件，在文档中查看，其中v1.5.0.r2018091201是版本号，升级会变动。</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<#-- 看一段简单的FTML代码风格 -->
|
||||
<div class="tutorial title">如何使用ZhiqimUI？</div>
|
||||
|
||||
<div class="z-text-prewrap z-pre zi-px16 z-w100p">
|
||||
<span class="zi-text-green"><!-- 引入zhiqimUI的css文件 --></span>
|
||||
<link rel="stylesheet" href="/service/res/zhiqim_v1.4.0.r2018010101.css">
|
||||
|
||||
<span class="zi-text-green"><!-- 引入zhiqimUI的js文件 --></span>
|
||||
<script src="/service/res/zhiqim_v1.4.0.r2018010101.min.js"></script>
|
||||
|
||||
<span class="zi-text-green"><!-- 使用zhiqimUI的CSS定义 --></span>
|
||||
<table class="z-table z-bordered z-bd-rd8">
|
||||
<tr>
|
||||
<td>
|
||||
<input id="text" class="z-input" value="原内容">
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<span class="zi-text-green"><!-- 使用zhiqimUI的JS代码修改值 --></span>
|
||||
<script>
|
||||
|
||||
<span class="zi-text-green">// 以下代码将把id为text的input的value值改为"新的内容"。</span>
|
||||
Z("#text").val("新的内容");
|
||||
|
||||
<span class="zi-text-green">// 以下代码弹出一个对话框。</span>
|
||||
var dialog = new Z.Dialog();
|
||||
dialog.url = "/new.htm";
|
||||
dialog.width = 400;
|
||||
dialog.height = 200;
|
||||
dialog.execute();
|
||||
|
||||
</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/ico.htm">图片图标</a></td>
|
||||
<td>“图片图标”是把一组小图标图片拼成一张大图，通过CSS的background-position特性指定小图标在大图中的位置和宽高显示图标，
|
||||
知启蒙图片图标放在/service/res/image目录下，根据大小和类型分为12px、16px、22px、36px以及文件图标、树图标等，在这里还利用三角型和圆型生成箭头和圆圈等样式。
|
||||
</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>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="css/table.htm">表格样式</a></td>
|
||||
<td>表格样式是指对表格增加样式规则，如指定表格边框、表格圆角、表格行线、表格单元格内边距、表格单元格字体大小、表格单元格文本对齐方式、表格单元格文本行高等，默认表格无边框。
|
||||
另外，CSS对底部圆角当有背景时需要手动对第一和最后单元格补圆角，当圆角首列合并单元格时也需要对被合并的行第一单元格补左边线。
|
||||
</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统一命名空间为“Z”，同时“Z”也是window下全局函数，如果“Z”有定义冲突请使用全称“zhiqim”。在全局“Z”命名空间下定义的全局属性、全局函数、全局正则表达式和全局类。</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/checkbox.htm">多选框</a></td>
|
||||
<td>多选框样式是指参考多选按钮设计出有颜色设定的多选的方框样式。多选框默认1像素边框，移入时变为2像素边框，选中后增加背景颜色并显示打勾图标表示已选中，多选框默认黑色，支持红橙黄绿青蓝紫等颜色和大小5种设定。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="form/radio.htm">单选框</a></td>
|
||||
<td>单选框样式是指参考单选按钮设计出有颜色设定单选的圆框的样式。单选框默认1像素边框，移入时变为2像素边框，选中后增加背景颜色并显示打勾图标表示已选中，单选框默认黑色，支持红橙黄绿青蓝紫等颜色和大小5种设定。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="form/select.htm">选择框</a></td>
|
||||
<td>选择框样式是参考选择按钮设计出有颜色设定下拉列表的样式。选择框是一种下拉列表样式，目标是和表单选择按钮联动，实现跨浏览器且更美观的样式。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="form/editable.htm">可编辑文本</a></td>
|
||||
<td>可编辑文本是定义一段文本（span），在该文本之后增加一个笔状图标，当点击笔状图标时显示输入框和保存按钮，输入框支持输入控制，点击保存按钮触发保存事件。</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/dialog.htm">自定义对话框</a></td>
|
||||
<td>自定义对话框是指根据业务要求，自动组装对话框参数，完成对话框的弹出。自定义对话框支持的参数有标题、宽度、高度、边框颜色、目标区域、指定弹出HTML、指定弹出URL等一系列参数，是各种对话框的基础。</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>
|
||||
<td class="tutorial feature"><a href="nav/stepbar.htm">步骤条</a></td>
|
||||
<td>步骤条是通过指定多个步骤标签，在每步中展示激活的一个步骤标签的导航页。步骤条使用nav作为每个步骤。
|
||||
样式通过before和after属性自动在每个步骤后加上白色箭头。
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="nav/tooltip.htm">提示框</a></td>
|
||||
<td>提示框是当鼠标移入或点击到重要的标志时，主动冒泡出一个浮动层，对该标志作解释的提示信息框。当前支持鼠标移入和点击两种事件，提示框在设计中有箭头、对齐方式、边框等属性。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="nav/dropdown.htm">下拉列表</a></td>
|
||||
<td>下拉列表是设计出当移入或点击时下拉出一个列表的样式。下拉列表当前支持点击和移入触发下拉列表一层界面，支持列表颜色、激活颜色，指定下拉列表宽度和多列等样式。</td>
|
||||
</tr>
|
||||
<tr class="z-bg-cyan">
|
||||
<td colspan="2">工具插件库</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="tool/copy.htm">Flash复制</a></td>
|
||||
<td>由于各浏览器剪贴板功能不一致，功能使用复杂，因此知启蒙是利用Flash的sprite容器制作的剪贴板功能，以达到跨浏览器支持对文本的复制功能。
|
||||
设计方案是先用button占位，再利用flash透明的特性覆盖button。该功能需要开启flash的支持。</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/drag.htm">拖拽</a></td>
|
||||
<td>拖拽是指定一个可拖动的对象，当鼠标按下时拖拽到其他位置。缩放是指定一个可缩放的对象，当鼠标按下时拉动对象使之放大或缩小。</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tutorial feature"><a href="tool/upload.htm">文件上传</a></td>
|
||||
<td>知启蒙文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传，大文件上传断点续传（HTML5和Flash两种）等。</td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,674 @@
|
||||
<#def title = "全局定义"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "知启蒙JS统一命名空间为“Z”，同时“Z”也是window下全局函数，如果“Z”有定义冲突请使用全称“zhiqim”。在全局“Z”命名空间下定义的全局属性、全局函数、全局正则表达式和全局类。"/>
|
||||
<#def prevUrl = "../css/table.htm"/>
|
||||
<#def nextUrl = "static.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "js", "js")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "全局js定义")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">全局定义：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
知启蒙JS统一命名空间为“Z”，同时“Z”也是window下全局函数，如果“Z”有定义冲突请使用全称“zhiqim”。在全局“Z”命名空间下定义的全局属性、全局函数、全局正则表达式和全局类。
|
||||
</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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,849 @@
|
||||
<#def title = "静态对象"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "静态对象是把一系列常用的对象定义成静态属性和函数。目前包括有浏览器对象（Z.B）、文档对象（Z.D）、"/>
|
||||
<#def prevUrl = "js.htm"/>
|
||||
<#def nextUrl = "util.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "js", "static")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "静态对象")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">静态对象：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
静态对象是把一系列常用的对象定义成静态属性和函数。目前包括有浏览器对象（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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">value</td>
|
||||
<td>指定属性值</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">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 zi-bd-l">name</td>
|
||||
<td>事件名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">listener</td>
|
||||
<td>事件侦听器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">$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 zi-bd-l">name</td>
|
||||
<td>事件名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">listener</td>
|
||||
<td>事件侦听器</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">$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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">name</td>
|
||||
<td>属性名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">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 zi-bd-l">name</td>
|
||||
<td>属性名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">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 zi-bd-l">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 zi-bd-l">name</td>
|
||||
<td>样式名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">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 zi-bd-l">name</td>
|
||||
<td>单选框或多选框名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">form</td>
|
||||
<td>指定表单内的单选或多选框</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">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 zi-bd-l">message</td>
|
||||
<td>询问的显示信息</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">name</td>
|
||||
<td>单选框或多选框名称</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">form</td>
|
||||
<td>确认的形式</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-samp zi-bd-l">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 zi-bd-l">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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,214 @@
|
||||
<#def title = "下拉列表"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " 下拉列表是设计出当移入或点击时下拉出一个列表的样式。下拉列表当前支持点击和移入触发下拉列表一层界面，支持列表颜色、激活颜色，指定下拉列表宽度和多列等样式。"/>
|
||||
<#def prevUrl = "tooltip.htm"/>
|
||||
<#def nextUrl = "../tool/copy.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<style>
|
||||
.color{display:block;width:20px;height:20px !important;margin:15px 0 15px 10px !important;cursor:pointer;}
|
||||
</style>
|
||||
<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);
|
||||
}
|
||||
|
||||
function doSelectColor(elem, color)
|
||||
{
|
||||
Z(elem).parent().next("section > div > div").each(function(stepbar)
|
||||
{
|
||||
Z(stepbar).removeClass("z-red");
|
||||
Z(stepbar).removeClass("z-orange");
|
||||
Z(stepbar).removeClass("z-yellow");
|
||||
Z(stepbar).removeClass("z-green");
|
||||
Z(stepbar).removeClass("z-cyan");
|
||||
Z(stepbar).removeClass("z-blue");
|
||||
Z(stepbar).removeClass("z-purple");
|
||||
|
||||
if (Z.Validates.isNotEmpty(color))
|
||||
Z(stepbar).addClass(color);
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent());
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "nav", "dropdown")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "下拉列表")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">下拉列表：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
下拉列表是设计出当移入或点击时下拉出一个列表的样式。下拉列表当前支持点击和移入触发下拉列表一层界面，支持列表颜色、激活颜色，指定下拉列表宽度和多列等样式。
|
||||
</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-dropdown" class="z-dropdown" data-options="event:click;" style="width:160px;">
|
||||
<span id="proviceId" value="0">选择省份</span><i class="z-float-right z-font z-arrowhead-down"></i>
|
||||
<ul class="z-list">
|
||||
<span value="1">广东省</span>
|
||||
<span value="2">湖南省</span>
|
||||
<span value="3">广西壮族自治区</span>
|
||||
<span value="4">江西省</span>
|
||||
</ul>
|
||||
</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-dropdown"]，包含样式类[class="z-dropdown"]，指定点击触发[data-options="event:click;"]和宽度[width:160px]<br>
|
||||
2、指定点击内容[span]，和右对齐箭头[<i class="z-float-right z-font z-arrowhead-down"></i>]<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、点击多列效果（含颜色） -->
|
||||
<div class="tutorial title">二、点击多列效果（两列、颜色边框背景）</div>
|
||||
|
||||
<#var colorMap = Jsons.toMapSS(context.getResourceString("/document/tutorial/ui/css/zhiqim.pre.json", "UTF-8"))/>
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<span class="z-px14">颜色：</span>
|
||||
<span class="color" style="background-color:${colorMap.get("btnBdColor")}" onclick="doSelectColor(this, '');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("redBdColor")}" onclick="doSelectColor(this, 'z-red');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("orangeBdColor")}" onclick="doSelectColor(this, 'z-orange');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("yellowBdColor")}" onclick="doSelectColor(this, 'z-yellow');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("greenBdColor")}" onclick="doSelectColor(this, 'z-green');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("cyanBdColor")}" onclick="doSelectColor(this, 'z-cyan');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("blueBdColor")}" onclick="doSelectColor(this, 'z-blue');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("purpleBdColor")}" onclick="doSelectColor(this, 'z-purple');"></span>
|
||||
<ul class="zi-float-right">
|
||||
<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-dropdown" class="z-dropdown z-cyan z-large" data-options="event:click;width:320px;item-width:159px;" data-onchange="function(){alert('选中一个');}" style="width:160px;">
|
||||
<span id="proviceId" value="2">更多</span><i class="z-float-right z-font z-arrowhead-down"></i>
|
||||
<ul class="z-list">
|
||||
<span value="1">广东省</span>
|
||||
<span value="2" selected>湖南省</span>
|
||||
<span value="3">广西壮族自治区</span>
|
||||
<span value="4">江西省</span>
|
||||
<span value="5">北京市</span>
|
||||
<span value="6" onclick="location.href='/index.htm'">福建省</span>
|
||||
</ul>
|
||||
</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-dropdown"]，包含样式类[class="z-dropdown"]，指定点击触发[data-options="event:click;"]和宽度[width:160px]<br>
|
||||
2、指定点击内容[span]，和右对齐箭头[<i class="z-float-right z-font z-arrowhead-down"></i>]<br>
|
||||
3、在div上指定选择的颜色[class="z-dropdown z-red"]表示显示红色边框、红色背景和红色选中信息
|
||||
4、指定多列设计，如两列，总宽度[width:320px]，每列宽度[item-width:159px]，注意预留1像素的边框
|
||||
5、当有更变时，可用事件data-onchange。
|
||||
</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-dropdown" class="z-dropdown" data-options="event:hover;" style="width:160px;">
|
||||
<span id="proviceId" value="0">选择省份</span><i class="z-float-right z-font z-arrowhead-down"></i>
|
||||
<ul class="z-list">
|
||||
<span value="1">广东省</span>
|
||||
<span value="2">湖南省</span>
|
||||
<span value="3">广西壮族自治区</span>
|
||||
<span value="4">江西省</span>
|
||||
</ul>
|
||||
</div><div data-role="z-dropdown" class="z-dropdown zi-mg-l-1" data-options="event:hover;" style="width:160px;">
|
||||
<span id="proviceId" value="0">选择省份</span><i class="z-float-right z-font z-arrowhead-down"></i>
|
||||
<ul class="z-list">
|
||||
<span value="1">广东省</span>
|
||||
<span value="2">湖南省</span>
|
||||
<span value="3">广西壮族自治区</span>
|
||||
<span value="4">江西省</span>
|
||||
</ul>
|
||||
</div><div data-role="z-dropdown" class="z-dropdown zi-mg-l-1" data-options="event:hover;" style="width:160px;">
|
||||
<span id="proviceId" value="0">选择省份</span><i class="z-float-right z-font z-arrowhead-down"></i>
|
||||
<ul class="z-list">
|
||||
<span value="1">广东省</span>
|
||||
<span value="2">湖南省</span>
|
||||
<span value="3">广西壮族自治区</span>
|
||||
<span value="4">江西省</span>
|
||||
</ul>
|
||||
</div><div data-role="z-dropdown" class="z-dropdown zi-mg-l-1" data-options="event:hover;" style="width:160px;">
|
||||
<span id="proviceId" value="0">选择省份</span><i class="z-float-right z-font z-arrowhead-down"></i>
|
||||
<ul class="z-list">
|
||||
<span value="1">广东省</span>
|
||||
<span value="2">湖南省</span>
|
||||
<span value="3">广西壮族自治区</span>
|
||||
<span value="4">江西省</span>
|
||||
</ul>
|
||||
</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-dropdown"]，包含样式类[class="z-dropdown"]，指定移入触发[data-options="event:hover;"]和宽度[width:160px]<br>
|
||||
2、指定点击内容[span]，和右对齐箭头[<i class="z-float-right z-font z-arrowhead-down"></i>]<br>
|
||||
3、多个下拉列表在一起组成一组时，注意中间有inline-block产生的间隙，可利用zi-mg-l-3 zi-mg-r-3来去除，或保持div相连用zi-mg-l-1去除。
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,179 @@
|
||||
<#def title = "步骤条"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "步骤条是通过指定多个步骤标签，在每步中展示激活的一个步骤标签的导航页。步骤条使用nav作为每个步骤。"/>
|
||||
<#def prevUrl = "tabnav.htm"/>
|
||||
<#def nextUrl = "tooltip.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<style>
|
||||
.color{display:block;width:20px;height:20px !important;margin:15px 0 15px 10px !important;cursor:pointer;}
|
||||
</style>
|
||||
<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);
|
||||
}
|
||||
|
||||
function doSelectColor(elem, color)
|
||||
{
|
||||
Z(elem).parent().next("section > div > div").each(function(stepbar)
|
||||
{
|
||||
Z(stepbar).removeClass("z-red");
|
||||
Z(stepbar).removeClass("z-orange");
|
||||
Z(stepbar).removeClass("z-yellow");
|
||||
Z(stepbar).removeClass("z-green");
|
||||
Z(stepbar).removeClass("z-cyan");
|
||||
Z(stepbar).removeClass("z-blue");
|
||||
Z(stepbar).removeClass("z-purple");
|
||||
|
||||
if (Z.Validates.isNotEmpty(color))
|
||||
Z(stepbar).addClass(color);
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent());
|
||||
}
|
||||
|
||||
function doSelectStep(elem)
|
||||
{
|
||||
Z(elem).parent().parent().next("section > div > div").each(function(stepbar)
|
||||
{
|
||||
var $step = Z(stepbar).children("nav");
|
||||
$step.removeClass("z-active");
|
||||
Z($step[elem.value]).addClass("z-active");
|
||||
});
|
||||
|
||||
doUpdateCode(Z(elem).parent().parent());
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "nav", "stepbar")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "步骤条")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">步骤条：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
步骤条是通过指定多个步骤标签，在每步中展示激活的一个步骤标签的导航页。步骤条使用nav作为每个步骤。
|
||||
样式通过before和after属性自动在每个步骤后加上白色箭头。
|
||||
</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 class="z-stepbar">
|
||||
<nav>
|
||||
<span class="z-round z-white z-mg-r5">1</span><span>第一步 创建活动</span>
|
||||
</nav>
|
||||
<nav>
|
||||
<span class="z-round z-white z-mg-r5">2</span><span>第二步 选择宝贝</span>
|
||||
</nav>
|
||||
<nav class="z-active">
|
||||
<span class="z-round z-white z-mg-r5">3</span><span>第三步 保存配置</span>
|
||||
</nav>
|
||||
<nav>
|
||||
<span class="z-round z-white z-mg-r5">4</span><span>第四步 选择宝贝</span>
|
||||
</nav>
|
||||
</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，包含样式类[class="z-stepbar"]，默认步骤条width:100%，height:32px<br>
|
||||
2、在div下包括多个nav，每个nav即一个步骤，其中有[class="z-active"]的nav表示当前步骤<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<#-- 二、各种颜色步骤条效果 -->
|
||||
<div class="tutorial title">二、各种颜色步骤条效果</div>
|
||||
|
||||
<#var colorMap = Jsons.toMapSS(context.getResourceString("/document/tutorial/ui/css/zhiqim.pre.json", "UTF-8"))/>
|
||||
<div class="z-tabnav z-bordered" data-role="z-tabnav" onchange="doChange(this);">
|
||||
<nav>
|
||||
<span class="z-px14">步骤：</span>
|
||||
<select data-role="z-select" class="z-relative-left z-w80 z-h30 z-mg-t8" onchange="doSelectStep(this);">
|
||||
<option value="0">第一步</option>
|
||||
<option value="1" selected>第二步</option>
|
||||
<option value="2">第三步</option>
|
||||
<option value="3">第四步</option>
|
||||
</select>
|
||||
<span class="z-px14">颜色：</span>
|
||||
<span class="color" style="background-color:${colorMap.get("btnBdColor")}" onclick="doSelectColor(this, '');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("redBdColor")}" onclick="doSelectColor(this, 'z-red');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("orangeBdColor")}" onclick="doSelectColor(this, 'z-orange');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("yellowBdColor")}" onclick="doSelectColor(this, 'z-yellow');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("greenBdColor")}" onclick="doSelectColor(this, 'z-green');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("cyanBdColor")}" onclick="doSelectColor(this, 'z-cyan');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("blueBdColor")}" onclick="doSelectColor(this, 'z-blue');"></span>
|
||||
<span class="color" style="background-color:${colorMap.get("purpleBdColor")}" onclick="doSelectColor(this, 'z-purple');"></span>
|
||||
<ul class="zi-float-right">
|
||||
<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 class="z-stepbar z-red">
|
||||
<nav>
|
||||
<span class="z-round z-white z-mg-r5">1</span><span>第一步 创建活动</span>
|
||||
</nav>
|
||||
<nav class="z-active">
|
||||
<span class="z-round z-white z-mg-r5">2</span><span>第二步 选择宝贝</span>
|
||||
</nav>
|
||||
<nav>
|
||||
<span class="z-round z-white z-mg-r5">3</span><span>第三步 保存配置</span>
|
||||
</nav>
|
||||
<nav>
|
||||
<span class="z-round z-white z-mg-r5">4</span><span>第四步 选择宝贝</span>
|
||||
</nav>
|
||||
</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，包含样式类[class="z-stepbar"]，默认步骤条width:100%，height:32px，加上颜色[class="z-red"]表示红色，共支持七种颜色，请选择查看<br>
|
||||
2、在div下包括多个nav，每个nav即一个步骤，其中有[class="z-active"]的nav表示当前步骤<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,195 @@
|
||||
<#def title = "标签页"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " 标签页是参考tabnav设计出更简单易用的内容重叠布局的导航页。标签页使用nav和section作为是标签和内容显示。在nav中使用li表示每个标签，在section中使用div作为每个标签显示的内容。"/>
|
||||
<#def prevUrl = "../dialog/loading.htm"/>
|
||||
<#def nextUrl = "stepbar.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "nav", "tabnav")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "标签页")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">标签页：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
标签页是参考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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,300 @@
|
||||
<#def title = "提示框"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " 提示框是当鼠标移入或点击到重要的标志时，主动冒泡出一个浮动层，对该标志作解释的提示信息框。当前支持鼠标移入和点击两种事件，提示框在设计中有箭头、对齐方式、边框等属性。"/>
|
||||
<#def prevUrl = "stepbar.htm"/>
|
||||
<#def nextUrl = "dropdown.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav()}
|
||||
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z(".example").each(function(elem)
|
||||
{
|
||||
Z(elem).next("td > pre").html(Z(elem).htmlt());
|
||||
});
|
||||
|
||||
Z.Tooltip.load();
|
||||
});
|
||||
|
||||
function doKeyup(elem, param)
|
||||
{
|
||||
if (elem.value < 5)
|
||||
{
|
||||
var tooltip = Z.Tooltip(elem, param);
|
||||
tooltip.$content.css("overflow-y", "auto");
|
||||
tooltip.$content.css("height", "50px");
|
||||
}
|
||||
else
|
||||
{
|
||||
Z.Tooltip.close(elem);
|
||||
}
|
||||
}
|
||||
|
||||
function doUpdateTooltipText()
|
||||
{
|
||||
Z("#t-updateTooltipText").find(".z-content").html("我被改成新的数据了");
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "nav", "tooltip")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "提示框")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">提示框：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
提示框是当鼠标移入或点击到重要的标志时，主动冒泡出一个浮动层，对该标志作解释的提示信息框。当前支持鼠标移入和点击两种事件，提示框在设计中有箭头、对齐方式、边框等属性。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<#-- 一、鼠标移入事件 -->
|
||||
<div class="tutorial title">一、鼠标移入事件，文本下方显示提示框</div>
|
||||
|
||||
<table class="z-table z-bordered z-pd10 z-bd-rd8">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">类型</td>
|
||||
<td width="20%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>靠左对齐</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-options="align:left;top:10;width:200px;"
|
||||
data-text="提示内容显示在文本下面，箭头左对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>居中对齐</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-options="align:center;top:10;width:200px;"
|
||||
data-text="提示内容显示在文本下面，箭头居中对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>靠右对齐</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-options="align:right;top:10;width:200px;"
|
||||
data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
|
||||
</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">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">类型</td>
|
||||
<td width="20%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>靠左对齐</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-options="placement:top;align:left;top:10;border-color:#ff0000;width:200px;"
|
||||
data-text="提示内容显示在文本下面，箭头左对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>居中对齐</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-options="placement:top;align:center;top:10;border-color:#ff0000;width:200px;"
|
||||
data-text="提示内容显示在文本下面，箭头居中对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>靠右对齐</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-options="placement:top;align:right;top:10;border-color:#ff0000;width:200px;"
|
||||
data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
|
||||
</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">
|
||||
<tr>
|
||||
<td class="text-cyan z-px16" colspan="3">文本右方显示提示框（无箭头，无边框，默认宽度）</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">类型</td>
|
||||
<td width="20%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>靠上对齐</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-options="placement:right;align:bottom;arrow:false;"
|
||||
data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>居中对齐</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-options="placement:right;align:center;arrow:false;"
|
||||
data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>靠下对齐</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-options="placement:right;align:top;arrow:false;"
|
||||
data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
|
||||
</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">
|
||||
<tr>
|
||||
<td class="text-cyan z-px16" colspan="3">文本左方显示提示框（背景红色，字白色）</td>
|
||||
</tr>
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">类型</td>
|
||||
<td width="20%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>靠上对齐</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-options="placement:left;align:top;top:10;color:#fff;border-color:#f00;background-color:#f00;width:200px;"
|
||||
data-text="提示内容显示在文本下面，箭头左对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>居中对齐</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-options="placement:left;align:center;top:10;color:#fff;border-color:#ff0000;background-color:#f00;width:200px;"
|
||||
data-text="提示内容显示在文本下面，箭头居中对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>靠下对齐</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-options="placement:left;align:right;top:10;color:#fff;border-color:#f00;background-color:#f00;width:200px;"
|
||||
data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">移动鼠标到我上面</span>
|
||||
</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">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">类型</td>
|
||||
<td width="20%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>靠左对齐</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-options="event:click;align:left;top:10;width:200px;"
|
||||
data-text="提示内容显示在文本下面，箭头左对齐，可以自定义选择背景或边框">点击我打开，点其他地方关闭</span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>居中对齐</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-options="event:click;align:center;top:10;width:200px;"
|
||||
data-text="提示内容显示在文本下面，箭头居中对齐，可以自定义选择背景或边框">点击我打开，点其他地方关闭</span>
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>靠右对齐</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-options="event:click;align:right;top:10;width:200px;"
|
||||
data-text="提示内容显示在文本下面，箭头右对齐，可以自定义选择背景或边框">点击我打开，点其他地方关闭</span>
|
||||
</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">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">类型</td>
|
||||
<td width="20%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>指定data-id修改：</td>
|
||||
<td class="example"><span class="z-pointer" data-role="z-tooltip"
|
||||
data-id="t-updateTooltipText"
|
||||
data-options="event:click;align:left;top:10;width:200px;"
|
||||
data-text="原本内容：提示内容显示在文本下面，有箭头，左对齐"
|
||||
onclick="Z('#t-updateTooltipText').find('.z-content').html('改成新内容：提示内容显示在文本下面，有箭头，左对齐');" >点击我打开，点其他地方关闭</span>
|
||||
<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">
|
||||
<tr bgcolor="#f5f5f5">
|
||||
<td width="15%">类型</td>
|
||||
<td width="25%">效果预览</td>
|
||||
<td width="*">代码</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>靠左对齐</td>
|
||||
<td class="example"><input data-options="type:Integer;paste:true;" class="z-input z-blue z-w50 z-h30"
|
||||
onkeyup="doKeyup(this, {event:'show', top:10, width:50, height:20, align:'left', text:'当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5当前值低于5'});">
|
||||
小于5提示，>=5关闭
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>居中对齐</td>
|
||||
<td class="example"><input data-options="type:Integer;paste:true;" class="z-input z-blue z-w50 z-h30"
|
||||
onkeyup="doKeyup(this, {event:'show', top:10, width:200, height:10, align:'center', borderColor:'#ff0000', text:'当前值低于5'});">
|
||||
小于5提示，>=5关闭
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>靠右对齐</td>
|
||||
<td class="example"><input data-options="type:Integer;paste:true;" class="z-input z-blue z-w50 z-h30"
|
||||
onkeyup="doKeyup(this, {event:'show', top:10, width:200, height:10, align:'right', color: '#fff', borderColor:'#f00', backgroundColor:'#f00', text:'当前值低于5'});">
|
||||
小于5提示，>=5关闭
|
||||
</td>
|
||||
<td><pre class="z-text-preline"></pre></td>
|
||||
</tr>
|
||||
</table>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>知启蒙前端框架</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
|
||||
<meta name="Author" content="知启蒙" />
|
||||
<meta name="Keywords" content="ZhiqimUI 知启蒙 zhiqim 开发教程 Java HTML5"/>
|
||||
<meta name="Description" content="知启蒙前端框架（ZhiqimUI）是一套集成Javascript库、Css库、Font库、常用ico图标等，并在其上开发的大量UI组件组成的前端开发套件。"/>
|
||||
|
||||
<!-- 引入zhiqimUI的css文件 -->
|
||||
<link rel="stylesheet" href="https://zhiqim-org.oss-cn-shenzhen.aliyuncs.com/service/res/zhiqim_v1.5.0.r2018091201.css">
|
||||
|
||||
<!-- 引入zhiqimUI的js文件 -->
|
||||
<script src="https://zhiqim-org.oss-cn-shenzhen.aliyuncs.com/service/res/zhiqim_v1.5.0.r2018091201.min.js"></script>
|
||||
|
||||
<script>
|
||||
var i = 1;
|
||||
function doUpdate()
|
||||
{
|
||||
//以下代码将把id为text的input的value值改为"新的内容"。
|
||||
Z("#text").val("新的内容"+(i++));
|
||||
}
|
||||
|
||||
function doDialog()
|
||||
{
|
||||
//以下代码弹出一个对话框。支持两种（dialog.text和dialog.url）
|
||||
var dialog = new Z.Dialog();
|
||||
dialog.text = "<div class='z-absolute-center-middle z-w100 z-h60 z-px20'>对话框内容</div>";//弹出对话框的内置HTML
|
||||
//dialog.url = location.href;//使用iframe弹出加新URL
|
||||
dialog.width = 500;
|
||||
dialog.height = 300;
|
||||
dialog.execute();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 使用zhiqimUI的CSS定义 -->
|
||||
<table class="z-table z-bordered z-bd-rd8 z-absolute-center-middle zi-w300 z-h200">
|
||||
<tr>
|
||||
<td class="z-text-center">
|
||||
<input id="text" class="z-input z-large" value="原内容"> <button class="z-button z-blue z-large" onclick="doUpdate();">点击</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="z-text-center">
|
||||
<button class="z-button z-blue z-large" onclick="doDialog();">弹出对话框</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,728 @@
|
||||
<#def title = "AJAX"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术"/>
|
||||
<#def prevUrl = "flexcopy.htm"/>
|
||||
<#def nextUrl = "drag.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav("document")}
|
||||
|
||||
<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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "tool", "ajax")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "Ajax")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">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("ZuiPresenter");
|
||||
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("ZuiPresenter");
|
||||
ajax.setMethodName("doTestParam");
|
||||
ajax.addParam("111111");
|
||||
ajax.addParam("222222");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
Z.alert("状态："+this.responseStatus+"\r\n信息："+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("ZuiPresenter");
|
||||
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">四、调用成功，加载器，后端等待8秒（无参数、使用类别名@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("ZuiPresenter");
|
||||
ajax.setMethodName("doTestLoading");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
Z.alert("状态："+this.responseStatus+"\r\n信息："+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">五、调用成功，指定加载器元素，后端等待8秒（无参数、使用类别名@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("ZuiPresenter");
|
||||
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">六、调用成功，自定义加载器，后端等待8秒（无参数、使用类别名@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("ZuiPresenter");
|
||||
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("ZuiPresenter");
|
||||
ajax.setMethodName("doTestError");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
Z.alert("状态："+this.responseStatus+"\r\n信息："+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("ZuiPresenter");
|
||||
ajax.setMethodName("doTestException");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
Z.alert("状态："+this.responseStatus+"\r\n信息："+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("ZuiPresenter");
|
||||
ajax.setMethodName("doTestInterceptor");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
Z.alert("状态："+this.responseStatus+"\r\n信息："+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("ZuiPresenter");
|
||||
ajax.setMethodName("doTestInterceptor");
|
||||
ajax.execute();
|
||||
|
||||
Z.alert("状态："+ajax.responseStatus+"\r\n信息："+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("ZuiPresenter");
|
||||
ajax.setMethodName("doTestInterceptor2");
|
||||
ajax.setCallback(function()
|
||||
{
|
||||
alert("状态:"+this.responseStatus+"\r\n信息:"+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("ZuiPresenter");
|
||||
ajax.setMethodName("doTestInterceptor2");
|
||||
ajax.execute();
|
||||
|
||||
alert("状态:"+ajax.responseStatus+"\r\n信息:"+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("chkTutorialRedirect")
|
||||
public static void doTestInterceptor2(HttpRequest request)
|
||||
{
|
||||
request.setResponseResult("返回成功信息");
|
||||
}
|
||||
</span>
|
||||
<span class="z-text-prewrap z-pre">
|
||||
@AnAlias("chkTutorialRedirect")
|
||||
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>调用的类名或类别名，如ZuiPresenter/com.zhiqim.document.tutorial.ui.ZuiPresenter</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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,83 @@
|
||||
<#def title = "复制功能"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = "由于各浏览器剪贴板功能不一致，功能使用复杂，因此知启蒙是利用Flash的sprite容器制作的剪贴板功能，以达到跨浏览器支持对文本的复制功能。"/>
|
||||
<#def prevUrl = "../nav/dropdown.htm"/>
|
||||
<#def nextUrl = "ajax.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav("document")}
|
||||
|
||||
<script>
|
||||
function doChange(tabnav)
|
||||
{
|
||||
doUpdateCode(Z(tabnav));
|
||||
}
|
||||
|
||||
function doUpdateCode($this)
|
||||
{//更新代码
|
||||
var html = $this.find("section > div").htmlt();
|
||||
var ind = html.indexOf("<div");
|
||||
if (ind != -1){
|
||||
html = html.substring(0, ind);
|
||||
}
|
||||
|
||||
$this.find("section > div").next("div > span").html(html);
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "tool", "copy")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "复制功能")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">复制功能：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
在ZhiqimUI中，提供Z.copy(value);方法用于复制内容，该方法需要浏览器的支持HTML5，当前主流浏览器都支持
|
||||
</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">
|
||||
<!-- 复制按钮 -->
|
||||
<button class="z-button z-cyan z-w200" onclick="Z.copy(Z('#copy_content').val());Z.tips('复制成功');">点我复制下面文本框中的内容</button>
|
||||
<br><br>
|
||||
<!-- 复制内容 -->
|
||||
<textarea id="copy_content" class="z-textarea z-w200">默认简单模式H5</textarea>
|
||||
</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、定义一个button，编写onclick方法，方法内调用Z.copy函数即可<br>
|
||||
2、调用完成后，还可以使用Z.tips函数显示一下复制成功信息
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,281 @@
|
||||
<#def title = "拖拽与缩放"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " 拖拽是指定一个可拖动的对象，当鼠标按下时拖拽到其他位置。缩放是指定一个可缩放的对象，当鼠标按下时拉动对象使之放大或缩小。"/>
|
||||
<#def prevUrl = "ajax.htm"/>
|
||||
<#def nextUrl = "imageClipper.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav("document")}
|
||||
|
||||
<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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "tool", "drag")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "拖拽与缩放")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">拖拽与缩放：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
拖拽是指定一个可拖动的对象，当鼠标按下时拖拽到其他位置。缩放是指定一个可缩放的对象，当鼠标按下时拉动对象使之放大或缩小。
|
||||
</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;">
|
||||
<!-- 初始化拖拽控件 -->
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z.drag("drag_simple", "drag_simple_bar");
|
||||
});
|
||||
|
||||
function doResize(obj)
|
||||
{
|
||||
if (Z(obj).text() == "收起")
|
||||
{
|
||||
Z(obj).text("展开");
|
||||
Z("#drag_simple").css("height", "42px");
|
||||
Z("#drag_simple_List").css("visibility", "hidden");
|
||||
}
|
||||
else
|
||||
{
|
||||
Z(obj).text("收起");
|
||||
Z("#drag_simple").css("height", "200px");
|
||||
Z("#drag_simple_List").css("visibility", "visible");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- 可拖拽对象和拖把 -->
|
||||
<div id="drag_simple" class="z-absolute z-w300 z-h200" style="border:2px solid #888888;z-index:99999;">
|
||||
<div id="drag_simple_bar" class="z-relative z-w100p z-h40 z-text-white z-bg-999">
|
||||
<div class="z-float-left z-h40 z-lh40 z-pd-l10">全屏(z-index范围)拖拽（可拖动）</div>
|
||||
<div class="z-float-right z-mg6"><button class="z-button" onclick="doResize(this);">收起</button></div>
|
||||
</div>
|
||||
<div id="drag_simple_List" class="z-relative-left z-w100p z-h150 z-bg-gray z-lh25 z-overflow-x-hidden z-overflow-y-auto"></div>
|
||||
</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>
|
||||
|
||||
<#-- 二、拖拽范围 -->
|
||||
<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" id="drag_range_parent" style="min-height:250px;">
|
||||
<!-- 初始化拖拽控件 -->
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
Z.dragInParent("drag_range", "drag_range_bar", "drag_range_parent");
|
||||
});
|
||||
|
||||
function doResizeInParent(obj)
|
||||
{
|
||||
if (Z(obj).text() == "收起")
|
||||
{
|
||||
Z(obj).text("展开");
|
||||
Z("#drag_range").css("height", "42px");
|
||||
Z("#drag_range_List").css("visibility", "hidden");
|
||||
}
|
||||
else
|
||||
{
|
||||
Z(obj).text("收起");
|
||||
Z("#drag_range").css("height", "200px");
|
||||
Z("#drag_range_List").css("visibility", "visible");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<!-- 可拖拽对象和拖把 -->
|
||||
<div id="drag_range" class="z-absolute z-w300 z-h200" style="border:2px solid #888888;">
|
||||
<div id="drag_range_bar" class="z-relative z-w100p z-h40 z-text-white z-bg-999">
|
||||
<div class="z-float-left z-h40 z-lh40 z-pd-l10">在指定范围拖动（可拖动）</div>
|
||||
<div class="z-float-right z-mg6"><button class="z-button" onclick="doResizeInParent(this);">收起</button></div>
|
||||
</div>
|
||||
<div id="drag_range_List" class="z-relative-left z-w100p z-h150 z-bg-gray z-lh25 z-overflow-x-hidden z-overflow-y-auto"></div>
|
||||
</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、通过Z.dragInParent方法进行初始化，三个参数为三要求的id<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="min-height:250px;">
|
||||
<script language="javascript">
|
||||
<!--
|
||||
var dragList;
|
||||
|
||||
Z.onload(function()
|
||||
{
|
||||
dragList = new Z.DragList({pid: "mainDiv", callback: onCallback});
|
||||
dragList.isResizeRate = true;
|
||||
dragList.isDeleteIco = true;
|
||||
dragList.addImage("../../../inc/www/tutorial/1.png");
|
||||
dragList.addImage("../../../inc/www/tutorial/2.png");
|
||||
|
||||
var param = {"deliveryCode":"7020100","paramName":"buyerMessage","paramValue":"收-买家留言","referenceValue":"周末不在公司，请快递兄弟周一至周五送，谢谢！","type":0,"paramLeft":150,"paramTop":146,"paramWidth":142,"paramHeight":20,"fontName":"SimSun","fontSize":10,"fontColor":"#000000","bold":0,"italic":0,"underline":0,"alignment":1};
|
||||
var value = buildValue(param);
|
||||
var params = {width: param.paramWidth, height: param.paramHeight, top: param.paramTop, left: param.paramLeft};
|
||||
dragList.addHtml(value, params, {id: param.paramName}, false);
|
||||
});
|
||||
|
||||
function buildValue(param)
|
||||
{
|
||||
var _fontName = (param.fontName == "")?"":"font-family:"+param.fontName+";";
|
||||
var _fontSize = "font-size:"+param.fontSize+"pt;";
|
||||
var _fontColor = (param.fontColor == "")?"color:#000000;":"color:"+param.fontColor+";";
|
||||
var _bold = (param.bold == 1)?"font-weight:700;":"";
|
||||
var _italic = (param.italic == 1)?"font-style:italic;":"";
|
||||
var _underline = (param.underline == 1)?"text-decoration:underline;":"";
|
||||
var _alignment = (param.alignment == 1)?"text-align:left;":(((param.alignment == 2)?"text-align:center;":"text-align:right;"));
|
||||
var _value = "<div style='width:100%;height:100%;line-height:100%;"+_alignment+_fontName+_fontSize+_fontColor+_bold+_italic+_underline+"'>"+param.paramValue+"</div>";
|
||||
|
||||
if (param.type == 2)
|
||||
{
|
||||
var tableStr = "<table><tr height=22 valign=middle align=center><td width=5%>序号</td><td width=15%>商品编码</td><td width=35%>商品名称</td><td width=15%>规格</td><td width=15%>单价</td><td width=10%>数量</td></tr></table>";
|
||||
_value = "<div style='width:100%;height:100%;line-height:100%;"+_alignment+_fontName+_fontSize+_fontColor+_bold+_italic+_underline+"'>"+tableStr+"</div>";
|
||||
}
|
||||
|
||||
return _value;
|
||||
}
|
||||
|
||||
function addImage()
|
||||
{
|
||||
dragList.addImage("../../../inc/www/tutorial/1.png");
|
||||
}
|
||||
|
||||
function onCallback()
|
||||
{//回调
|
||||
Z("#realWidth").text(dragList.getWidth());
|
||||
Z("#realHeight").text(dragList.getHeight());
|
||||
}
|
||||
|
||||
function doSetWidth()
|
||||
{//手动设置高度
|
||||
dragList.setSizeRateWidth(Z("#widthValue").val());
|
||||
Z("#realWidth").text(dragList.getWidth());
|
||||
Z("#realHeight").text(dragList.getHeight());
|
||||
}
|
||||
|
||||
function doSetPos(pos)
|
||||
{//设置位置
|
||||
dragList.setPositionPoint(pos);
|
||||
Z("#realWidth").text(dragList.getWidth());
|
||||
Z("#realHeight").text(dragList.getHeight());
|
||||
}
|
||||
//-->
|
||||
</script>
|
||||
|
||||
<div class="z-relative-left z-w1000 z-h400">
|
||||
|
||||
<button class="z-button" onclick="addImage()">添加图片</button>
|
||||
|
||||
<!-- 宝贝主图 -->
|
||||
<div id="mainDiv" class="z-absolute" style="top:35px;left:20px;width:310px;height:310px;z-index:30;">
|
||||
<img id="mainImg" src="../../../inc/www/tutorial/default.jpg" width="100%" height="100%" style="z-index:30;">
|
||||
</div>
|
||||
|
||||
<!-- 虚线分开 -->
|
||||
<div class="z-absolute z-h400" style="top:5px;left:360px;width:1px;border:1px dashed #d5d5d5"></div>
|
||||
|
||||
<!-- 查询宝贝条件 -->
|
||||
<div class="z-absolute z-w600 z-h300" style="top:15px;left:370px;">
|
||||
<div class="z-absolute z-bold z-color-666" style="top:15px;left:10px;">标签位置：</div>
|
||||
<button onclick="doSetPos(1);" class="z-button z-absolute" style="top:10px;left:85px;" >左上</button>
|
||||
<button onclick="doSetPos(2);" class="z-button z-absolute" style="top:10px;left:145px;" >右上</button>
|
||||
<button onclick="doSetPos(3);" class="z-button z-absolute" style="top:10px;left:205px;" >左下</button>
|
||||
<button onclick="doSetPos(4);" class="z-button z-absolute" style="top:10px;left:265px;" >右下</button>
|
||||
<div class="z-absolute z-text-red" style="top:15px;left:330px;">注：图标可拖放</div>
|
||||
|
||||
<div class="z-absolute z-bold z-color-666" style="top:60px;left:10px;">设置宽度： </div>
|
||||
<div class="z-absolute z-color-666" style="top:55px;left:80px;">
|
||||
<input type="text" id="widthValue" name="widthValue" data-options="type:Numeric;paste:true;" size="4" maxlength="3" class="z-input z-red" onkeyup="doSetWidth();"> <font style="font-size:12px;">像素</font>
|
||||
</div>
|
||||
<div class="z-absolute z-color-666" style="top:58px;left:180px;">
|
||||
宽：<span id="realWidth" style="width:20px;color:blue;font-size:20px;"></span> <font style="font-size:12px;">像素</font>
|
||||
高：<span id="realHeight" style="width:20px;color:blue;font-size:20px;"></span> <font style="font-size:12px;">像素</font>
|
||||
</div>
|
||||
</div>
|
||||
</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、比较复制的拖拽和缩放，支持IMG和DIV两种<br>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,87 @@
|
||||
<#def title = "头像裁剪"/>
|
||||
<#def keyword = "Avatar"/>
|
||||
<#def desc = "头像裁剪是指对上传的图片，根据要求裁剪成指定大小的图片。支持放大和缩小图片，和通过移动图片，锁定裁剪位置"/>
|
||||
<#def prevUrl = "drag.htm"/>
|
||||
<#def nextUrl = "upload.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav("document")}
|
||||
${Scripts.src("//zhiqim-org.oss-cn-shenzhen.aliyuncs.com/ztmpl/zhiqim_manager/zhiqim_image_clipper.js")}
|
||||
|
||||
<script>
|
||||
Z.onload(function()
|
||||
{
|
||||
var clipper = new Z.ImageClipper();
|
||||
clipper.elem = "clipper";
|
||||
clipper.img = "//zhiqim-org.oss-cn-shenzhen.aliyuncs.com/ztmpl/zhiqim_manager/zhiqim_image_clipper_default.jpg";
|
||||
clipper.save = function()
|
||||
{
|
||||
Z.alert("在这里编写调用后台代码");
|
||||
};
|
||||
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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "tool", "imageClipper")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "头像裁剪")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">头像裁剪：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
头像裁剪是指对上传的图片，根据要求裁剪成指定大小的图片。支持放大和缩小图片，和通过移动图片，锁定裁剪位置
|
||||
</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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,314 @@
|
||||
<#def title = "文件上传"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " 知启蒙文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传等。"/>
|
||||
<#def prevUrl = "imageClipper.htm"/>
|
||||
<#def nextUrl = "uploadLarge.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav("document")}
|
||||
|
||||
<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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "tool", "upload")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "文件上传")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">文件上传：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
知启蒙文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传等。
|
||||
</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 = "ZUpload";
|
||||
upload.fileDir = "tutorial";
|
||||
upload.onCompleted = function(fileUrl){Z("#ZUploadCompleted").html("上传成功，URL：<a href='"+fileUrl+"' target='_blank'>"+fileUrl+"</a>");};
|
||||
upload.execute();
|
||||
});
|
||||
</script>
|
||||
<!-- 上传文件按钮 -->
|
||||
<button id="ZUpload" type="button" class="z-button z-blue z-w120">上传文件</button><br><br>
|
||||
|
||||
<!-- 上传文件完成信息 -->
|
||||
<span id="ZUploadCompleted"></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.contextPath = "${context.getContextPath()}";
|
||||
uploadpreview.elem = "ZUploadPreview";
|
||||
uploadpreview.fileDir = "tutorial";
|
||||
uploadpreview.onPreview = function(fileUrl){Z("#ZUploadPreviewLocation").html("<img src='"+fileUrl+"' style='max-width:80px;max-height:80px'>")};
|
||||
uploadpreview.onCompleted = function(fileUrl){Z("#ZUploadPreviewCompleted").html("上传成功，URL：<a href='"+fileUrl+"' target='_blank'>"+fileUrl+"</a>");};
|
||||
uploadpreview.execute();
|
||||
});
|
||||
|
||||
function doUploadonePreview()
|
||||
{
|
||||
uploadpreview.upload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 上传文件预览 -->
|
||||
<div id="ZUploadPreviewLocation" class="z-w100p z-h80"></div>
|
||||
|
||||
<!-- 上传文件按钮 -->
|
||||
<button id="ZUploadPreview" type="button" class="z-button z-blue z-w120">选择文件</button>
|
||||
<button id="ZUploadUpload" type="button" class="z-button z-w120" onclick="doUploadonePreview();">上传文件</button><br><br>
|
||||
|
||||
<!-- 上传文件完成信息 -->
|
||||
<span id="ZUploadPreviewCompleted"></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 = "ZUploadmultPreview";
|
||||
uploadmultpreview.fileDir = "tutorial";
|
||||
uploadmultpreview.onPreview = function(results)
|
||||
{
|
||||
uploadmultpreview.buildPreviewHtml("ZUploadmultPreviewLocation");
|
||||
};
|
||||
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：<a href='"+results[i].success+"' target='_blank'>"+results[i].success+"</a>";
|
||||
else
|
||||
html += "上传失败，原因："+results[i].error;
|
||||
}
|
||||
Z("#ZUploadmultPreviewCompleted").html(html);
|
||||
};
|
||||
uploadmultpreview.execute();
|
||||
});
|
||||
|
||||
function doUploadmultPreview()
|
||||
{
|
||||
uploadmultpreview.upload();
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- 上传文件预览 -->
|
||||
<div id="ZUploadmultPreviewLocation" class="z-w100p z-h80"></div>
|
||||
|
||||
<!-- 上传文件按钮 -->
|
||||
<div class="z-relative-left z-w100p">
|
||||
<button id="ZUploadmultPreview" class="z-button z-blue z-w120">选择文件</button>
|
||||
<button id="ZUploadmultUpload" class="z-button z-w120" onclick="doUploadmultPreview();">上传文件</button>
|
||||
</div>
|
||||
|
||||
<!-- 上传文件完成信息 -->
|
||||
<div id="ZUploadmultPreviewCompleted" 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;">
|
||||
<!-- 表单文件上传 -->
|
||||
${Htmls.toCallFrame()}
|
||||
<form action="uploadForm.htm" method="post" enctype="multipart/form-data" data-role="z-call-frame">
|
||||
参数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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,136 @@
|
||||
<#def title = "大文件上传"/>
|
||||
<#def keyword = "大文件上传 ZhiqimUI zhiqim"/>
|
||||
<#def desc = " 知启蒙文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传，大文件上传断点续传（HTML5和Flash两种）等。"/>
|
||||
<#def prevUrl = "upload.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav("document")}
|
||||
|
||||
<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>
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "tool", "uploadlarge")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "大文件上传")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">大文件上传：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
知启蒙大文件上传提供了（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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
@@ -0,0 +1,72 @@
|
||||
<#def title = "富文本编辑器"/>
|
||||
<#def keyword = "ZhiqimUI"/>
|
||||
<#def desc = " 实现源码编辑、撤销、重做、字体样式、文本对齐、超链接、图片上传、复制粘贴等功能。"/>
|
||||
<#def prevUrl = "drag.htm"/>
|
||||
<#def nextUrl = "uploadLarge.htm"/>
|
||||
${zhiqim_com_header()}
|
||||
${zhiqim_com_topnav("document")}
|
||||
${Styles.src(context.getRootPath("/src/zteditor/zteditor.css"))}
|
||||
${Scripts.src(context.getRootPath("/src/zteditor/zteditor.js"))}
|
||||
|
||||
<!--容器开始 -->
|
||||
<div id="container" class="container">
|
||||
<!--边导航-->
|
||||
${zhiqim_com_ui("tutorial", "ui", "tool", "zteditor")}
|
||||
|
||||
<!--主体-->
|
||||
<div id="mainbody" class="mainbody">
|
||||
${zhiqim_com_breadcrumb("文库", "教程", "富文本编辑器")}
|
||||
<div class="content">
|
||||
|
||||
<#-- 标题 -->
|
||||
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #2293e4">
|
||||
<p class="z-text-blue">富文本编辑器：</p>
|
||||
<p class="z-color-333" style="text-indent:38px;">
|
||||
实现源码编辑、撤销、重做、字体样式、文本对齐、超链接、图片上传、复制粘贴等功能。
|
||||
</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>
|
||||
${zhiqim_com_chapter()}
|
||||
</div>
|
||||
|
||||
<!-- 主体结束 -->
|
||||
</div>
|
||||
|
||||
<!-- 容器结束 -->
|
||||
</div>
|
||||
${zhiqim_com_footer()}
|
||||
Reference in New Issue
Block a user