ziqim/zhiqim_ui/document/tutorial/ui/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_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">&lt;!-- 引入zhiqimUI的css文件 --&gt;</span>
&lt;link rel="stylesheet" href="/service/res/zhiqim_v1.4.0.r2018010101.css"&gt;

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

<span class="zi-text-green">&lt;!-- 使用zhiqimUI的CSS定义 --&gt;</span>
&lt;table class="z-table z-bordered z-bd-rd8"&gt;
&lt;tr&gt;
    &lt;td&gt;
        &lt;input id="text" class="z-input" value="原内容"&gt;
    &lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;

<span class="zi-text-green">&lt;!-- 使用zhiqimUI的JS代码修改值 --&gt;</span>
&lt;script&gt;

<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();

&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/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()}