dojo1.x之小部件widget创建-Menu菜单

如何基于已有的menu类创建我们自己的widget呢？

一种是硬编码：

    <body class="claro">
        <div id="mainMenu" data-dojo-type="dijit/Menu">
            <div id="edit" data-dojo-type="dijit/MenuItem">Edit</div>
            <div id="view" data-dojo-type="dijit/MenuItem">View</div>
            <div id="task" data-dojo-type="dijit/MenuItem">Task</div>
        </div>
        <script>
            // Require the Menu and MenuItem class, and the dojo/parser,
            // and make sure the DOM is ready
            require([
                "dijit/Menu",
                "dijit/MenuItem",
                "dojo/parser",
                "dojo/domReady!"
            ], function(Menu, MenuItem, parser){
                parser.parse();
            });
        </script>
    </body>

一种是编程的方式：

 <body class="claro">
        <div id="mainMenu"></div>

        <script>
            // Require the Menu and MenuItem class
            // Make sure the DOM is ready
            require([
                "dijit/Menu",
                "dijit/MenuItem",
                "dojo/domReady!"
            ], function(Menu, MenuItem){
                // create the Menu container
                var menu = new Menu({}, "mainMenu");

                // create and add child item widgets
                // for each of "edit", "view", "task"
                menu.addChild(new MenuItem({
                    id: "edit",
                    label: "Edit"
                }));

                menu.addChild(new MenuItem({
                    id: "view",
                    label: "View"
                }));

                menu.addChild(new MenuItem({
                    id: "task",
                    label: "Task"
                }));

                menu.startup();
            });
        </script>
    </body>

以上这种方式很好用，但是只是实例化而已。如何使用dojo创建我们自己的widget呢？并且添加样式

https://dojotoolkit.org/documentation/tutorials/1.10/menus/index.html

dojo1.x之小部件widget创建-Menu菜单

猜你喜欢