le accidental occurrence

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:

Available on Github.

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.