ziqim/zhiqim_ui/document/tutorial/uim/index.htm

<#def title = "ZhiqimUI"/>
<#def keyword = "ZhiqimUI"/>
<#def desc = "“ZhiqimUI”是一套集成Javascript库、Css库、Font库、常用ico图标和Flash控件等，并在其上开发的大量UI组件组成的前端开发套件。"/>
<#def prevUrl = "../index.htm"/>
<#def nextUrl = "./css/css.htm"/>
${zhiqim_com_head()}
${zhiqim_com_head_main()}
${zhiqim_com_head_end()}

${zhiqim_com_mobileUI_scrollJs()}
${zhiqim_com_body()}
${zhiqim_com_topnav("ui")}

<!--容器开始 -->
<div id="container" class="container">

${zhiqim_com_container_ui("ZmUI", "index", "")}

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

${zhiqim_com_breadcrumb("UI", "ZmUI", "", "")}

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

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

<#-- 标题 -->
<div class="z-relative-left z-w100p z-pd16 z-bg-blue z-px18 z-lh200p z-bold" style="border-left:5px solid #4bacc6">
    <p class="z-text-blue">什么是“ZmUI”</p>
    <p class="z-color-333" style="text-indent:38px;">
        “ZmUI”是“ZhiqimUI.mobile”的简写，是在“ZhiqimUI”的基础上进行修改、优化得到的一套更适用于mobile端的前端开发套件。<br>
        1、使用方法同“ZhiqimUI”。<br>
        2、ZhiqimUI中通用的css样式仍使用z-、zi-前缀；mobile端新增的css样式，则统一使用z-前缀约束。<br>
        3、mobile端专用的插件库后续也会持续增加。<br>
    </p>
</div>

<#-- ZmUI目录结构 -->
<div class="tutorial title">ZmUI目录结构</div>
<div class="z-relative-left z-text-black z-w400 z-show-ib z-samp" style="height:220px;font-size:16px;line-height:100%;">
    <i class="z-ico z-tree z-root z-normal z-mg-r6"></i>zhiqim_res.jar
    <ul>
        <li><i class="z-ico z-tree z-node z-normal"></i><i class="z-ico z-tree z-open z-normal z-mg-r6"></i>font</li>
        <li><i class="z-ico z-tree z-vertline z-normal"></i><i class="z-ico z-tree z-lastnode z-normal"></i><i class="z-ico z-tree z-attribute z-normal z-mg-r6"></i>zhiqim.woff</li>
        <li><i class="z-ico z-tree z-node z-normal"></i><i class="z-ico z-tree z-open z-normal z-mg-r6"></i>image</li>
        <li><i class="z-ico z-tree z-vertline z-normal"></i><i class="z-ico z-tree z-node z-normal"></i><i class="z-ico z-tree z-attribute z-normal z-mg-r6"></i>ico_12.png</li>
        <li><i class="z-ico z-tree z-vertline z-normal"></i><i class="z-ico z-tree z-node z-normal"></i><i class="z-ico z-tree z-attribute z-normal z-mg-r6"></i>......</li>
        <li><i class="z-ico z-tree z-vertline z-normal"></i><i class="z-ico z-tree z-lastnode z-normal"></i><i class="z-ico z-tree z-attribute z-normal z-mg-r6"></i>ico_tree.png</li>
        <li><i class="z-ico z-tree z-node z-normal"></i><i class="z-ico z-tree z-item z-normal z-mg-r6"></i>zhiqim.mobile_2017010101.css</li>
        <li><i class="z-ico z-tree z-lastnode z-normal"></i><i class="z-ico z-tree z-item z-normal z-mg-r6"></i>zhiqim.mobile_2017010101.min.js</li>
    </ul>
</div>
<div class="tutorial z-relative-left z-text-black z-pd-t3" style="font-size:16px;line-height:250%;">
    <ul>
        <li>
            ZhiqimUI统一打包成[<span class="z-text-cyan">zhiqim_res.jar</span>]。包括font、image和核心的css、js文件。<br>
            类路径为：com.zhiqim.zhiqim.httpd.context.service.resource
        </li>
        <li>目录[<span class="z-text-cyan">font</span>]存放的是z-font对应的字体文件，如<i class="z-font z-config"></i>、<i class="z-font z-save"></i>等。</li>
        <li>目录[<span class="z-text-cyan">image</span>]存放的CSS和插件常用到的一些图标素材，如文件图标、箭头图标等。</li>
        <li>文件[<span class="z-text-cyan">zhiqim.mobile_2017010101.css</span>]是CSS核心库，为方便查找支持的样式，目前只作了空格处理，没有作最大压缩，其中2017010101是版本号，升级会变动。</li>
        <li>文件[<span class="z-text-cyan">zhiqim.mobile_2017010101.min.js</span>]是JS核心库，原文件比较大，压缩后大约100K左右，如需查看API或源文件，在文档中查看，其中2017010101是版本号，升级会变动。</li>
    </ul>
</div>

<#-- 看一段简单的FTML代码风格 -->
<div class="tutorial title">如何使用ZmUI？</div>

<div class="z-text-prewrap z-pre zi-px16">
<span class="zi-text-green">&lt;!-- 引入zhiqimUI的css文件 --&gt;</span>
&lt;link rel="stylesheet" href="/service/res/zhiqim.mobile_2017010101.css"&gt;

<span class="zi-text-green">&lt;!-- 引入zhiqimUI的js文件 --&gt;</span>
&lt;script src="/service/res/zhiqim.mobile_2017010101.min.js"&gt;&lt;/script&gt;

<span class="zi-text-green">&lt;!-- 使用zhiqimUI的整体布局架构 --&gt;</span>

<span class="zi-text-green">&lt;!-- 顶部导航 --&gt;</span>
&lt;div class="z-bar-top"&gt;
    &lt;a href="#" class="z-left"&gt;&lt;i class="z-font z-rem18 z-arrowhead-left"&gt;&lt;/i&gt;&lt;/a&gt;
    &lt;div class="z-title"&gt;ZhiqimUI.mobile&lt;/div&gt;
&lt;/div&gt;

<span class="zi-text-green">&lt;!-- 底部导航 --&gt;</span>
&lt;div class="z-bar-bottom"&gt;
    &lt;a href="#" class="z-direction-column z-active"&gt;&lt;i class="z-font z-apps"&gt;&lt;/i&gt;&lt;span class="z-mg-t3"&gt;文案&lt;/span&gt;&lt;/a&gt;
    &lt;a href="#" class="z-direction-column"&gt;&lt;i class="z-font z-apps"&gt;&lt;/i&gt;&lt;span class="z-mg-t3"&gt;文案&lt;/span&gt;&lt;/a&gt;
    &lt;a href="#" class="z-direction-column"&gt;&lt;i class="z-font z-apps"&gt;&lt;/i&gt;&lt;span class="z-mg-t3"&gt;文案&lt;/span&gt;&lt;/a&gt;
    &lt;a href="#" class="z-direction-column"&gt;&lt;i class="z-font z-apps"&gt;&lt;/i&gt;&lt;span class="z-mg-t3"&gt;文案&lt;/span&gt;&lt;/a&gt;
&lt;/div&gt;

<span class="zi-text-green">&lt;!-- 内容盒子 --&gt;</span>
&lt;div class="z-container"&gt;
    &lt;div class="z-flexBox-list z-h100p"&gt;&lt;div id="testText" class="z-rem30 z-text-center"&gt;这里是内容&lt;/div&gt;&lt;/div&gt;
&lt;/div&gt;

<span class="zi-text-green">&lt;!-- 使用zhiqimUI的JS代码修改值 --&gt;</span>
&lt;script&gt;
<span class="zi-text-green">&nbsp;&nbsp;&nbsp;&nbsp;// 这里用来写就是代码</span>
    Z("#testText").html("这里是内容");
&lt;/script&gt;
</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文件中，当前开发和收集的图标分
        操作类、文档类、设备类、图表类、实体类五种，共五十九个图标。
        字体图标不支持斜体，以便使用&lt;i&gt;标签来定义，如&lt;i class="z-font z-config"&gt;&lt;/i&gt;
    </td>
</tr>
<tr>
    <td class="tutorial feature"><a href="css/text.htm">文本样式</a></td>
    <td>文本样式是指对文本文字增加样式规则，如指定文本粗斜体、文本上下标、文本字体大小、文本行高、文本强制换行、强制不换行、省略隐藏、文本标题属性、文本对齐方式和文本附带的下划线删除线、以及编码突出效果等。</td>
</tr>
<tr>
    <td class="tutorial feature"><a href="css/block.htm">块样式</a></td>
    <td>块样式是指对一个块区域增加样式规则，如指定块隐藏显示、块定位、块宽、块宽百分比、块高、块高百分比、内边距、外边距等属性。</td>
</tr>
</table>

<#-- ZhiqimUI JS核心库 -->
<div class="tutorial title">ZhiqimUI JS核心库</div>

<table class="z-table z-bordered z-pd10 z-lh200p">
<tr bgcolor="#f5f5f5">
    <td width="30%">功能</td>
    <td width="*">说明</td>
</tr>
<tr>
    <td class="tutorial feature"><a href="js/js.htm">全局定义</a></td>
    <td>凡狐JS统一命名空间为“F”，同时“F”也是window下全局函数，如果“F”有定义冲突请使用全称“zhiqim”。在全局“F”命名空间下定义的全局属性、全局函数、全局正则表达式和全局类。</td>
</tr>
<tr>
    <td class="tutorial feature"><a href="js/static.htm">静态对象</a></td>
    <td>静态对象是把一系列常用的对象定义成静态属性和函数。目前包括有浏览器对象（Z.B）、文档对象（Z.D）、
        事件对象（Z.E）、元素对象（Z.EL）、HTML对象（Z.H）、地址对象（Z.L）、COOKIE对象（Z.CK）。
    </td>
</tr>
<tr>
    <td class="tutorial feature"><a href="js/util.htm">工具对象</a></td>
    <td>工具对象也是静态对象的一种，把一系列常用的静态属性和函数归类到一个工具对象中。目前包括断言工具（Z.A/Z.Asserts）、对象工具（Z.O/Z.Objects）、类型工具（Z.T/Z.Types）、
        验证工具（Z.V/Z.Validates）、表单工具（Z.F/Z.FM）、JSON工具（Z.J/Z.Jsons）、日期工具（Z.DT/Z.DateTimes）、数组工具（Z.AR/Z.Arrays）、字符串工具（Z.S/Z.Strings）、算术工具（Z.Maths）、
        金额工具（Z.AM/Z.Amounts）和颜色工具（Z.Colors）。
    </td>
</tr>
<tr>
    <td class="tutorial feature"><a href="js/query.htm">查询对象Z.Query</a></td>
    <td>Z.Query是设计成类似jQuery的DOM操作类。Z.Query采用HTML5原生的document.querySelectorAll实现了大部分jQuery的API，如selector，DOM操作，事件方法，动画等。
        并增加了自身的一些特性和命名，如offsetLeftBody()、focusEnd()等。
    </td>
</tr>
</table>

<#-- ZhiqimUI 插件库 -->
<div class="tutorial title">ZhiqimUI 插件库</div>

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

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

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

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

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

${zhiqim_com_footer()}