Features (Demo 1 / 2)

• Adds an animation and styled selector which updates and interacts with the native select.
• Mouse or keyboard navigation:
  • Move down - down & right arrow, page down & mousewheel (if mousewheel plugin found).
  • Move up - up & left arrow, page up & mousewheel.
  • To Start - Home
  • To End - End
• Change selections using the mouse or keyboard:
  • Mouse double-click - toggle selection.
  • Mouse Control + click - toggle selection.
  • Mouse Shift + click - toggle selections between current position and clicked selection.
  • Space - toggle selection of highlighted option.
  • Insert - select highlighted option.
  • Delete - unselect highlighted option.
  • Shift + Space - toggle all options - none selected or all selected.
  • Shift + Arrow - takes current selection (selected or not selected) and continues it in the arrow direction - NOTE this is not the default way it works inside a select box!
• Get or set selection methods available.
• Event hooks & callbacks added to allow extension of the plugin.
• ARIA support (may not be fully implemented).
• Works in all of the latest browser versions, as well as IE7 & IE8 (in IE9 compatibility mode)

Dependencies

• Required - jQuery 1.4.3+
• Optional - jQuery mousewheel plugin & easing plugin

Documentation

• Wiki Pages: Home | FAQ | Setup | Options | Usage | Events | Change

Licensing

• FancySelector: MIT License
• Font: Creative Commons Attribution License 3.0

Change Log

Only the latest changes will be shown below, see the wiki change log to view older versions.

Version 1.0.1 beta (5/3/2011)

• Added mouse double click to toggle selection.
• Added a method to allow updating the selector. Use it as follows:

// Update FancySelector - No options required.
$('.selector').fancySelector();

• Changed includeHighlight option to be false by default.
• Updated the main demo:
  • Window resize script is no longer required for a full screen FancySelector. It now uses the proper CSS to keep the height at 100%.
  • Info box updated to show triggered events & made hideable.
• Added shortcut methods to change a selection and/or move the highlight.

// Highlight fourth option (zero-based index).
$('.selector').fancySelector(3);

// Select and highlight third option (zero-based index).
$('.selector').fancySelector(2, true);

// Unselect and highlight third option (zero-based index).
$('.selector').fancySelector(2, false);

Version 1.0 beta (5/2/2011)

• Posted on Github