Demo：Menu Bar

效果图

 

代码

        </<span style="color:#3f7f7f">script>

        

 

        <<span style="color:#3f7f7f">script>

        //Function to handle the select event of the items

        var handleSelect = function(oEvent){

            alert(oEvent.getParameter("item").getId());

        };

        // Create a menu bar instance

        var oMenuBar = new sap.ui.commons.MenuBar("menuBar");

 

        // Create two main menu items for the menubar - for which you define subitems lateron

        var oMbProjct = new sap.ui.commons.MenuItem("menuBar_Project",{text:"Project"});

        oMenuBar.addItem(oMbProjct);

        var oMbRole = new sap.ui.commons.MenuItem("menuBar_Roles",{text:"Roles"});

        oMenuBar.addItem(oMbRole);

        

        oMbRole.attachSelect(handleSelect);

 

        // Create a menu instance for the "Project" menu

        var oMsubProj = new sap.ui.commons.Menu("menu1");

        oMbProjct.setSubmenu(oMsubProj);

 

        // Create and add five sub-items for the "Project" menu

        var oMiShow = new sap.ui.commons.MenuItem("item1_Show",{text:"Show"});

        oMsubProj.addItem(oMiShow);

        var oMiPropty = new sap.ui.commons.MenuItem("item_Property",{text:"Properties"});

        oMsubProj.addItem(oMiPropty);

        oMiPropty.attachSelect(handleSelect);

 

        //Create a sub menu for item "Show"

        var oMsubShow = new sap.ui.commons.Menu("menu2");

        oMiShow.setSubmenu(oMsubShow);

        var oMiTask = new sap.ui.commons.MenuItem("item_Task",{text:"Tasks"});

        oMsubShow.addItem(oMiTask);

        oMiTask.attachSelect(handleSelect);

        var oMiResp = new sap.ui.commons.MenuItem("item_Pesp",{text:"Responsibilities"});

        oMsubShow.addItem(oMiResp);

        oMiResp.attachSelect(handleSelect);

 

 

        // Attach the menubar to the page

        oMenuBar.placeAt("content");

 

        </<span style="color:#3f7f7f">script>

友情推广：

第一课堂HANA系统搭建完成，公网双IP访问，速度有保证，

进第一课堂群139446252，免费领取HANA测试账号。

申请时验证信息可输入来自本博客