Navigation

MavSelectBox v0.5.5   (A mootools more library)

MavSelectBox is a simple-to-use form select replacement that allows for better customization. I had the need for this myself and all though there are a few out there that do a damn good job, none were exactly what i felt i needed. And as we all know, competition breeds innovation, right?

MavSelectBox mimics the GUI interactions of a normal select element as much as possible (the non-annoying anyway). This is done so as not to break with user expectations. Up and down arrows move the selection, tabbing to it and hitting alt+down shows the menu, tabbing to it and simply hitting up or down selects the next available option in that direction, focusing then start typing and the option that matches what you are typing is selected, enter selects, esc closes, and so on.

Discussion

For now, all discussion will be located at the unofficial mootools forum. Partly because i think people will probably look there for it anyway, partly i hate setting up forums, and also because right now i'm feeling lazy. ^_^

Discuss MavSelectBox on the unofficial mootools forum

Download MavSelectBox

MavSelectBox requires the mootools core framework v1.2+. You can play around with customizing it if you want, but i would recommend just grabbing the default core. I will post a barebone requirement if so desired.

You will need two parts for MavSelectBox to work correctly; both a Javascript library, and a CSS file. The CSS provided below contains just the basic classes (and default class names) required for MavSelectBox to function.

You can of course specify your own attributes, styles, and class names. If you chose to change the class names, be sure to specify them in the options as seen below in the example and option layout.

Get the newest Mootools Core MavSelectBox Basic CSS file MavSelectBox Javascript (uncompressed)

Back to top

Examples

Options
Original Copy
Options
Original Copy

Back to top

Usage


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<link rel="stylesheet" type="text/css" href="/path/to/css/mavselectbox.css" />
	<script type="text/javascript" src="/path/to/js/mootools.core.js"></script>

	<script type="text/javascript" src="/path/to/js/class.MavSelectBox.js"></script>

	<script type="text/javascript">
		window.addEvent('domready', function() {
			var my_select = new MavSelectBox('select_field');
		});
	</script>

</head>
<body>

<select id="select_field" class="some_class" style="width:200px">
	<option value="first" class="bland">First option</option>

	<option value="second" style="color:red">Second-best option</option>
	<optgroup label="Optgroups are hip">
		<option value="opty" class="optful">First optgroup option</option>

		<option value="" disabled="disabled">I be disabled option!</option>

	</optgroup>
	<option value="thirdee" selected="selected">Selected third!</option>

	<option value="lastestes" class="bright sweet" >lastest and Bestest</option>
</select>

</body>
 </html>
Back to top

Syntax

// Simplest method possible
var my_select = new MavSelectBox('element_id');

// Specify an onSelect method and alternate option colors
var your_select = new MavSelectBox({
	elem: $('another_id'),
	alternate: true,
	onSelect: function(_elem) {
		// Do somethin' funky!

	}
});
Back to top

Arguments

  1. The element to be replaced or options to be set 
    • (Element)
      The element will be extended if it is not already.
    • (String)
      A string containing the id of the DOM element.
    • (Object)
      An object containing the element and additional options.

Returns

  1. (Element)
    A MavSelectBox element.
  2. (null)
    Null if an error occurred, or if no element specified.
Back to top

Options

  1. altClass String 'select-box-alt'
    Class for alternating options if alternate is set to true.
  2. alternate Boolean false
    Whether or not to alternate the altClass on every other option 
  3. alternateOdd Boolean false
    If alternate is true, set this option to true to alternate the odd options to altClass instead of the even options. 
  4. attachResize  Boolean true
    Repositions the select option menu on resize of 
    window
    .
  5. disableClass String 'disabled'
    Class for disabled options.
  6. filter Function null
    Not yet implemented : Will be used to filter the option text values.
  7. fxOptions Object {}
    Options to use for the Fx.Tween object if 
    useFx
    is set to true.
  8. groupClass String 'select-box-options-group'
    Class for the optgroup list.
  9. maxShow Integer null
    Not yet implemented : Will limit the amount of options shown at any time.
  10. minShow Integer 3
    Minimum number of options to show.
  11. optionClass String 'select-box-opt'
    Class to be applied to each option.
  12. selectboxClass String 'select-box'
    Class to be applied to the select box element.
  13. selectClass String 'selected'
    Class to be applied to the currently selected option.
  14. selectmenuClass String 'select-box-options'
    Class to be applied to the select box menu element.
  15. showStyles Boolean false
    Show the option's styles in the selectbox display.
  16. useFx Boolean true
    Whether or not to use Fx.Tween to show and hide select menu.
Back to top

Compatibility

Tested and working with:
Back to top

Changelog

Back to top

Mavenous Mootools Libraries