此版本对桌面端 UI 进行了优化,加入大量实用辅助类,增加了对 jQuery 的支持,并将 ZeptoJS 从标准版中分离,现在可以自行搭配 jQuery 使用。
- 增加了对 jQuery 的支持,将 ZeptoJS 从标准版中分离,现在可以自行搭配 jQuery 最新版本使用。ZeptoJS 版本将不再维护,推荐使用 jQuery;
- 优化了界面所使用的字体,现在字体集合为
'Helvetica Neue', Helvetica, 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
; - 优化了在触摸屏上的点击事件,现在使用
touchstart
来代替tap
; - 图标:
- 增加了一些图标,与 ZUI 官方图标集保持一致;
- 外观选项:
- 增加了
.accent
、.text-accent
和.accent-pale
相关着色辅助类; - 增加了
.mute-light
和.muted-dark
来获得不同程度的弱化效果; - 优化了状态类效果,而且可以使用
.hover
、.focus
和.active
类来强制获得状态效果; - 增加了
.hover-solid
来实现鼠标悬停或触摸时填充背景的效果; - 增加了
.divider-top
、.divider-left
、.divider-right
和divider-all
来为元素不同方向应用边框鲜果; - 增加了 更多的边距外观选项;
- 增加了
.highlight
类用于为元素应用荧光笔背景效果; - 增加了
.long-shadow
类用于为元素应用长阴影效果;
- 增加了
- 导航:
- 优化了导航外观,修复了有时会自动换行的问题;
- 增加了
.nav-lg
和.nav-sm
类来应用不同大小的导航外观;
- 列表:
- 优化了多行列表项外观;
- 栅格:
- 优化了单元格的间距,增加了更多控制间距对辅助类(
.gutter-lg
、.gutter-sm
); - 增加了
.single
类,用于禁用行或列换行;
- 优化了单元格的间距,增加了更多控制间距对辅助类(
- 按钮:
- 优化按钮样式,按钮元素的
display
更改为inline-flex
;
- 优化按钮样式,按钮元素的
- 标签:
- 优化标签样式,标签元素的
display
更改为inline-flex
; - 增加了
.label-sm
类用于应用小尺寸的标签外观;
- 优化标签样式,标签元素的
- 布局:
- 增加了更多 Flex 辅助类;
- 增加了对滚动条显示对辅助类(
.scroll-x
、.scroll-y
、.scroll-none
);
- Display:
- 增加了
preventDefault
和stopPropagation
选项来更改点击事件行为; - 优化了
placement
选项,现在计算的位置更准确; - 增加了对触发元素
data-url
属性对支持,使用此属性来指定远程加载地址可以阻止有时非期望跳转的问题;
- 增加了
- Ajax 表单:
- 增加了
onResponse
事件,允许在此事件中格式化服务器返回的内容或者取消此次处理; - 优化了
onSubmit
事件,可以在此事件中格式化要提交的表单数据,或者取消此次提交; - 优化了
onSuccess
事件,可以在此事件中取消默认处理; - 优化了
onError
事件,可以在此事件中取消默认处理;
- 增加了
🎈🎈🎈 MZUI 第一版本!🎈🎈🎈
MZUI 是专为移动端设计,基于 Flex 的 UI 框架。用来开发移动 Web 应用和微信应用非常方便。
文档和示例请访问:http://easysoft.github.io/mzui/
该版本带来的功能包括:
- REM:CSS 定义单位为 REM;
- 外观选项:提供一组通用的 CSS 修饰类方便为元素和控件定义个性化外观,可定制的内容包括:背景和文本着色、交互状态外观、形状、预设容器类型、内外边距、CSS 变形、阴影和 CSS 滤镜等;
- 文字排版:预设的文字排版样式;
- 辅助类:辅助工具类;
- 布局:包含常用布局容器和 Flex 布局工具类;
- 栅格:基于 Flex 的栅格体系,同时支持行和列的栅格布局;
- 动画:提供 CSS 动画辅助类,配合 JavaScript 使用可以方便实现高级交互效果。
- 标签:支持外观选项;
- 按钮:包括多种尺寸,支持外观选项;
- 图标:包括 FontAwesome 字体图标中的绝大部分内容;
- 头像:包括不同尺寸,支持外观选项;
- 表格:包括各种常见样式,支持外观选项;
- 导航:提供固定和自动隐藏功能,支持外观选项;
- 标题栏:提供一种通用方式来组织标题、图标和导航,支持外观选项;
- 表单:涵盖常用表单控件,提供表单验证辅助类,全新外观的单选和复选控件;
- 列表:无论简单还是复杂内容,列表都能轻松应付,支持多层级列表以及外观选项;
- 代码:包括行内代码和块级代码样式,提供对键盘标记文件样式。
- Display:隆重推出 Display 插件,动态展示内容的好帮手,功能强大,无论是工具提示、对话框、下拉菜单、折叠、远程内容加载都能实现,扩展机制让使用更加方便;
- 滚动箭头:随时监听当前浏览器窗口的滚动状态;
- Skin.js:提供一种方式来任意定制外观选项中的配色;
- Color:颜色相关的辅助工具,提供对颜色格式化、转化等相关计算功能;
- Utils:提供格式化字符串和日期的相关辅助工具;
- Ajax Form:方便的创建 Ajax 表单。
在官方文档中有更多示例,欢迎访问 http://easysoft.github.io/mzui/ 了解更多。