Dropmenu.js 下拉菜单 (无限树形分级,可自定义节点样式)

简述:
演示:

演示地址:http://webdesk.weisha100.cn/dropmenu.html

开源地址:https://github.com/weishakeji/WebdeskUI

示例:
    var drop = $dropmenu.create({
        target: '#dropmenu-area',
        width: 120,height:30
    });
    drop.add(数据源);

属性:

下表中,“可监听”的属性,可以通过watch()增加监听方法,类似Vue;“双向绑定”的意思是属性更改后,直接影响窗体样式。

属性 说明 可监听 双向绑定
target 对象所在的html位置
width 根菜单栏的宽度
height 菜单项的高度,每一项的高度
plwidth 子菜单面板panel的宽度,第一级菜单面板会跟据根菜单宽度变化,子菜单宽度为width/datas.length
bind 是否对数据源双向绑定
方法:

下表只列出了常用公共方法,更多方法请参看源码。

方法 说明 参数
add() 添加树形数据,当属于bind为true时,数据源变动会直接影响界面 示例:{title:'',url:''}
getData() 通过id获取数据项 树形节点的id
事件:

事件支持多播,即同一个事件可以添加多个方法。事件返回值仅限bool型,虽然可以返回其它类型或不返回,但最终都会转为bool型返回值。

当同一个事件中的多个方法,任一个返回false,则不再继续执行后续事件方法。如果不返回,默认是true。

事件 说明 参数sender 参数e
load 组件加载完成   e.event:事件名称,e.action:动作
data 当数据源变更时 同上 e.event:事件名称
e.action:动作,默认与e.event同值
e.target:响应事件的html元素,此处为窗体的html
e.data:数据源
click 节点点击   e.data,当前节点数据项