与Bootstrap的关系

ZUI继承了Bootstrap 3中的大部分基础内容,但出于与Bootstrap不同的目的大部分内容都进行了定制和修改。这些变化包括:

选择使用ZUI

Bootstrap是非常优秀的前端框架,但在构建大型应用的开发时通常远远不够。如果Bootstrap能够完全满足你的项目,建议使用Bootstrap,如果你需要的更多,则建议使用ZUI。使用ZUI的显著理由如下:

UI元素类型及定义

ZUI中包含各种各样的界面元素(或控件),例如按钮、列表、表格等,甚至一些特定场景用到的一组元素也会在ZUI中精心设计,例如评论列表。为了更好的展示我们的设计理念,把这些元素归为如下四类:

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 指示当前组件在显示内容时能够额外显示一个图标。 消息框等。
.with-padding 指示当前组件内容显示区域包含更多的边距。

界面元素的命名

命名原则

预编译的内容

下载预编译压缩包解压后将会得到以下目录结构:

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
└── lib
        

css目录下提供了三种编译类型:‘zui’、‘zui.lite’、‘zui-theme’,其中‘zui.lite’为精简版样式(关于精简版请参考本文档后续章节),‘zui-theme’为zui的主题样式。每种编译类型均提供了压缩版本,对应的文件名为‘*.min.css’。js目录下提供对应的js文件。字体图标放在‘fonts’文件夹下。lib目录下存放一些可以独立使用的组件。

源码目录结构

可以随时从Github上下载ZUI的源码。不仅仅包含所有开发源码文件,而且包含完整的文档和示例。如果你需要定制的编译版本更应该下载源码。以下简要说明源码目录结构。

zui/
├── src/                         ZUI的源码目录
│   ├── less/
│   ├── js/
│   ├── fonts/
│   └── apps/                    一些自定义的编译配置
├── dist/                        预编译输出目录
│   ├── css/
│   ├── js/
│   └── fonts/
├── docs/                        文档
│   └── example/                 文档中用到的例子
├── assets/                      一些依赖的或者配合使用的其他资源,包含jquery等
├── Gruntfile.js                 Grunt编译脚本
└── index.html                   文档首页

ZUI中提供了众多丰富的web组件,几乎为你准备构建现代Web应用所有基础内容。但大部分场景并不需要所有组件,所有并没有将所有内容打包为一个CSS文件和一个JS文件,在标准版中仅包含精心选择的组件,这些组件用于绝大部分场景。

在构建轻量的应用时需要的内容更少。ZUI预编译版本中提供了一些简洁的版本。包含了ZUI中大部分常用内容,经过压缩后体积更小。你可以在dist目录下找到文件名包含'.lite'的文件记为简洁的版本。

标准版

在标准版中包含绝大部分常用组件。预编译的标准版包含以下文件:

zui/
└── dist/
    ├── css/                    CSS文件
    │   ├── zui.css
    │   ├── zui.min.css
    │   └── zui.map.css
    ├── js/                     Javascript文件
    │   ├── zui.js
    │   └── zui.min.js
    └── fonts/                  图标字体文件
        ├── zenicon.eot
        ├── zenicon.ttf
        ├── zenicon.woff
        └── zenicon.svg

简洁版

在简洁版中包含大部分常用组件。标准版中已包含简洁版的所有内容。预编译的简洁版包含以下文件:

zui/
└── dist/
    ├── css/                     CSS文件
    │   ├── zui.lite.css
    │   ├── zui.lite.min.css
    │   └── zui.lite.map.css
    ├── js/                      Javascript文件
    │   ├── zui.lite.js
    │   └── zui.lite.min.js
    └── fonts/                   图标字体文件
        ├── zenicon.eot
        ├── zenicon.ttf
        ├── zenicon.woff
        └── zenicon.svg

独立组件

一些组件可能既不包含在标准版中,也没有包含在简洁版中,使用时需要配合标准版或简洁版独立引用。可以在以下目录中找到独立组件包含的文件:

zui/
└── dist/
    └── lib/                      独立加载的组件
        ├── chosen/               Chosen组件
        ├── datetimepicker/       日期时间选择组件
        ├── datatable/            数据表格组件
        └── ...                   更多组件....

自定义版本

如果你需要更精确的控制预编译版本所包含的内容,强烈建议下载我们的源码来进行自定义配置并编译独一无二的版本。请参考章节编译及定制

组件清单

组件清单帮助你快速查找所需的组件是否包含在指定版本中。

组件 标准版 简洁版 独立组件 版本要求
正在加载列表...

ZUI使用 Grunt 作为编译系统。如果不了解 Grunt 也没有关系,Grunt是一个非常棒而且容易上手的工具。下面给出简要步骤来准备编译ZUI,如果想了解更多请访问Grunt官方网站。

安装Grunt

Grunt构建在nodejs之上。在安装Grunt之前需要首先下载并安装node.js。最新版的nodejs已包含npm(node packaged modules)。npm是nodejs用来管理扩展包的工具。

安装nodejs之后,在命令行进行如下操作:

  1. 在全局环境中安装grunt-clinpm install -g grunt-cli
  2. 进入ZUI源码目录,执行npm install命令。nmp将读取包配置文件package.json文件并自动安装所有依赖的扩展包。

完成上述步骤就可以进行编译了。只需要进入ZUI中使用命令行输入对应的命令就可以启动编译任务。内置的build命令可以完成大部分编译任务。以下为ZUI内置的一些常用任务命令。

命令 说明 输出目录
grunt build:standard 编译标准版
  • dist/js/zui*.js
  • dist/css/zui*.css
  • dist/fonts/**
grunt build:lite 编译简洁版
  • dist/js/zui.lite*.js
  • dist/css/zui.lite*.css
  • dist/fonts/**
grunt build:dist 编译标准版和简洁版以及常用独立组件
  • dist/js/**
  • dist/css/**
  • dist/fonts/**
  • dist/lib/*/**
grunt dist grunt build:dist的简单写法
  • dist/js/**
  • dist/css/**
  • dist/fonts/**
  • dist/lib/*/**
grunt build:doc 编译文档所需资源
  • doc/js/zui*.js
  • doc/css/zui*.css
  • doc/fonts/**
grunt build:theme 编译主题
  • dist/css/zui-theme*.css
grunt build:[build name] 编译独立组件包,[build name]为组件包名称,可以为calendarkindeditorchosen
  • dist/lib/[build name]/**
grunt build:[control name] 编译单独控件,[control name]为控件名称,可以为buttonalertspanels
  • dist/lib/[control name]/**

如果了解Grunt,当然可以通过编辑Gruntfile.js文件来定义自己的编译任务。

桌面浏览器

移动浏览器

最新的浏览器都能获得最佳体验,在旧的浏览器上ZUI中的部分特性(例如圆角或阴影效果)无法使用。