Пример создания компонента MainMenu

Для выполнения примера в теге HEAD добавьте ссылки на библиотеку PP.js и визуальные стили PP.css. Предполагается наличие на странице элемента DIV с идентификатором «mm1», куда будет помещено главное меню. Далее приведен пример создания главного меню, состоящего из трех кнопок:

    //меню для первой кнопки главного меню

    var menu0 = new PP.Ui.Menu({

            //событие выбора пункта меню

             ItemSelected: onItemClick,

            //пункты меню

             Items: [

   { MenuItem: { Content: "Создать"} },

   { MenuItem: { Content: "Открыть..."} },

   { MenuItem: { Content: "Сохранить"} }

   ]

    });

    //кнопки главного меню

    var mainMenuButton0 = new PP.Ui.MainMenuButton({

             Content: "Файл",

             //меню для кнопки

             Menu: menu0

             });

    var mainMenuButton1 = new PP.Ui.MainMenuButton({Content: "Редактирование"});

    var mainMenuButton2 = new PP.Ui.MainMenuButton({Content: "Формат"});

    //главное меню

    var mainMenu = new PP.Ui.MainMenu({

        ParentNode: document.getElementById("mm1"),

        //кнопки главного меню

        Items: [mainMenuButton0, mainMenuButton1, mainMenuButton2]

    });

    //ширина главного меню

    mainMenu.setWidth(300)

    //обработчик события выбора пункта меню

    function onItemClick(item, args){

        var id = item.getId(); 

        alert("Выбран пункт «" + mainMenu.getItemById(id).getContent()+ "»");

    }

После выполнения примера на html-странице будет размещен компонент MainMenu, имеющий следующий вид:

Компонент включает в себя три кнопки. При нажатии на кнопку «Файл» раскрывается меню, состоящее из трех элементов. При выборе любого из этих элементов на экран будет выводиться сообщение «Выбран пункт <название пункта>».