/ Select

A jQuery plugin that progressively enhances an HTML select box

A jQuery plugin that progressively enhances an HTML select box

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

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.

Notable Features

  • 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

Requirements

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)

Unit Tests

All unit tests are written using the Jasmine Framework

Contributing

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).

Next, type grunt

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!

Forking

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!

Author

Greg Franko

GitHub

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More