Menu Planning

Menu Planning


Its been painfully obvious that our widgets and interactions are too
complex and cover to many options to be easily maintainable. The
planning page for the Menu shows the same tendency:
http://wiki.jqueryui.com/Menu
I'd therefore like to discuss a different approach to building a menu
widget. Instead of trying to provide something that can various
completely independent usecase with the setting of an option, we
should build just enough for other widgets to build upon: Want a
contextmenu? Then use menu to build a contextmenu widget. Same for
dropdown menus (for a toolbar widget).
If we break it down that way, all a menu would do is rendering and
handling focus and selection via mouse and keyboard. Looking at the
problem this way makes it much easier to see other usecases for a base
menu widget. To give a better idea how that could look like, take a
look at these examples:
http://jsbin.com/owewe/edit
This outlines a contextmenu widget: A handles the right click event
and event delegation, builds or find a unordered list, and uses
.menu() to render the actual contextmenu. The select-option is just
passed through to the contextmenu's select option, letting the plugin
user decide what to do when a menu item is selected.
http://jsbin.com/uxeli/edit
Here we have an autocomplete that uses .menu() to build the
suggestionlist and not worry about focus and selection: It just uses
the select-option to put the result value back into the input.
Note the use of data: While this is still just an idea, it could be a
good strategy to encapsulate arbitrary data structures in DOM
elements, and retrieve those back in the form of a DOM element, where
the data can be extracted again.
http://jsbin.com/egoco/edit
Here we assume that menu is able to render nested menus. And if it can
do that for a toolbar-menu, why not also use it for an autocomplete?
With the menu working off a nested list, there would be no need for it
to provide any methods for manipulating the menu content: Just modify
the DOM elements as you usually do with jQuery, and, if necessary,
rerender the menu.
What do you think?
Jörn