[关闭]
@a06062125 2017-08-21T17:10:27.000000Z 字数 1095 阅读 335

Menu

基本概念

概念描述 类名 类型 备注
菜单的根容器 menu-root Dom-Element
子菜单 menu-submenu Dom-Element 在菜单项内部的菜单列表
菜单项 menu-item Dom-Element 不同的交互行为
菜单根容器折叠状态 menu-fold Boolean
菜单项打开收缩状态 menu-opened Boolean
子菜单的显示隐藏状态 menu-hidden Boolean
菜单项的选中状态 menu-selected Boolean 标志当前路径

叶结点: 没有子菜单的菜单项

选中路径: 取决于当前的访问路径, 当前访问路径的path为选中路径

状态描述

菜单容器(menu-root)的展开折叠状态

展开折叠menu-fold: [true|false], 影响菜单容器宽度、子菜单的定位状态, 子菜单显示隐藏的触发事件

menu-root

展开menu-fold: false 折叠menu-fold: true
菜单容器宽度 200px
子菜单显示位置 二级子菜单在根容器区域内显示, 三级子菜单在容器区域外显示
子菜单显示隐藏的触发事件 点击一级子菜单, toggle一级子菜单的打开收缩状态, 级联影响二级子菜单的显示隐藏状态; hover二级子菜单, 三级子菜单显示在二级子菜单右侧;二级子菜单blur时, 三级子菜单隐藏

菜单项(menu-item)的打开收缩状态

打开收缩menu-opened: [true|false]

仅适用于菜单根容器为展开状态( menu-fold: false)时的一级子菜单

子菜单(menu-submenu)的显示隐藏状态

显示隐藏menu-hidden: [true|false]

菜单项(menu-item)的选中状态

选中menu-selected: [true|false]

选中路径中最低层的处于显示状态的菜单项为选中状态

交互描述

实现设计

需要的类

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注