JQUERY SELECT BOX PLUGIN
A jQuery plugin that progressively enhances an HTML select box into a single option dropdown list. The dropdown list can be optionally styled with Twitter Bootstrap, jQueryUI ThemeRoller, or jQuery Mobile, optionally animated with jQueryUI show/hide effects, and works on desktop, tablet, and mobile browsers.
SelectBoxIt allows you to replace ugly and hard to use HTML select boxes with gorgeous and feature rich drop downs. Twitter Bootstrap, jQueryUI, and jQuery Mobile themes are supported right out of the box. If you don't want to use these a library theme, then you can use the SelectBoxIt default theme, which closely resembles the Twitter Bootstrap theme. Feel free to customize the default theme to your liking.
To use SelectBoxIt, you do not have to rewrite any of your existing form validation logic or event handling. SelectBoxIt just works. SelectBoxIt also provides first-class support for mobile, tablet, and desktop browsers, triggering the native "wheel" interface for mobile and tablet devices.
Styleable with Twitter Bootstrap, jQueryUI Themeroller, and jQuery Mobile
Supports Desktop, Tablet, and Mobile browsers
Supports all jQuery and jQueryUI show/hide effects (optional)
Supports all Twitter Bootstrap (Glyphicons) and jQueryUI/custom icons
Includes ARIA (Accessible Rich Internet Applications) support
Full keyboard search and navigation support
An event API triggered on the original select box element that calls the plugin
A method API providing methods to interact with the dropdown list (i.e. Search, Open, Disable, Set Options).
Passes jsHint with no errors
Selected, Disabled, and Optgroup Support
Easily extendable to allow developers to create new widgets
jQuery 1.8.3+ (It is always recommended to use the latest version of jQuery)
jQueryUI Widget Factory 1.10.0+ (It is always recommended to use the latest version of the jQueryUI Widget Factory)
Desktop Browser Support
IE8+, Firefox 4+, Chrome, Safari 4+, Opera 11+ (Other browsers may work, but I did not test on them)
Note: The CSS3
background-size property is used for the icon images, which is only supported in IE9+
Mobile/Tablet Browser Support
iOs 3+, Android 2.1+ (Other browsers may work, but I did not test on them)
All unit tests are written using the Jasmine Framework
Take care to maintain the existing coding style. Add Jasmine unit tests for any new or changed functionality. Lint and test your code using grunt.
If you plan to contribute to
SelectBoxIt in the future, keep in mind that you should make sure your code passes the Grunt checks.
To set up the SelectBoxIt grunt/node.js dependencies, first make sure you have PhantomJS installed, which is a headless browser. Unfortunately PhantomJS cannot be installed automatically.
Next, navigate to within the jquery.selectBoxIt.js folder and type `npm install' (this should install grunt and a few other node.js libraries).
Note: If you are on Windows, remember you need to run the grunt command using
grunt.cmd. Also, if you have trouble getting the Jasmine Unit Tests to work with PhantomJS 1.5 (the current release), install PhantomJS 1.3.
After you have verified your code, send a pull request to the
SelectBoxIt dev branch. After you send a pull request, you will hear back from me shortly after I review your code.
You'll find source code in the "src" subdirectory!
If you find that you need a feature that SelectBoxIt does not currently support, either let me know via the SelectBoxIt issue tracker, or fork SelectBoxIt on Github and easily extend SelectBoxIt to create your own widget!