Компонент Menu или выпадающее меню, наследуется от list и позволяет пользователю выбирать нужный элемент из списка сгруппированных элементов (подменю). Каждый элемент подменю может содержать в себе свое подменю.
Динамическое Submenu или подменю, отображается при наведении курсора на соответствующий элемент главного меню (вызов события onMouseOver) и скрывается, если убрать курсор (onMouseOut).

Инициализация

Объект Menu хранится в свойстве data.

webix.ui({
    view:"menu",
    id:"my_menu",
    subMenuPos:"right",
    layout:"y",
    data:[ // данные меню
        { value:"Translate...", submenu:["English", "Slavic...", "German"]},
        { $template:"Separator" },
        { value:"Post...", submenu:[ "Facebook", "Google+", "Twitter" ]}
    ],
    type:{
        subsign:true,
        height:50
    }           
});

Related sample: Basic Menu

Основные свойства:

subMenuPos (string) - выравнивает выпадающее подменю относительно верхнего уровня;
submenuConfig (object) - задает общие настройки для всех подменю, независимо от их уровня вложенности;
layout (string) - задает ориентацию элементов меню: x (по умолчанию) для горизонтального меню, y для вертикального меню;
$template (string) - флаг, задающий разделитель между группами элементов меню. Возможные значения:
- "Separator" - серая разделительная линия;
- "Spacer" - пустой элемент с белым фоном, не реагирующий на движения курсора.
type - объект с настройками отображения элементов:
- subsign (boolean) - задает массив элементов подменю;
- height, width (number) высота и ширина каждого элемента;
openAction (string) - изменяет способ вызова подменю. С установленным значением "click", сворачивание и разворачивание элементов подменю будет производиться по клику;
template - (string, function) - определяет вид и содержимое элементов. Подробнее;
data (object) - желаемый формат встроенных данных. Подробнее;
autowidth - (boolean) подстраивает ширину элементов выпадающего меню под ширину их содержимого, по умолчанию false.

Работа с элементами Menu

Настройка элементов Menu

Элемент меню (подменю) может быть текстовым элементом и содержать в себе еще одно подменю или любой компонент Webix, заданный по его ID.

Элементы Menu хранятся в массиве data отдельными объектами. Элементы Submenu хранятся в массиве submenu или data. Каждый элемент меню может содержать следующие атрибуты:

id - ID элемента. Если не задано, элементу будет присвоен автоматически сгенерированный ID;
value - задает текстовое значение для элемента;
href - задает ссылку для элемента;
config - определяет конфигурацию всплывающего окна подменю (при наличии). Эти настройки переопределяют те, что заданы в submenuConfig;
badge - устанавливает оранжевый информационный значок, сообщающий о количестве новых действий для этого пункта меню (например количество сообщений).

Самый простой способ задать элементы меню - это передать их как массив:

{ view:"menu", data:["Google", "Facebook", "Twitter"] }

Или массив объектов:

{ view:"menu", data:[
    { id:1, value:"Google"}, 
    { id:2, value:"Facebook"}, 
    { id:3, value:"Twitter"}
]}

Ссылки в элементах Menu

В любой элемент меню или подменю можно добавить ссылку с помощью параметров href и target (необязательный параметр):

view:"menu",
data:[
    { id:"1", value:"Imitation of Spenser", href: "#verse1", target:"_blank"},
    { id:"2", value:"The Human Seasons", href: "#verse2"}
]

Если значение target не задано, он будет установлено как пустая строка.

Related sample: Menu hrefs

Информационные значки

Значки отображают числовую информацию относящуюся к элементу меню, например количество сообщений:

view:"menu", 
data:[
    { id:"1",value:"Translations", badge:"1"},
    { id:"2",value:"Posts", badge:"12" },
    { id:"3",value:"Info", badge:"24" }
]

Related sample: Menu with Badges

Разделители в Menu

Чтобы отделить одну группу элементов от другой в вертикальном меню, используется свойство $template. Возможные значения:

"Spacer" - добавляет горизонтальный промежуток между элементами меню;
"Separator" - добавляет горизонтальную серую линию между элементами меню.

Промежуток между элементами меню

view:"menu",
layout:"y",
data:[
    { id:"1", value:"Translations", icon:"qrcode", badge:20 },
    { id:"2", value:"Posts", icon:"file-word-o", badge:3 },
    { $template:"Spacer" },
    { id:"3", value:"Help", icon:"support"},
]

Related sample: Vertical Menu

Линия между элементами меню

view:"menu",
layout:"y",
data:[
    { value:"Translate..." },
    { value:"Post...", submenu:[ "Facebook", "Google+", "Twitter" ]},
    { $template:"Separator" },
    { value:"Info" }
]

Related sample: Basic Menu

Настройка Submenu

Элементы подменю могут быть заданы массивом значений:

{ id:"2",value:"Translate...", submenu:[ "English", "Slavic", "German" ]},

Или массивом объектов:

{ id: "1.2", value:"Slavic...", submenu:[
    {id: "1.2.1", value:"Belarusian"},
    {id: "1.2.2", value:"Russian"},
    {id: "1.2.3", value:"Ukrainian"}
]}

Любое вложенное подменю (попап) можно настройить отдельно, с помощью параметра config его родителя:

view:"menu",
submenuConfig:{
    width:400
},
data:[
    { id:"2",value:"Custom...", 
        config:{
            width:500,
            on:{ 
                onItemClick:function(id){
                    webix.message("Submenu click: "+id);
                }
            }
        },
        submenu:[ "Facebook", "Google+", "Twitter" ]
     }
]

Эта настройка переопределяет общие настройки для подменю, заданные в submenuConfig.

Автоматическая настройка ширины подменю

Чтобы автоматически изменять ширину Submenu в соответствии с высотой содержимого, используется свойство autowidth со значением true в конфигурации Menu:

webix.ui({
    container:"areaA",
    view:"menu",
    autowidth:true,
    data:[
        { id:"1",value:"Short...",
            submenu:[ "FB", "G+", "TW" ]},
        { id:"2",value:"Medium...",
            submenu:[ "Facebook", "Google+", "Twitter" ]},
        ...
    ]
});

Related sample: Autowidth for Submenus

Использование других компонентов как элементов Menu

Параметр submenu может также указывать на предварительно инициализированные popup, submenu, context или window:

webix.ui({
    id:"details1",
    view:"context", width:300, height:200,
    body:{ content:"html1" }
});
 
webix.ui({
    view:"menu",
    data:[
        { value:"HTML 4", submenu:"details1" },
        { value:"HTML 5", submenu:"details2" }
    ]
});

Таким же образом вы можете инициализировать компонент Webix Submenu отдельно и затем сослаться на него внутри свойства submenu в конфигурации Menu:

webix.ui({
    view:"submenu", id:"test", data:[
        { id:"1.1", value:"English"},
        { id:"1.3", value:"German"}
    ]
});
 
webix.ui({
    view:"menu",
    data:[
        { id:"1", value:"Translate...", submenu:"test"},
        { id:"2", value:"Post..."}
    ]
});

Каждый элемент подменю может содержать свой компонент Submenu.

MenuBar

MenuBar похож на обучный тулбар, самый быстрый способ создать панель Menu - это инициализировать меню и тулбар в соседних колонках:

webix.ui({
    cols:[ menu, toolbar ] 
});

Related sample: Menu in Toolbar

Скрыть или заблокировать элементы Menu

Скрыть элементы Menu

Чтобы скрыть или показать элемент меню, вы можете воспользоваться методами hideMenuItem() и showMenuItem() соответственно, указав ID нужных элементов в качестве параметров.

Событием провоцирующим выполнение функции может быть изменение состояния чекбокса в компоненте Webix Tree, заполненном теми же данными что и меню, при условии что ID элемента равен ID соответствующего элемента меню.

$$("tree1").attachEvent("onItemCheck",function(id,state){
    if (state) // если флажок отмечен
        $$("top_menu").hideMenuItem(id);
    else
        $$("top_menu").showMenuItem(id);
});

В результате только "неотмеченные" элементы меню будут отображены.

Related sample: Hiding Menu Items

Заблокировать элементы Menu

Чтобы заблокировать или разблокировать элемент меню, вы можете воспользоваться методами disableItem() и enableItem() соответственно, указав ID нужных элементов в качестве параметров. Событием провоцирующим выполнение функции может быть изменение состояния чекбокса, ID которого равно ID соответствующего элемента меню.

$$("tree1").attachEvent("onItemCheck",function(id,state){
    if(state) // если флажок отмечен
        $$("top_menu").disableItem(id);
    else
        $$("top_menu").enableItem(id);
});

Заблокировать элемент меню из JSON

Вы можете заблокировать определенный элемент меню прямо в конфигурации, указав disabled:true в нужном объекте.

webix.ui({
    view:"menu",
    data:[
        { id:"1",value:"Translate...", submenu:[
            {id: "1.1", value:"English"},
            { id: "1.2", value:"Slavic...", submenu:[
                {id: "1.2.1", value:"Belarusian"},
                {id: "1.2.2", value:"Russian", disabled:true },
                {id: "1.2.3", value:"Ukrainian"}
            ]}          
        ]}
    ]
});

Блокировка и разблокировка элементов реализуется с помощью классов CSS, поэтому элементы меню содержат темплейт для отображения активного и заблокированного состояния:

view:"menu", 
template:function(obj){
    if(obj.disabled)
        return "<span class='disabled'>"+obj.value+"</span>";
    return obj.value;
}

Related sample: Disabling Menu Items

Обработка событий с элементами Menu и Submenu

Доступ ко всем элементам меню и подменю можно получить по их ID.

1 . Доступ к любому элементу можно получить с помощью метода getMenuItem(), который принимает ID элемента в качестве параметра и возвращает объект элемента:

// получает значение элемента меню по его ID
$$('menu1').getMenuItem(id).value;

Related sample: Basic Menu

2 . В то же время элементы меню могут быть получены через объект подменю, возвращаемого методом getSubMenu() для элемента с указанным ID. Если для элемента не существует подменю - будет возвращен объект вызываемого компонента.

var menu = $$("menu1").getSubMenu(id);
var item = menu.getItem(id).value;

Оба метода могут быть использованы в любом из внутренних событий меню, например в событиях по клику:

onMenuItemClick - вызывается при нажатии на все пункты меню, независимо от уровня иерархии. Игнорирует заблокированные элементы;
onItemClick - вызывается по клику на любой элемент одного уровня. Срабатывает и для заблокированных элементов.

Обработчик "onMenuItemClick"

view:"menu",
data:[...],
on:{
    onMenuItemClick:function(id){
        webix.message("Click: "+this.getMenuItem(id).value);
    }
}

Related sample: Basic Menu

Обработчик Submenu "onItemClick"

view:"menu",
data:[
    { id:"1",value:"Custom...",
        config:{
            width:250,
            on: { onItemClick:function(id){
                webix.message("Submenu click: "+id);
            }}
        },
        submenu:{...}
    }
]

Related sample: Configuring Submenus

Статьи по теме

Наверх

Menu

Справочник по API

Обзор

Инициализация

Основные свойства:

Работа с элементами Menu

Настройка элементов Menu

Ссылки в элементах Menu

Информационные значки

Разделители в Menu

Настройка Submenu

Автоматическая настройка ширины подменю

Использование других компонентов как элементов Menu

MenuBar

Скрыть или заблокировать элементы Menu

Скрыть элементы Menu

Заблокировать элементы Menu

Заблокировать элемент меню из JSON

Обработка событий с элементами Menu и Submenu

Статьи по теме