Menu

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

Обзор

Компонент 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.

Related sample:  Showing Menu on Mouse Click (dropping down on hover is disabled)

Работа с элементами 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.

Related sample:  Menu: Configuring Submenus

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

Чтобы автоматически изменять ширину 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" }
    ]
});

Related sample:  HTML Elements as Menu Items

Таким же образом вы можете инициализировать компонент 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;

Related sample:  HTML Elements as Menu Items

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

  • 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

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

Наверх