spinControl
Hot on the heels of sliderControl comes its close cousin, the spinControl. Whereas in the sliderControl, the thumb widget is moved across a fixed set of values to select the desired input, in the spinControl the whole set is movable. This allows for larger set of data that can fit on the visible screen.
Demo (best viewed on desktop Safari/Chrome or iPhone/iPod Touch).
Although the demo uses jQTouch & jQuery, neither is required to run spinControl.
Code:
Released under MIT licence. Free to use.
Version 0.1 February 5, 2010 — initial release
Usage:
new spinControl('#spinDiv');
- Spin control with values 0-100 (%).
new spinControl('#spinDiv', min, max, step);
- Spin control with values min to max in increments step.
new spinControl('#spinDiv',['yes','no','maybe']);
- Spin control with text values.
new spinControl('#spinDiv', 1,10, options);
- Spin control with values 1-10 (step 1) and given options.
Markup
<div id="spinDiv"></div>
To show the spin value, include this div anywhere:
<div class="spinValue"></div>
Options
defaults:{ // functionality easing : 'ease-out', easingDuration : 350, labels : true, // show labels within spin: true/false, labels[], or "|" separated string spinToClick : true, // spin to clicks anywhere on spin enableSnap : true, // snap to value after user finishes sliding enableToggle : false, // for binary states, click on thumb hints : null, // text message to show in place of value, null or hints[] //initialValue : null, // set initial value or null to not set it (if undefined, set to index 0) disabled : false, // initial disable/enable state bounciness : .2, // bounce factor (in relation to distance moved) acceleration : 1, // spin acceleration factor alignToEdge : false, // if true, selected item is aligned to right edge, else centered // styling valueSelector : '.spinValue', // selector for place to show value on spin spinClass : 'spin', // CSS class for main spinner container thumbClass : 'spinThumb', // CSS class for thumb labelClass : 'spinLabel', // CSS class for labels selectedClass : 'selected', // CSS class for the selected value labelsDivClass : 'spinLabelsDiv', // CSS class for styling the labels DIV disabledClass : 'spinDisabled', // CSS class for a disabled spin spinCss : {}, // runtime CSS attributes for spin thumbCss : {}, // runtime CSS attributes for thumb labelWidthAdjust : 1, // adjust to make labels fit if styling changes (border, etc.) // event callbacks onspinbegin : null, // called once on spin begin (manual only) onspin : null, // called while user is sliding or just once if spin programmatically. // args: // delta - pixels moved since last call onspinend : null, // called after the spin (transition) ends onchange : null, // called once at end of spin if the value has changed. // this.value is the new value onclick : null, // called if user clicks on spin (incl. thumb). arg: (event) // return false to prevent default spin action }
Methods:
See sliderControl methods.
Special case: the toggle switch
A special case of the spinControl is the toggle switch that behaves similar to iPhone’s on/off switch, which can be toggled by clicking or sliding it. I call it the spinToggle.
Usage:
spin4 = new spinToggle('#spin4', ['ON','OFF'], { // onOffStyle: true, onchange: function(){ alert('selected state is ' + this.value); }, });
The onOffStyle flag (if provided), styles the control similar to iPhone’s on/off toggle switch. The second argument should be an array indicating the text for the two states of the switch. The width of the control is adjusted accordingly.
See demo link above for example.