<#-- 标题 -->

什么是“ZmUI”

“ZmUI”是“ZhiqimUI.mobile”的简写，是在“ZhiqimUI”的基础上进行修改、优化得到的一套更适用于mobile端的前端开发套件。
1、使用方法同“ZhiqimUI”。
2、ZhiqimUI中通用的css样式仍使用z-、zi-前缀；mobile端新增的css样式，则统一使用z-前缀约束。
3、mobile端专用的插件库后续也会持续增加。

<#-- ZmUI目录结构 -->

ZmUI目录结构

zhiqim_res.jar

font
zhiqim.woff
image
ico_12.png
......
ico_tree.png
zhiqim.mobile_2017010101.css
zhiqim.mobile_2017010101.min.js

ZhiqimUI统一打包成[zhiqim_res.jar]。包括font、image和核心的css、js文件。
类路径为：com.zhiqim.zhiqim.httpd.context.service.resource
目录[font]存放的是z-font对应的字体文件，如、等。
目录[image]存放的CSS和插件常用到的一些图标素材，如文件图标、箭头图标等。
文件[zhiqim.mobile_2017010101.css]是CSS核心库，为方便查找支持的样式，目前只作了空格处理，没有作最大压缩，其中2017010101是版本号，升级会变动。
文件[zhiqim.mobile_2017010101.min.js]是JS核心库，原文件比较大，压缩后大约100K左右，如需查看API或源文件，在文档中查看，其中2017010101是版本号，升级会变动。

<#-- 看一段简单的FTML代码风格 -->

如何使用ZmUI？

<link rel="stylesheet" href="/service/res/zhiqim.mobile_2017010101.css">  <script src="/service/res/zhiqim.mobile_2017010101.min.js"></script>   <div class="z-bar-top"> <a href="#" class="z-left"><i class="z-font z-rem18 z-arrowhead-left"></i></a> <div class="z-title">ZhiqimUI.mobile</div> </div>  <div class="z-bar-bottom"> <a href="#" class="z-direction-column z-active"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a> <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a> <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a> <a href="#" class="z-direction-column"><i class="z-font z-apps"></i><span class="z-mg-t3">文案</span></a> </div>  <div class="z-container"> <div class="z-flexBox-list z-h100p"><div id="testText" class="z-rem30 z-text-center">这里是内容</div></div> </div>  <script> // 这里用来写就是代码 Z("#testText").html("这里是内容"); </script>

<#-- ZhiqimUI CSS核心库 -->

ZhiqimUI CSS核心库

功能	说明
全局定义	全局定义是指在全局定义里的标签缺省下的样式规则
颜色定义	颜色定义是指在ZhiqimUI的核心CSS文件中，默认提供的全局、白色、黑色和红、橙、黄、绿、青、蓝、紫共十种颜色的定义，包括字体颜色、背景颜色和边框颜色等，以及对应的样式名称。
字体图标	“字体图标”是矢量图片按字体规范设计的一种新的图标，凡狐字体图标放在/service/res/font/zhiqim.woff文件中，当前开发和收集的图标分操作类、文档类、设备类、图表类、实体类五种，共五十九个图标。字体图标不支持斜体，以便使用<i>标签来定义，如<i class="z-font z-config"></i>
文本样式	文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等。
块样式	块样式是指对一个块区域增加样式规则，如指定块隐藏显示、块定位、块宽、块宽百分比、块高、块高百分比、内边距、外边距等属性。

<#-- ZhiqimUI JS核心库 -->

ZhiqimUI JS核心库

功能	说明
全局定义	凡狐JS统一命名空间为“F”，同时“F”也是window下全局函数，如果“F”有定义冲突请使用全称“zhiqim”。在全局“F”命名空间下定义的全局属性、全局函数、全局正则表达式和全局类。
静态对象	静态对象是把一系列常用的对象定义成静态属性和函数。目前包括有浏览器对象（Z.B）、文档对象（Z.D）、事件对象（Z.E）、元素对象（Z.EL）、HTML对象（Z.H）、地址对象（Z.L）、COOKIE对象（Z.CK）。
工具对象	工具对象也是静态对象的一种，把一系列常用的静态属性和函数归类到一个工具对象中。目前包括断言工具（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）。
查询对象Z.Query	Z.Query是设计成类似jQuery的DOM操作类。Z.Query采用HTML5原生的document.querySelectorAll实现了大部分jQuery的API，如selector，DOM操作，事件方法，动画等。并增加了自身的一些特性和命名，如offsetLeftBody()、focusEnd()等。

<#-- ZhiqimUI 插件库 -->

ZhiqimUI 插件库

功能	说明
表单插件库
输入框	输入框样式是指对输入框增加样式规则，如指定输入框长度大小、边框颜色、和输入控制等。
按钮	按钮样式是指对按钮增加样式规则，按钮分为三种，一是标准按钮、二为筛选按钮、三是多选按钮。样式规则包括按钮大小、颜色、边框颜色、选中特效等。
日历	日历控件是在输入框触发时展开一个年月日时分秒的日期界面，按日历格式显示出来，通过点击和选择得到要求的日期或时间。当前日历控件支持选择日期、选择日期+时间、选择日期+时分三种。
对话框插件库
告警对话框	警告对话框是自定义对话框的一种参考alert方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的警告对话框，支持设置警告内容和点击确定后回调函数。
询问对话框	询问对话框是自定义对话框的一种参考confirm方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的确认对话框，支持设置确认内容和点击确定后回调函数，点击取消不向下处理。
提示对话框	提示对话框是自定义对话框的一种参考prompt方法生成的对话框。目标是在屏幕的中间提供没有警告声音且美观的提示对话框，支持设置提示内容和点击确定后回调函数，点击取消不向下处理。
加载对话框	加载对话框是自定义对话框的一种没有标题只有加载中提示的对话框。目标是在屏幕或用户指定的元素可视范围的中间提供没有警告声音且美观的加载对话框，支持设置九个参数来定义加载中界面，无关闭按钮，由业务实现关闭。
导航插件库
标签页	标签页是参考tabnav设计出更简单易用的内容重叠布局的导航页。标签页使用nav和section作为是标签和内容显示。在nav中使用li表示每个标签，在section中使用div作为每个标签显示的内容。
工具插件库
Ajax调用	AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。凡狐AJAX采用面向RMI的概念设计，通过指定类和方法，传入参数对应方法的参数，通过RMI访问JAVA类的方法获取执行结果。
文件上传	凡狐文件上传提供了多种上传方法，支持表单上传、单文件上传，多文件上传，预览再上传，大文件上传断点续传（HTML5和Flash两种）等。

${zhiqim_turorial_ZmUI_demo_start()}

ZhiqimUI.mobile

文案文案文案文案

这里是内容

${zhiqim_turorial_ZmUI_demo_end()}