Кнопка с меню

Кнопка, при клике по которой открывается выпадающий список.

Пример
Исходный код

Документация API Спецификация Axure

Конфигурация

Конфигурация кнопки описана в документе Кнопки и ссылки.

Конфигурация набора элементов для выпадающего меню описана в документе Конфигурация набора элементов для выпадающих списков.

Событие выбора элемента меню

Для кнопки Controls/dropdown:Button интересующее событие — menuItemActivate. В обработчик события вторым аргументом приходит Types/entity:Record с данными элемента меню.

Например, в обработчике выведем на экран значение поля "title":

  • JS-модуль:
    define('Module/Component',
       [
          'Core/Control', 
          'wml!Module/Component', 
          'Types/source'
       ],
       function(
          Control, 
          template, 
          source
       ){
          return Control.extend({
             _template: template,
             _menuItems: null,
             _beforeMount: function() {
                this._menuItems = new source.Memory({
                    keyProperty: 'id',
                    data: [
                    {
                       id: '1',
                       title: 'Запись 1',
                    },
                    {
                       id: '4',
                       title: 'Запись 4',
                    },
                    {
                       id: '5',
                       title: 'Запись 5',
                    }]
                }) 
             },
             _clickItemsChangedHandler: function(event, rec) {
                 
                // При клике по элементу с id=5 покажет диалог со строкой "Запись 5".
                alert(rec.get('title'));
             }
          })
    });
  • WML:
    <Controls.dropdown:Button source="{{_menuItems}}" on:menuItemActivate="_clickItemsChangedHandler()" />