FancySelect 0.6

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



Details

Author
Lorenzo Stanco
Current version
0.6
GitHub
lorenzos/FancySelect
Downloads
5769
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_: core/1.4.1: '*'

How to use

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


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


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


$('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:


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.


$$('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.

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.

blog comments powered by Disqus