JS/CSS Spinning Wheel Selector Widget

Matteo over at Cubiq has created a nifty spinning wheel selector widget and released it under the MIT License.  The widget gives you the ability to present users with a picklist with multiple columns, with animation that closely resembles the native Picker View.

Just released from beta, the script is composed of two parts: the stylesheet and the javascript. No HTML is needed as all the elements are created by the script on the fly. Simply include the javascript and stylesheet in your page and you are ready to go. The code does not need initialization on window load. You cannot have more than one picker at a time, so the SpinningWheel object is unique and it is created as soon as you include the JS file.

spinning-wheel

Customizing the slots is simple, just add your own styles. The whole thing has been minified to 9kb, so it’s using minimal bandwidth.

Matteo was kind enough to make a nice screencast for you to enjoy on your desktop. You can also see a working demo on your iPhone/iPod Touch here.

Source: Cubiq

Demo

Screencast