jqSelectorWheel

Simple jQuery wheel selector plugin.

Selector Wheel : jQuery Plugin

Description

jqSelectorWheel is a simple jQuery plugin that provides behavior of wheel symbol selector. Plugin uses jquery-mousewheel

Example:

Usage

Including files into DOM:


        <script src="jquery.mousewheel.js"></script>
        <script src="jquery.SelectorWheel.js"></script>
        <link rel="stylesheet" type="text/css" href="jqSelectorWheel.css">

How to use plugin:


        <div id='myPrettyID2' class='jqSelectorWheel' 
                                length='5' 
                                valueTo='90000' 
                                valueFrom='1' 
                                value="221></div>
        <script> 
            var jqSelectorWheel = $("#myPrettyID").SelectorWheel({
                {"hiddenInput" : {
                  "enabled":true, 
                  "id" : "hiddenInputID", 
                  "name" : "hiddenInputNAME"}}
            });
        </script>

Settings

JSON

Property Default value Description
value 'value' attr or 0 Initial value of wheel
valueLength 'length' attr or 3 Count of symbol cells
valueFrom 'valueFrom' attr or 0 Minimal value of controller
valueTo 'valueTo' attr or 999 Maximal value of controller
changeSign false Make value sign opposite by click or not
sensetivity 1 Value wich be multiplied by scroll
blockScroll true Capture event for scroll window
eachSymbol true Make every symbol change independently
type 'int-10' Type of value
alphabet "0123456789" Order of alphabet symbols

Hidden input

If you want use hidden input to collect value of wheel selector control - switch hiddenInput.enabled value to true and set up hiddenInput.id and hiddenInput.name for your input. Value of input will update automaticaly.

hiddenInput Object {} Hidden input to collect values
enabled false Enable hidden input or not
id undefined 'ID' attribute of hidden input
name undefined 'name' attribute of hidden input

Custom alphabet

You also can use custom symbol alphabet. To customize alphabet and symbol order use next two properties in settings.json:

  1. type - Sets value's datatype. By default type is 'int-10' (it means that value's datatype is integer and last 2 digit says about value's base - 10 is decimal, 16 is hexadecimal etc). You can use all 2 digital bases from 02 (binar) to 36 (0-9a-z). Also you can use type 'string'. If you use string value type that means that you can't switch option eachSymbol to false. And you must set up your custom alphabet for string type.
  2. alphabet - Sets order and symbols for alphabet. For example for 'int-16' type, alphabet is '0132456789abcdef'. For integer types alphabet calculates automaticaly. For string type - alphabet sets up by designer. Example: alphabet:"abc" means that user can turn wheel between 3 values "a", "b", "c".

Listening for events:

  1. wheel
  2. mousewheel
  3. DOMMouseScroll
  4. MozMousePixelScroll

1 per 40 px scroll.

Versions

Lightweight version

There is available light weight version of plugin 2.5 KB - minimized, that equivalent for regular version of plugin with options : eachSymbol: true, type: 'int-10', changeSign: false, scrollBlock: true

Mousewheel-included version

There is available version with already included mousewheel event emitter from jquery.mousewheel. If you use this version you don't need to include jquery.mousewheel into your HTML

Download

Download this project as a .zip file Download this project as a tar.gz file

Development

bower files unpacking into bower_components directory; Dependencies is: jQuery and jQuery.mousecheel.

  1. Installing components with bower for development: bower instal
  2. Updating css with LESSC: lessc dev/main.less > jqSelectorWheel.css
  3. Updating minified versions : sh update.sh
  4. Including plugins and packages: <script src="/bower_components/jquery/index.js">