/FancySelect

A non-obtrusive image dropdown menu that extends and replaces a standard HTML Select control.

Primary LanguageJavaScript

FancySelect

A non-obtrusive image dropdown menu that extends and replaces a standard HTML Select control.
Requires Mootools Core 1.4.1 or later.

Screenshot

How to use

First of all, include in your page Mootools 1.4.1 or later, FancySelect.js source and FancySelect.css sheet.

#HTML

<script type="text/javascript" src="Mootools.js"></script>
<script type="text/javascript" src="FancySelect.js"></script>
<link type="text/css" href="FancySelect.css" rel="stylesheet">

Create a <select> element in HTML, and add a data-image attribute to <option>, specifing image paths:

#HTML

<select name="fruits" id="fruits">
	<option value="1" data-image="apple.png">Apple</option>
	<option value="2" data-image="banana.png">Banana</option>
	<option value="3" data-image="cherries.png">Cherries</option>
	...
</select>

Then, in your Javascript:

#JS

$('fruits').fancySelect();

About CSS styling. The script comes with a sample CSS file. You can easily change styles such as colors, backgrounds, borders, font and dimensions to customize FancySelect look, but be careful about the layout properties - some of them are essential to make FancySelect works as expected.

Docs

Implements: Options, Events

Syntax:

#JS

var myFancySelect = new FancySelect(element, options);
  • element: A <select> DOM element or ID.
  • options: (object) Options for the class. They are all listed below.

Options:

  • showText: If TRUE (default) keeps text in the dropdown menu.
  • showImages: If TRUE (default) show images in the dropdown menu.
  • className: A class name for CSS styling, default 'fancy-select'.
  • autoHide: If TRUE auto-hide the dropdown menu when user clicks outside.
  • autoScrollWindow: If TRUE auto-scroll browser window when FancySelect is out of viewport.
  • animateFade: If TRUE (default) animate the dropdown menu appearance.
  • legacyEvents: If TRUE fires "change" event for the original <select> element.
  • fx: An object for additional Fx options (default {'duration': 'short'}).
  • relativeTo: An element id or element reference for dropdown positioning. (default document.body).

Events:

  • show: The dropdown menu appears.
  • hide: The dropdown menu disappears.
  • attach: FancySelect just replaced the <select> DOM element.
  • detach: The <select> DOM element is back.

Methods:

  • attach(): Replace the <select> DOM element with FancySelect.
  • detach(): Bring the <select> DOM element back.
  • select(value): Select a value.
  • show(): Show the dropdown menu.
  • hide(): Hide the dropdown menu.
  • toggle(): Show/hide the dropdown menu.

Element and Elements methods:

You can use some shortcut methods on Element and Elements for creating and showing the FancySelect dropdown.

#JS

$$('select').fancySelect(options); // Attach FancySelect to all elements
$('mySelect').fancySelectShow(); // Show the dropdown menu.
var myFancySelect = $('mySelect').get('fancySelect'); // Get instance
  • Elements.fancySelect(options): Creates a new instance of FancySelect on elements.
  • Element.fancySelect(options): Creates a new instance of FancySelect on the element.
  • Element.fancySelectShow(): Show the FancySelect dropdown on the element.
  • Element.fancySelectHide(): Hide the FancySelect dropdown on the element.
  • Element.fancySelectToggle(): Toggles the FancySelect dropdown on the element.
  • Element.get('fancySelect'): Retrieves the FancySelect instance of the element.