Easy Stylable jQuery Number Input Spinner Plugin Numble - Download Easy Stylable jQuery Number Input Spinner Plugin - Numble

Download Easy Stylable jQuery Number Input Spinner Plugin – Numble

By Posted on

This time I will share jQuery Plugin and tutorial about Easy Stylable jQuery Number Input Spinner Plugin – Numble, hope it will help you in programming stack.

Easy Stylable jQuery Number Input Spinner Plugin Numble - Download Easy Stylable jQuery Number Input Spinner Plugin - Numble
File Size: 65.6 KB
Views Total: 1491
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

Numble is a fast, simple jQuery plugin for transforming the normal number input into an enhanced input spinner with increment / decrement controls and mouse scroll wheel handling.

How to use it:

1. Include the jQuery numble plugin after jQuery library is loaded in your document.

view source
1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2 <script src="dist/jquery.numble.js"></script>

2. Call the function on your number input.

view source
1 $("input[type=number]").numble();

3. Style the input spinner whatever you like.

view source
01 .numble-control {
02   width: 270px;
03   height: 21px;
04   padding: 20px;
05   border: 1px solid #ccc;
06   color: #fff;
07   background-color: #E74C3C;
08   position: relative;
09 }
10  
11 .numble-control .numble-arrow {
12   position: absolute;
13   right: 10px;
14   font-size: 0.8em;
15   cursor: pointer;
16 }
17  
18 .numble-control .numble-increment { top: 10px; }
19  
20 .numble-control .numble-decrement { top: 25px; }

4. Available options.

view source
01 // enables debug mode
02 debug: false,
03  
04 // shows up and down arrows
05 includeButtons: true,
06  
07 // allows negative number
08 allowNegative: true,
09  
10 // maximum value
11 maxValue: undefined,
12  
13 // minimum value
14 minValue: undefined,
15  
16 // initial value
17 initialValue: undefined,
18  
19 // allows mouse scroll event
20 allow<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>: true,
21  
22 // numble will display this text for increment
23 incrementText: "&#x25B2;",
24  
25 // numble will display this text for decrement
26 decrementText: "&#x25BC;",
27  
28 // enable content editable
29 allowEdit: true

Change logs:

2015-09-13

  • Readonly support, prevent direct edit beyond min/max

2015-08-12

  • Fix minValue bug

2015-07-24

  • Allow for direct edit of numble control

2015-07-23

  • Implement scroll option

This awesome jQuery plugin is developed by jasonyost. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: