You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
41 lines
2.1 KiB
41 lines
2.1 KiB
/* |
|
Styles to make ordinary <INPUT type="text"/> look like a spinbutton/spinbox control. |
|
Use with JQuerySpinBtn.js to provide the spin functionality by reacting to mouse etc. |
|
(Requires a reference to the JQuery library found at http://jquery.com/src/latest/) |
|
(Hats-off to John Resig for creating the excellent JQuery library. It is fab.) |
|
|
|
This control is achieved with no extra html markup whatsoever and uses unobtrusive javascript. |
|
|
|
Written by George Adamson, Software Unity (george.jquery@softwareunity.com) September 2006. |
|
Big improvements added by Mark Gibson, (mgibson@designlinks.net) September 2006. |
|
|
|
Do contact me with comments and suggestions but please don't ask for support. |
|
As much as I'd love to help with specific problems I have plenty to get on with already! |
|
|
|
Go ahead and use it in your own projects. This code is provided 'as is'. |
|
Sure I've tested in heaps of ways. Its good for me, but you use it at your own risk. |
|
SoftwareUnity and I are certainly not responsible if your computer sets fire to the sofa, |
|
hacks into the pentagon, hijacks a plane or gives you any kind of hassle whatsoever. |
|
|
|
If you'd like your spin-button image in a different place then you'll need to alter both |
|
the CSS below and the javascript isMouseOverUpDn() function to accommodate the new position. |
|
You could even have left and right buttons either side of the textbox. |
|
*/ |
|
|
|
INPUT.spin-button { |
|
/* explicitly put padding for top/bottom/left in here so that Opera displays it better */ |
|
padding: 2px 20px 2px 2px; |
|
background-repeat:no-repeat; /* Warning: Img may disappear in Firefox if you use 'background-attachment:fixed' ! */ |
|
background-position:100% 0%; |
|
background-image:url('spinbtn_updn.png'); |
|
background-color:white; /* Needed for Opera */ |
|
} |
|
|
|
INPUT.spin-button.up { /* Change button img when mouse is over the UP-arrow */ |
|
cursor:pointer; |
|
background-position:100% -18px; /* 18px matches height of 2 visible buttons */ |
|
} |
|
INPUT.spin-button.down { /* Change button img when mouse is over the DOWN-arrow */ |
|
cursor:pointer; |
|
background-position:100% -36px; /* 36px matches height of 2x2 visible buttons */ |
|
}
|
|
|