HTML5前端UI框架-ZUI
2014-11-04 10:18:45 
阿炯
ZUI是禅道项目管理软件团队在完善自己产品过程中形成的一个开源前端实践方案，帮助你快速构现代跨屏应用。采用MIT协议授权，它的特点如下：
1、简单美观，易于使用，快速构建简洁大方的现代web应用。
2、新颖健壮，采用HTML5且支持所有流行的移动及桌面浏览器平台，一些旧的浏览器也能够降级支持。
3、轻快独立稳定，最佳的可用性能，最大限度的不依赖于外部组件。
4、全平台响应，一次编写，响应任何尺寸的设备。
5、比较适合中文环境
为什么来做zui框架
zui框架并不是我们完全从头到尾自己写出来的。我们也是在使用bootstrap, yui这些框架中结合我们自己产品的应用场景，逐渐积累形成的。现在最成熟的当推bootstrap了。但是bootstrap的版本跨度比较大，也有很 多功能是我们不需要的，再加上它还是比较适合英文场景的布局。所以我们才决定自己来写zui框架。在写这个框架过程中，我们结合了很多具体的应用场景，比 如大量数据展示、比如手机端响应式布局等，做了很多非常有针对性的改进。最终形成了zui框架。
与Bootstrap的关系
ZUI继承了Bootstrap 3中的大部分基础内容，但出于与Bootstrap不同的目的大部分内容都进行了定制和修改。这些变化包括：
移除了部分插件的限制，增加了一些适用特性，例如Popover弹出的内容可以指定已有的标签内容,Modal对话框可以自动使用iframe弹出整个页面内容等；
增加了实用的视图组件，包括卡片、评论、列表、文章、仪表盘、看板等；
新增了几个Javascript组件，包括拖放、排序、灯箱预览，本地存储，图片裁剪等；
集成了一些实用的第三方组件，包括cookie、hotkey、chosen、Kindeditor、ChartJs、DatetimePicker等，并且这些组件样式经过重写，风格更为统一；
增加了配色表和新的主题模板，最少只需更改一个配置项更换颜色主题；
修改了默认字体配置，包含所使用的字体集和字体大小；
替换了默认的字体图标，在FontAwesome图标集的基础上去掉了一些图标同时增加了一些新的图标，写法上比FontAwesome更简单；
大部分组件的默认样式都不需要额外的指定包含'default'的Class，例如class='btn btn-default'，'btn-default'在ZUI中不需要；
增加了一些辅助类，例如文本背景及高亮等；
增加了一些可选样式，例如滚动条等。
大部分书写方式继承Bootstrap，从Bootstrap方便迁移到ZUI，学习成本低，而且写法上更精简；
需要的实用功能都能在ZUI中提供，即使是第三方组件也提供统一的样式和主题支持；
即使ZUI包含的内容更丰富，也会控制核心内容打包后体积大小，一般css不超过150k（目前130k，精简版95k），js不超过100k（目前79k，精简版33k），精简版包含绝大部分功能，但体积更小。非核心内容按需加载，推荐自定义编译；
ZUI从实际项目中诞生（包括禅道、蝉知和然之），实践证明其有效性，一切为了快速构建你的应用；
一些令人激动的新内容正在开发中...
最新版本：1.10
2021年11月上旬，发布了1.10版本，本次更新新增下拉选择器插件，兼容 Chosen 用法，支持大数目选项列表以及从服务器进行搜索；本次更新还修复了大量已知问题。新增下拉选择器组件，更新明细如下：
下拉选择器：
新增下拉选择器组件，详情参考；
表单：优化了火狐下单选框控件样式，移除了高亮时不协调的虚线边框；
下拉菜单：添加对特殊辅助类 .not-clear-menu 的支持，在 .dropdown-menu 内使用此辅助类可以禁用用户点击特定元素时隐藏下拉菜单；
对话框和对话框触发器：
修复了打开对话框可能导致页面抖动的问题；
修复了当启用 scrollInside 选项后，对话框尺寸可能计算错误的问题；
修复了有时执行 $.fn.modalTrigger(methodName) 导致重复监听触发打开事件的问题；
上下文菜单：新增下拉菜单增强模式；
新增了一些功能选项：
新增选项 limitInsideWindow 用于限制菜单面板显示在窗口区域内；
新增选项 show 用于初始化完成后立即显示菜单；
新增选项 toggleTrigger 用于启用点击触发元素切换菜单显示和隐藏行为；
新增选项 menuCreator 用于自定义生成菜单元素；
新增选项 position 用于动态返回菜单位置；
新增 ContextMenu.isShow 方法用于检查指定 ID 菜单是否已经显示；
Chosen：优化了清除按钮图标在不同浏览器上的样式差异；
富文本编辑器（Kindeditor）：
新增选项 transferEvents 用于将编辑器 iframe 页面内的点击事件传递到父级页面；
优化插入音视频功能，现在使用 HTML5 音视频实现，移除了 flash 音视频实现；
优化了界面上一些图标；
优化了表格功能和样式，修复了界面可能显示错误的问题；
修复了全屏动作之后编辑器内的锚点丢失的问题；
修复了表格隔行变色设置无效的问题；
修复了百度地图无法使用的问题，更新了 API 调用形式；
修复了有时对话框由于位置计算错误可能无法显示的问题；
修复了加载中图标可能没有显示的问题；
日历：优化周末栏头部文本排版，避免文本换行显示；
日期时间选择器：优化仅选择时间时的情况，此时下拉面板不显示底部切换日期的按钮；
图表：修复了曲线图中热点检查可能不符合预期的问题；
辅助方法：
为 IE8 默认添加 Array.forEach 和 Array.isArray polyfills；
修复了 $.zui.uuid() 在 IE11 下失效的问题；
修复了因为使用 const 关键字导致在 IE8 下 JS 执行错误。
官方主页：https://www.openzui.com/
1、简单美观，易于使用，快速构建简洁大方的现代web应用。
2、新颖健壮，采用HTML5且支持所有流行的移动及桌面浏览器平台，一些旧的浏览器也能够降级支持。
3、轻快独立稳定，最佳的可用性能，最大限度的不依赖于外部组件。
4、全平台响应，一次编写，响应任何尺寸的设备。
5、比较适合中文环境
为什么来做zui框架
zui框架并不是我们完全从头到尾自己写出来的。我们也是在使用bootstrap, yui这些框架中结合我们自己产品的应用场景，逐渐积累形成的。现在最成熟的当推bootstrap了。但是bootstrap的版本跨度比较大，也有很 多功能是我们不需要的，再加上它还是比较适合英文场景的布局。所以我们才决定自己来写zui框架。在写这个框架过程中，我们结合了很多具体的应用场景，比 如大量数据展示、比如手机端响应式布局等，做了很多非常有针对性的改进。最终形成了zui框架。
与Bootstrap的关系
ZUI继承了Bootstrap 3中的大部分基础内容，但出于与Bootstrap不同的目的大部分内容都进行了定制和修改。这些变化包括：
移除了部分插件的限制，增加了一些适用特性，例如Popover弹出的内容可以指定已有的标签内容,Modal对话框可以自动使用iframe弹出整个页面内容等；
增加了实用的视图组件，包括卡片、评论、列表、文章、仪表盘、看板等；
新增了几个Javascript组件，包括拖放、排序、灯箱预览，本地存储，图片裁剪等；
集成了一些实用的第三方组件，包括cookie、hotkey、chosen、Kindeditor、ChartJs、DatetimePicker等，并且这些组件样式经过重写，风格更为统一；
增加了配色表和新的主题模板，最少只需更改一个配置项更换颜色主题；
修改了默认字体配置，包含所使用的字体集和字体大小；
替换了默认的字体图标，在FontAwesome图标集的基础上去掉了一些图标同时增加了一些新的图标，写法上比FontAwesome更简单；
大部分组件的默认样式都不需要额外的指定包含'default'的Class，例如class='btn btn-default'，'btn-default'在ZUI中不需要；
增加了一些辅助类，例如文本背景及高亮等；
增加了一些可选样式，例如滚动条等。
选择使用ZUI
Bootstrap是非常优秀的前端框架，但在构建大型应用的开发时通常远远不够。如果Bootstrap能够完全满足你的项目，建议使用Bootstrap，如果你需要的更多，则建议使用ZUI。使用ZUI的显著理由如下：大部分书写方式继承Bootstrap，从Bootstrap方便迁移到ZUI，学习成本低，而且写法上更精简；
需要的实用功能都能在ZUI中提供，即使是第三方组件也提供统一的样式和主题支持；
即使ZUI包含的内容更丰富，也会控制核心内容打包后体积大小，一般css不超过150k（目前130k，精简版95k），js不超过100k（目前79k，精简版33k），精简版包含绝大部分功能，但体积更小。非核心内容按需加载，推荐自定义编译；
ZUI从实际项目中诞生（包括禅道、蝉知和然之），实践证明其有效性，一切为了快速构建你的应用；
一些令人激动的新内容正在开发中...
最新版本：1.10
2021年11月上旬，发布了1.10版本，本次更新新增下拉选择器插件，兼容 Chosen 用法，支持大数目选项列表以及从服务器进行搜索；本次更新还修复了大量已知问题。新增下拉选择器组件，更新明细如下：
下拉选择器：
新增下拉选择器组件，详情参考；
表单：优化了火狐下单选框控件样式，移除了高亮时不协调的虚线边框；
下拉菜单：添加对特殊辅助类 .not-clear-menu 的支持，在 .dropdown-menu 内使用此辅助类可以禁用用户点击特定元素时隐藏下拉菜单；
对话框和对话框触发器：
修复了打开对话框可能导致页面抖动的问题；
修复了当启用 scrollInside 选项后，对话框尺寸可能计算错误的问题；
修复了有时执行 $.fn.modalTrigger(methodName) 导致重复监听触发打开事件的问题；
上下文菜单：新增下拉菜单增强模式；
新增了一些功能选项：
新增选项 limitInsideWindow 用于限制菜单面板显示在窗口区域内；
新增选项 show 用于初始化完成后立即显示菜单；
新增选项 toggleTrigger 用于启用点击触发元素切换菜单显示和隐藏行为；
新增选项 menuCreator 用于自定义生成菜单元素；
新增选项 position 用于动态返回菜单位置；
新增 ContextMenu.isShow 方法用于检查指定 ID 菜单是否已经显示；
Chosen：优化了清除按钮图标在不同浏览器上的样式差异；
富文本编辑器（Kindeditor）：
新增选项 transferEvents 用于将编辑器 iframe 页面内的点击事件传递到父级页面；
优化插入音视频功能，现在使用 HTML5 音视频实现，移除了 flash 音视频实现；
优化了界面上一些图标；
优化了表格功能和样式，修复了界面可能显示错误的问题；
修复了全屏动作之后编辑器内的锚点丢失的问题；
修复了表格隔行变色设置无效的问题；
修复了百度地图无法使用的问题，更新了 API 调用形式；
修复了有时对话框由于位置计算错误可能无法显示的问题；
修复了加载中图标可能没有显示的问题；
日历：优化周末栏头部文本排版，避免文本换行显示；
日期时间选择器：优化仅选择时间时的情况，此时下拉面板不显示底部切换日期的按钮；
图表：修复了曲线图中热点检查可能不符合预期的问题；
辅助方法：
为 IE8 默认添加 Array.forEach 和 Array.isArray polyfills；
修复了 $.zui.uuid() 在 IE11 下失效的问题；
修复了因为使用 const 关键字导致在 IE8 下 JS 执行错误。
官方主页：https://www.openzui.com/