开始
约定
UI元素类型及定义
ZUI中包含各种各样的界面元素(或控件),例如按钮、列表、表格等,甚至一些特定场景用到的一组元素也会在ZUI中精心设计,例如评论列表。为了更好的展示我们的设计理念,把这些元素归为如下四类:
- 基本控件:用来构建网页应用的基本界面单元,例如按钮、文本标签、输入框等。
- 组件:通过一个以上的基本控件组合而成的较复杂的界面单元。例如表单、菜单、表格等。
- Javascript 组件:这些组件要正常使用会使用到Javascript。某些Javascript组件需要手动调用来启用。
- 视图:视图是将基本控件和组件组合使用来展现网站上的通用内容,例如评论视图及文章预览列表视图。
ZUI中的大多数界面元素都有不同的子类型、状态及参数。关于类型、状态及参数的定义如下:
- 类型:同一种界面单元的不同类型,例如按钮有主要按钮、次要按钮及危险按钮等,导航菜单类型有普通导航及顶部固定导航等。任何时候都应该只为同一个界面元素指定一种类型,默认类型无需指定。
- 状态:状态为同一种界面单元允许在不同的状态中切换,例如按钮有正常状态和不可用状态,下拉菜单有展开及收拢状态,菜单项目有选中和未选中状态等。在同一个界面元素中允许叠加多个状态。
- 参数:参数作为界面单元如何展现提供依据,例如表格是否隔行变色,是否启用鼠标悬停等。可以同时指定多个参数。
通用状态和参数
很多状态和参数在不同的控件或组件中具有一致的用法和相同的含义。在ZUI中,这些通用的状态和参数具有固定的名字(CSS 类名)。
常用通用状态如下:
名称 | 说明 | 常见使用对象 |
---|---|---|
.active |
指示控件或者其子项目已经被激活。 | 导航条目、下拉菜单条目、菜单列表、按钮组中可以激活的按钮等。 |
.hover |
指示控件正处于鼠标悬停状态,在CSS中相对于:hover 选择器。 |
少部分需要Javascript处理的控件。 |
.focus |
指示控件正处于鼠标悬停状态,在CSS中相对于:focus 选择器。 |
少部分需要Javascript处理的控件。 |
.disabled |
指示控件处于不可用状态,通常与DOM属性disabled="disabled" 一起使用。 |
按钮、可以点击菜单项目、超链接、表单元素等。 |
.in |
用于控制控件显示或消失的动画过程。在控件显示时指示控件已准备完成CSS动画并完全显示;在控件消失时如果移除该状态指示控件已准备执行控件消失动画;与状态.collapse 一起使用时表示处于完全展开状态。 |
标签页、下拉菜单等 |
.open |
指示隐藏的内容已经完全展示。 | 下拉菜单等。 |
.collapse |
指示当前组件可以被折叠或展开。与状态.in 一起出现时表示组件已被展开,没有此状态则反之。 |
响应式导航、折叠菜单等。 |
.collapsing |
指示当前组件正处于折叠或展开的动画过程中。 | 响应式导航、折叠菜单等。 |
常见的通用参数如下:
名称 | 说明 | 常见使用对象 |
---|---|---|
.bordered |
使得组件具备边框样式。 | 表格等。 |
.borderless |
移除控件的边框样式。 | 表格等。 |
.inverse |
指示组件使用与默认颜色样式相对的样式。 | 导航等。 |
.fixed |
指示当前组件位置被固定,不收页面交互影响。 | |
.with-icon |
指示当前组件在显示内容时能够额外显示一个图标。 | 消息框等。 |
界面元素的命名
命名原则
- 所有控件、组件、视图、模块和行为的命名都应该使用最常见的名称,准确提现界面元素功能。例如菜单应该命名为menu,而不是navigation。
- 类型、状态及参数的命名均为元素名加上类型(或状态及参数名)前缀,中间用间隔号分隔,例如固定位置的菜单为
.menu-fixed
。对于通用状态或参数可以省略前缀,例如一个菜单项目处于激活状态,则只需命名为.active
,而不许命名为.menu-active
。 - 所有控件、组件、视图、模块和行为的命名均不加与当前元素功能无关的前缀和额外命名,例如一个导航菜单命名为
.nav
,而不增加额外命名为.ui.nav
或者.zui.nav
。
文件目录结构
预编译的内容
下载预编译压缩包解压后将会得到以下目录结构:
zui/ ├── css/ │ ├── zui.css │ ├── zui.min.css │ ├── zui.lite.css │ ├── zui.lite.min.css │ ├── zui-theme.css │ └── zui-theme.min.css ├── js/ │ ├── zui.js │ ├── zui.min.js │ ├── zui.lite.js │ └── zui.lite.min.js └── fonts/ ├── zenicon.eot ├── zenicon.svg ├── zenicon.ttf └── zenicon.woff
css目录下提供了三种编译类型:‘zui’、‘zui.lite’、‘zui-theme’,其中‘zui.lite’为精简版样式(关于精简版请参考本文档后续章节),‘zui-theme’为zui的主题样式。每种编译类型均提供了压缩版本,对应的文件名为‘*.min.css’。js目录下提供对应的js文件。字体图标放在‘fonts’文件夹下。
源码目录结构
可以随时从Github上下载ZUI的源码。不仅仅包含所有开发源码文件,而且包含完整的文档和示例。如果你需要定制的编译版本更应该下载源码。以下简要说明源码目录结构。
zui/ ├── src/ ZUI的源码目录 │ ├── less/ │ ├── js/ │ ├── fonts/ │ └── apps/ 一些自定义的编译配置 ├── dist/ 预编译输出目录 │ ├── css/ │ ├── js/ │ └── fonts/ ├── docs/ 文档 │ └── example/ 文档中用到的例子 ├── assets/ 一些依赖的或者配合使用的其他资源,包含jquery等 ├── Gruntfile.js Grunt编译脚本 └── index.html 文档首页
关于简洁版
ZUI中包含了丰富的组件,但在构建一些轻量的应用时并不需要所有内容。ZUI预编译版本中提供了一些简洁的版本。包含了ZUI中绝大部分常用内容,经过压缩后体积更小。你可以在dist目录下找到文件名包含'.lite'的文件记为简洁的版本。
在后续文档中,会使用标签 LITE 标注在简洁版中提供的内容。
如果你需要更精确的控制所需的内容,强烈建议下载我们的源码来进行自定义配置并编译独一无二的版本。
编译及定制
ZUI使用 Grunt 作为编译系统。如果不了解 Grunt 也没有关系,Grunt是一个非常棒而且容易上手的工具。下面给出简要步骤来准备编译ZUI,如果想了解更多请访问Grunt官方网站。
安装Grunt
Grunt构建在nodejs之上。在安装Grunt之前需要首先下载并安装node.js。最新版的nodejs已包含npm(node packaged modules)。npm是nodejs用来管理扩展包的工具。
安装nodejs之后,在命令行进行如下操作:
- 在全局环境中安装
grunt-cli
:npm install -g grunt-cli
。 - 进入ZUI源码目录,执行
npm install
命令。nmp将读取包配置文件package.json
文件并自动安装所有依赖的扩展包。
完成上述步骤就可以进行编译了。只需要进入ZUI中使用命令行输入对应的命令就可以启动编译任务。以下为ZUI内置的一些常用任务命令。
grunt dist |
编译css和js文件,并拷贝图标字体文件,所有新的文件放置在dist目录下。 |
grunt assets |
拷贝ZUI依赖的第三方插件,并根据当前主题生成对应的样式表。所有新的文件放置在assets目录下。 |
grunt build |
根据自定义配置生成css和js文件,所有新的文件放置在build文件夹下。目前ZUI源码中包含蝉知、禅道、然之的配置。 |
grunt |
重新生成所有内容,但不包含自定义的内容。 |
受支持的平台
桌面浏览器
- IE8+
- Opera 12+
- Firefox 4+
- Safari 5+
- Chrome 10+
移动浏览器
- IOS 4+ Safari
- Chrome for Android
- Chrome for IOS
- Chrome for Android
- Windows Phone 7+ IE