Selectgroup

See the selectgroup branch of http://github.com/georgepaterson/jquery-ui for the latest selectgroup code.

The selectgroup is designed as a method for applying a custom design to a native HTML select element. Currently the only jQuery UI widget for doing this to replace the select element entirely, duplicate it's functionality in a new element and replicate any changes to the new element back to the select element.

Scott while at Filament group developed such a method in 2009 creating a selectmenu, this has recieved on going support from Felix Nagel.

During 2011 a project was developed at LBi London that required a large number of custom selects. Applying the current custom select had significant performance issues as every select had their options implemented at DOM ready. We sort an alternative pattern for generating custom selects and looked to the flyweight pattern. Ray Brooks implemented this pattern as a jQuery plugin.

The selectgroup widget is an implementation of the flyweight pattern referencing both Ray's flyweight custom select and the current selectmenu widget.

Features

• Uses jQuery UI Widget factory Built using the standard jQuery UI widget pattern for creating widget instances.
• Supports jQueryUI Theme Roller Supports styling of the selectgroup using jQuery UI ThemeRoller
• Keyboard accessible The selectgroup uses the same keyboard navigation as the original select.
• Supports ARIA Uses WAI-ARIA attributes.
• Label re-association Will re-associate the placeholder with the existing label when activated.
• Optgroup support Supports options groups as well as options in the select.
• Type ahead Allows the same type ahead feature as the original select. Complex searches are cleared after 1 second.
• Flyweight pattern Uses the flyweight software design pattern http://en.wikipedia.org/wiki/Flyweight_pattern

Options

The following options can be applied to the widget:

• autoWidth: Boolean, default is true. Sets the width of the drop down to be the width of the select placeholder.
• classInherit:
  • select: Set the placeholder to inherit the classname(s) of the select element.
  • option: Set the selectgroup items to inherit classname(s) of the select's options.
  • optionGroup: Set the selectgroup options groups to inherit classname(s) of the select's options groups.
• positioning: Uses the features of the position widget http://jqueryui.com/demos/position/
  • my: Defines which position on the element being positioned to align with the target element.
  • at: Defines which position on the target element to align the positioned element against.
  • of: Element to position against. If you provide a selector, the first matching element will be used.
  • offset: Add these left-top values to the calculated position, eg. "50 50" (left top) A single value such as "50" will apply to both.
  • collision: When the positioned element overflows the window in some direction, move it to an alternative position.
• autoWidth: Sets the selectgroup width to be the width of the placeholder.
• style: Set the selectgroup to be either a dropdown or popup style.
• handleWidth: Sets a margin on the selectgroup equal to a pixel value. Useful for the popup style where the selectgroup is placed above the placeholder.

Methods

• open: Show and position the selectgroup. The placeholder that is to be opened should use the focus method first to build the selectgroup using the values associated with the placeholder.
• close: Hide the selectgroup. If leaving the placeholder the blur method should be called.
• refresh: Refresh the value of the placeholder.
• focus: Index and render the values associated with the placeholder. Sets this placeholder to be active.
• blur: Sets the placeholder to be inactive.
• disable: Disable the placeholder, an option group or option. See disable method example.
• enable: Enable the placeholder, an option group or option. See disable method example.

Supported Browsers

Browser support is defined as browsers that will receive primary testing as part of widget development. Unsupported browsers may still work but will not receive primary testing.

• Firefox 4 +
• Chrome latest*
• IE 7 - 9
• Safari 5.x
• Opera latest*

*Latest is defined as the latest non-beta minor version of the browser.