开始
框架说明
UI元素类型及定义
ZUI中包含各种各样的界面元素(或控件),例如按钮、表格、列表等,甚至一些特定场景用到的一组元素也会在ZUI中精心设计,例如评论列表。为了更好的展示我们的设计理念,把这些元素归为如下四类:
- 基本控件:用来构建网页应用的基本界面单元,例如按钮、文本标签、输入框等。
- 组件:通过一个以上的基本控件组合而成的较复杂的界面单元。例如表单、菜单、表格等。
- Javascript 组件:这些组件要正常使用会使用到Javascript。某些Javascript组件需要手动调用来启用。
- 视图:视图是将基本控件和组件组合使用来展现网站上的通用内容,例如评论视图及文章预览列表视图。
ZUI中的大多数界面元素都有不同的子类型、状态及参数。关于类型、状态及参数的定义如下:
- 类型:同一种界面单元的不同类型,例如按钮有主要按钮、次要按钮及危险按钮等,导航菜单类型有普通导航及顶部固定导航等。任何时候都应该只为同一个界面元素指定一种类型,默认类型无需指定。
- 状态:状态为同一种界面单元允许在不同的状态中切换,例如按钮有正常状态和不可用状态,下拉菜单有展开及收拢状态,菜单项目有选中和未选中状态等。在同一个界面元素中允许叠加多个状态。
- 参数:参数作为界面单元如何展现提供依据,例如表格是否隔行变色,是否启用鼠标悬停等。可以同时指定多个参数。
界面元素的命名
命名原则
- 所有控件、组件、视图、模块和行为的命名都应该使用最常见的名称,准确提现界面元素功能。例如菜单应该命名为menu,而不是navigation。
- 类型、状态及参数的命名均为元素名加上类型(或状态及参数名)前缀,中间用间隔号分隔,例如固定位置的菜单为
.menu-fixed。对于通用类型、状态或参数可以省略前缀,例如一个菜单项目处于激活状态,则只需命名为.active,而不许命名为.menu-active。 - 所有控件、组件、视图、模块和行为的命名均不加与当前元素功能无关的前缀和额外命名,例如一个导航菜单命名为
.nav,而不增加额外命名为.ui.nav或者.zui.nav。
文件目录结构
还没写...
受支持的平台
桌面浏览器
- 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