How to create our own widget based on the existing menu class?
One is hard-coded:
<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>One is the way of programming:
<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>The above method works well, but it is just instantiation. How to use dojo to create our own widget? And add style
https://dojotoolkit.org/documentation/tutorials/1.10/menus/index.html