https://github.com/zefirka/jqueryselectorwheel
Simple jQuery wheel selector plugin.
https://github.com/zefirka/jqueryselectorwheel
Last synced: 2 months ago
JSON representation
Simple jQuery wheel selector plugin.
- Host: GitHub
- URL: https://github.com/zefirka/jqueryselectorwheel
- Owner: zefirka
- Created: 2014-01-27T14:04:03.000Z (over 12 years ago)
- Default Branch: master
- Last Pushed: 2014-02-18T17:36:30.000Z (over 12 years ago)
- Last Synced: 2025-03-23T06:28:48.704Z (over 1 year ago)
- Language: JavaScript
- Homepage: http://zefirka.github.io/jquerySelectorWheel
- Size: 531 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
#jqSelectorWheel : jQuery Plugin#
jqSelectorWheel is a simple jQuery plugin which provides behavior of wheel symbol selector. Homepage
Plugin uses jquery-mousewheel
##Usage##
Including files into DOM:
<script src="jquery.mousewheel.js"></script>
<script src="jquery.jqSelectorWheel.js"></script>
<link rel="stylesheet" type="text/css" href="jqSelectorWheel.css">
How to attach plugin to element:
<div id='myPrettyID' class='jqSelectorWheel'
length='4'
valueTo='8888'
valueFrom='0'
value="666></div>
<script>
var jqSelectorWheel = $("#myPrettyID").jqSelectorWheel({
//settings JSON
});
</script>
Attributes length, value, valueFrom, valueTo is not required; You can set up these in settings json.
**Settings JSON**
|=============|=======================|===========================================|
| PROPERTY | STD VALUE | DESCRIPTION |
|=============|=======================|===========================================|
| value | 'value' attr or 0 | Initial value of controller |
|-------------|-----------------------|-------------------------------------------|
| 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 from 0 to 1. Multiplied by scroll |
|-------------|-----------------------|-------------------------------------------|
| scrollBlock | true | Prevents event for scroll window |
|-------------|-----------------------|-------------------------------------------|
| eachSymbol | true | Make every symbol change independently |
|-------------|-----------------------|-------------------------------------------|
**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**
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.
##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 . This version is in directory lightweight-version
##Version with included jquery.MouseWheel##
Version where jquery.mousewheel has already included is in directory mousewheel-version. In this version you have no need to include jquery.mousewheel plugin into you HTML 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">