mooSelecta 1.6

A MooTools select element styling replacement Class done as a progressive enhancement. Tested and working on: IE6, IE7, IE8, IE9, FF3+, Chromium 5+, Safari 4.0.4+, (please report others to christoff at gmail.com)

Style-able entirely through CSS with the original element events intact, adhering to tabindex, keyboard navigation and so forth.

The "real" selects are being placed off-screen so their functionality is completely preserved in that any forms with them will continue working as per usual.

Now updated for MooTools 1.4.2 without compatibility mode.



Details

Author
Dimitar Christoff
Current version
1.6
GitHub
DimitarChristoff/mooSelecta
Downloads
5949
Category
Interface
Tags
Report
GitHub Issues

Releases


Dependencies

  • _self_/_current_:
    • Core/String
    • Core/Event
    • Core/Browser
    • Core/Element
    • Core/Element.Dimensions

How to use

You need to setup your CSS classes based upon the ones already provided in the Example/css directory. Look at the options part of the mootools class to see what bits are customisable and follow the example.

To glue it all together, just include the mootools-core and then mooSelecta.js

Within your domready or load callback function, create an instance with whatever options suit you:

var selecta = new mooSelecta({
    selector: "select.selecta"
});

new mooSelecta({
    selector: "select.selecta2",
    triggerClass: "selecta2",
    triggerPadding: 24,
    triggerBeforeImage: "/img/select-left.png",
    triggerBeforeImageWidth: 3,
    triggerBeforeImageHeight: 21,
    wrapperClass: "selecta2Wrapper",
    wrapperWidthAdjustment: 0,
    optionClass: "selecta2Option",
    optionClassSelected: "selecta2OptionSelected",
    optionClassOver: "selecta2OptionOver"
});

Class Methods

The class itself has plenty of comments throughout so feel free to look at the source code. That being said, there are the following useful methods you can call:

.replaceSelect(el); // applies the current style to a new select element. Also useful if you build options on the fly and change existing selects

.bindListeners(); // a somewhat private method that will enable listen events for any and all subsequent **mooSelectas**

._addOption(option, el, selected); // adding options to the dropdown wrapper.

._toggleOptions(el); // opens or shuts the options list on a select that has been focused

._hideOptions(); // closes all open options.

._clearSelection(); // attempt to avoid text node selection when clicking on an option trigger

Known Issues

  • Problems with Opera and .fireEvent("click") and the resulting .stop(), causing keyboard navigation issues when pressing enter.

Known Limitations

Obviously, the select elements are very complex and OS-driven components that incorporate a number of usability features, albeit -- implemented very differently across browsers. You cannot possibly hope to write a single tool that can mimic all known behaviours across the different operating systems either. It's a simple usability decision on what works and what does not, feel free to tweak it to your liking or to the liking of your users.


Screenshots


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