多级菜单 Menu

示例

基本形式

<menu source={source} />
var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1', children: [
                {name: '选项1.1'},
                {name: '选项1.2', children: [
                    {name: '选项1.2.1'},
                    {name: '选项1.2.2'}
                ]},
                {name: '选项1.3'},
                {name: '选项1.4'},
            ]},
            {name: '选项2'},
            {name: '选项3', children: [
                {name: '选项3.1'},
                {name: '选项3.2'}
            ]}
        ]
    }
});

修改标题

<menu source={source} title="修改标题" />
var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1', children: [
                {name: '选项1.1'},
                {name: '选项1.2', children: [
                    {name: '选项1.2.1'},
                    {name: '选项1.2.2'}
                ]},
                {name: '选项1.3'},
                {name: '选项1.4'},
            ]},
            {name: '选项2'},
            {name: '选项3', children: [
                {name: '选项3.1'},
                {name: '选项3.2'}
            ]}
        ]
    }
});

禁用某一项,禁用组件

<menu source={source} />
<menu source={source} disabled />
var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1', children: [
                {name: '选项1.1'},
                {name: '选项1.2', children: [
                    {name: '选项1.2.1'},
                    {name: '选项1.2.2'}
                ]},
                {name: '选项1.3'},
                {name: '选项1.4'},
            ]},
            {name: '选项2'},
            {name: '选项3(禁用)', disabled: true, children: [
                {name: '选项3.1'},
                {name: '选项3.2'}
            ]}
        ]
    }
});

分隔线

<menu source={source} />
var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1', children: [
                {name: '选项1.1'},
                {divider: true},
                {name: '选项1.2', children: [
                    {name: '选项1.2.1'},
                    {name: '选项1.2.2'}
                ]},
                {name: '选项1.3'},
                {name: '选项1.4'},
            ]},
            {name: '选项2'},
            {divider: true},
            {name: '选项3(禁用)', disabled: true, children: [
                {name: '选项3.1'},
                {name: '选项3.2'}
            ]}
        ]
    }
});

按钮自定义

<menu source={source}>
    <a class="u-btn u-btn-primary">Primary</a>
</menu>
<menu source={source}>
    <a class="u-btn u-btn-success">Success</a>
</menu>
<menu source={source}>
    <a class="u-btn u-btn-warning">Warning</a>
</menu>
<menu source={source}>
    <a class="u-btn u-btn-error">Error</a>
</menu>
<menu source={source}>
    <a>Link</a>
</menu>
var component = new RGUI.Component({
    template: template,
    data: {
        source: [
            {name: '选项1', children: [
                {name: '选项1.1'},
                {name: '选项1.2', children: [
                    {name: '选项1.2.1'},
                    {name: '选项1.2.2'}
                ]},
                {name: '选项1.3'},
                {name: '选项1.4'},
            ]},
            {name: '选项2'},
            {name: '选项3', children: [
                {name: '选项3.1'},
                {name: '选项3.2'}
            ]}
        ]
    }
});

单项模板自定义

<menu source={source} itemTemplate={@(itemTemplate)} />
var component = new RGUI.Component({
    template: template,
    itemTemplate: RGUI._.multiline(function(){/*
<a href={item.url}>{item.name}</a>
    */}),
    data: {
        source: [
            {name: '首页', url: '../index.html'},
            {name: 'CSS元件', url: '../cssunit/index.html', children: [
                {name: '基础', url: '../cssunit/base.html'},
                {name: '按钮', url: '../cssunit/button.html'},
                {name: '图标', url: '../cssunit/icon.html'}
            ]},
            {name: 'JS元件', url: 'index.html', children: [
                {name: 'Dropdown', url: 'dropdown.html'},
                {name: 'Menu', url: 'menu.html'},
                {name: 'Input2', url: 'input2.html'}
            ]}
        ]
    }
});

API

Class

Menu

继承自Dropdown

Options

new Menu()

参数类型默认值数据流向描述
dataobject绑定属性
data.titlestring''outer => inner按钮文字
data.sourceobject[][]outer <=> inner数据源
data.source[].namestringouter => inner每项的内容
data.source[].disabledbooleanfalseouter => inner禁用此项
data.source[].dividerbooleanfalseouter => inner设置此项为分隔线
data.itemTemplatestringnullouter @=> inner单项模板
data.openbooleanfalseouter <=> inner当前为展开/收起状态
data.disabledbooleanfalseouter => inner是否禁用
data.visiblebooleantrueouter => inner是否显示
data.classstring''outer => inner补充class
serviceobjectouter @=> inner数据服务

Inherited Methods

menu.toggle(open)

展开/收起

参数类型默认值描述
openboolean展开/收起状态。如果无此参数,则在两种状态之间切换。
返回值类型描述
无返回值

menu.select(item)

选择某一项

参数类型默认值描述
itemobject选择项
返回值类型描述
无返回值

@deprecated menu.$updateSource()

从service中更新数据源

参数类型默认值描述
无参数
返回值类型描述
thisSourceComponent

Inherited Events

menu.$on('toggle')

展开/收起时触发

属性类型描述
senderobject事件发送对象
openobject展开/收起状态

menu.$on('select')

选择某一项时触发

属性类型描述
senderobject事件发送对象
selectedobject当前选择项