Monday, June 23rd, 2008
The team at Giva Labs were looking for a method to show off a complex hierarchical tree of options within their software applications and while there are many options in terms of UI controls, they needed something that would be intuitive and offer both mouse and keyboard entry. The requirements were challenging:
- Menus must resize and position themselves to stay in the viewport. Options should not show up off screen where users would need to scroll to select them.
- Quick keyboard entry. Many users prefer keyboard entry for speed of data entry, so efficient keyboard entry is a must.
- Must be able to handle very large complex (deep) data trees, but work equally as well with very small sets of data.
- Easy implementation.
Taking the “homegrown” approach, they came up with a very slick hierarchical combo box which they’ve called mcDropdown. Some of the features of mcDropdown include:
- Creates a multi-column hierarchical select UI component
- Binds a text input field or div element to a list element (included nested lists)
- Menus are automatically split into columns as needed
- Menus are positioned to always stay on the screen
- Autocomplete keyboard entry (only valid options are allowed)
- Menu automatically scrolls into viewport when opened
Although originally designed for internal usage, Giva generously released this jQuery plugin under the Apache License. They’ve also documented the extension clearly and provide excellent examples on how to implement the control.
Posted by Rey Bango at 7:34 am