A non-obtrusive image dropdown menu that extends and replaces a standard HTML Select control.
Requires Mootools Core 1.4.1 or later.
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.
Implements: Options, Events
Syntax:
var myFancySelect = new FancySelect(element, options);
Options:
Events:
Methods:
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
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