jQuery Spin Button Plugin: Sensible Spin
Sensible spin is a jQuery spin button plugin that mimics the quite common home windows spin button management. Sensible spin lets you choose a worth between minimum and most values utilizing both mouse or keyboard. You may as well enter a value by way of keyboard.
Sensible spin comprises a textual content field and “up” “down” buttons; it additionally helps “masking”(textual content that seems when the management loses focus). Clicking the “up” button causes the worth to increment by step worth (step worth is configurable, default is 1), whereas clicking the “down” button causes the worth to decrement by step quality. Clicking up/down buttons and holding the left mouse button causes the values to alter extra quickly. Sensible Spin now helps mouse wheel button; you’ll be able to change worth utilizing mouse wheel as nicely.
Contents
Sensible spin Configuration Parameters
- min: minimal worth of spin button management
- max: most worth of spin button management
- stepInc: small increment worth
- pageInc: giant increase value (on web page up and web page down)
- masks: elective textual content that seems when the management loses focus
- initValue: worth to be displayed when the management in initialized/reset
- width: width of spin button management
- top: top of spin button management
- btnWidth: spin buttons width, requires for customized picture
- callback: callback perform to be known as on every worth change
Strategies
Sensible Spin plugin has a “reset” methodology that may be invoked over the plugin, “reset” method takes one parameter, the plugin worth might be up to date by this parameter worth.
Utilizing Sensible Spin
In your HTML file add the next within the head part.
- Add a reference to newest jQuery script
- Add a reference to smartspinner.js file
- Add a reference to smartspinner.css
Create a textual content field (enter kind=” textual content”) throughout the physique of your HTML file as below.
<enter kind="textual content" id="spn" class="smartspinner"/>
Additionally, add the next code to your HTML file’s head part.
<script kind="textual content/javascript">
$(doc).prepared(perform() );
</script>
Right here is the whole code for instance above.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.zero Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Spinner Management</title>
<script src="jquery-1.four.four.min.js" kind="textual content/javascript"></script>
<script src="smartspinner.js" kind="textual content/javascript"></script>
<hyperlink href="smartspinner.css" kind="textual content/css" rel="stylesheet"/>
<script kind="textual content/javascript">
$(doc).prepared(perform() );
</script>
</head>
<physique>
<enter kind="textual content" id="spn" class="smartspinner" />
</physique>
</html>
Replace Historical past
- March eight, 2011 Sensible Spin launched.
- April 19, 2011, Mouse Wheel assist added.
Sensible Spin Review
- Overall
- Feature Availability
- Customization
- Design Quality
- Flexibility
Hi, before all, you have developed a great plugin. I’ have a question. How can i reset the spins confs? Example: i want change the spin1 max value automatically to the actual spin2 value when i change the spin2 value. Do you understand?
Thanks
hi i have using smart spinner for incremental value in decimal points. while incrementing it shows like 1.2000000. can any one help me. how to resolve this issue.
You can fix this by changing parseFloat to parseInt in the script.
Does this spinner plugIn have a change method? For an already defined spinner, I would like to dynamically change the max property, and maybe other properties in the future. I believe jQuery has a change method, but I would prefer to use this plugIn instead because of it’s mask feature and it is more lightweight. The only think holding me back is I need to dynamically change the max.
I got the equivalent of the change feature working my using the jQuery replaceWith method.
You could simply re-initialize the plugin with new max value, whenever you need to change the max value.
Good work and must say a great plugin…
But I have certain questions regarding the plugin:
1. Under what type of license is this plugin offered? The reason I ask this is that I wish to use your plugin for on a tool which is commercial in nature… I am developing a web tool and wish to use this plugin there…
2. I guess from the git repo I did not see any minimized version of this javascript. Do you not offer a minimized version of the jquery script. If not are we allowed to minimize your script so that we can easily bundle it with our tool?
thanks,
dhiraj
Yes, its absolutely free you can use it in commercial application. You can also compress the script if you need.
Wonderful work!
As per Andy Kim’s statement, I had trouble with the spinner rolling to far, particularly in recent versions of Chrome / Chromium. The fix is to use setTimeout instead of set Interval, with a quarter-second period;
el.mousedown(function(e) {
isPgeInc = false;
clearInterval(interval);
interval = setTimeout(onValueChange, 250);
});
setInterval is actually used to simulate the mousehold event. Its not possible with setTimeout, if setTimout is used you have to click up/down buttons to change the value.
I am using 8 smartspinners on a page. I want to initialize each of those to a different value from Javascript. When I do that using either .val(n) or .reset(n) I get strange results. As soon as I mouseover one of the spinners, the value gets changed to the initValue. If I use .reset() then all spinners except the last one get changed to the initValue, and the last one gets set to the value I used in the reset(). What am I doing wrong?
Can you show me how you are doing it, that would be easy for me to figure out the problem.
Hi Shahbaz,
I am facing the same issue. I guess the problem is the variable value and all other defined variable defined are being shared among all the created spin controls, so even if you set value using reset function or using some other way, the last set value get shared by all the created spin control.
If you debug the script using chrome you will see that value variable is set as a Closure that is shared by all the spin controls…
Thanks,
Dhiraj
Nice work …….2 questions :
How can i dynamically disabled it via jquery ….?
I have 1 field ….and after an triggered event i am make it read-only with Jquery …..but the mouse-well continue to work even on a read-only field …… that is not ok from my point of view .
Cheers !
i altered an function in the end …something like
function setValue(a, b) {
if(el.attr(‘readonly’)){return;}
if (a >= settings.min && a <= settings.max ) {
value = b;
} el.val(value);
}
So at least now is not modifying the values if the field is read-only !
Cheers !
Hello! Can’t download or view demo… :'(
Check it now, I was updating the theme and moving to new host. Its working now.
Awasome resources. Good works
This is very nice. The attention to detail is amazing.
I found a small bug, though. When you don’t set the mask, deleting everything using the backspace key and then re-entering a number brings back the deleted number. Steps to reproduce:
1) Download the demo code.
2) Modify the spinner.htm file and take out the mask parameter from line 14.
3) Open spinner.htm in a browser and put the text cursor at the end of the red number.
4) Press the backspace key twice to delete the “40”
5) Type in any number, such as 1
Result: You get the 40 back
Expected result: 1
Environment: Mac OS X 10.6.7, Safari 5.0.5
Work around:
Commenting out line 113 of smartspinner.js fixes the problem, but it will introduce another problem if you do need to use masks.
Other things I noticed:
1) The default repeat delay is too small. I find that it often increments twice when I click the increment button. I had to change the wait interval to 250 ms from 100 ms to make it work for me.
2) The value increases when I scroll down and decreases when I scroll up. Other spinner controls that do implement mousewheel support do it the opposite way but I’m not sure if this is a bug or by design.
In any case, don’t let my bug report get you down. You’ve written something amazing and shared it with the world. High five 🙂
Everything looks ok, however when mousing over either the top or bottom arrow (graphic), the mouse pointer is a cursor. I can’t adjust the value at all using the mouse as intended. “Mask” also doesn’t seem to work. I can’t for the life of me figure out what’s wrong. Everything is in it’s place.
Everything seems to “look” ok, however mask isn’t working and the arrows don’t do anything. Pointer remains a “pointer” and I can not increase the numeric value using the arrows. ???
Quite! This was a really fantastic post. Thank you for ones furnished details.
Superb published report. It’ll be useful to anybody who usess it, including yours genuinely 🙂 . Keep up the good perform – for confident i’ll check out a lot more posts.
Awesome! Subscribed and looking forward for more innovative resources! thumbs up!
Sarfraz
Great….
Thanks Shahbaz for ur quick reply…
Good work…
Does it allow entering values in the spinners?
Yes, it does. The reason why you are not able to enter value with the keyboard is, the length of mask text is greater than the allowed no of digits for the controls in the demo. try deleting the mask text before entering values via keyboard 🙂