Select replacement, but fancy!
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
font
images
js
README.markdown
index.html
index2.html

README.markdown

###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

###Licensing

###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