Search jQuery

jQuery Forum

Developing jQuery UI

info.corr..

suggestions on spinner

In-progress

Maybe later
Under review
In-progress
Implemented
Will not implement

in Developing jQuery UI • 9 years ago

I had not so much time to look into your spinner control. But so far:

use a span-element as a wrapper. this has two advantages over div

IE6/IE7 do support display: inline-block on "native" inline elements like span, but not on div
span is valid inside other inline elements like input-elements, div is not

don't set height - other than auto - on the wrapper-element, let the developer only style the input and the wrapper will automatically adjust his size
also add left/right arrow keys to increase/decrease the value
Mousewheel-support: I really like mousewheel-support. And i think slider should also have mousewheel support. Unfortunatley, this can create usability errors (especially, if you use a lot of spinbuttons on a site / "mousewheel trap"). I have written a plugin, wich implements the same behavior. Mozilla uses with multiple nested scrollable areas to remove mousewheel traps (http://www.protofunc.com/scripts/jquery/mwheelIntent/).

I have some questions, too:
Is it planned to support date values in version 1.9? If datepicker is also implemented, it should be easy to calculate numbers from the date-string.
If the user has entered a number, wich is not inside a valid step, will you adjust the value to a valid one or simply go up/down by a full step, if a stepUp/stepDown is invoked?

Replies(6)

rdworth

Re: suggestions on spinner

9 years ago

> 3. also add left/right arrow keys to increase/decrease the value

This would interfere with the user navigating the cursor around the value

info.corr..

Re: Re: suggestions on spinner

9 years ago

Honestly, I think you are right. Only wanted to mention this, because the official Aria Authoring Practices requires this.

fbale

Re: suggestions on spinner

9 years ago

Hi,
I'm working with the spinner and redmond theme. Beacuse of the ui-button class, the ui-spinner-button class is overwritten.

To make it works I've writed this lines in a further css:
.ui-spinner-button {
    display:block;
    font-size: 0.5em;
    overflow:hidden;
    padding:0;
    position:absolute;
    text-align:center;
}

However it's really a good work, I like it

------------
Fabio

http://www.automatikaweb.it

joern.zae..

Re: suggestions on spinner

9 years ago

The div is gone, its now using a span - along with removing the inlineblock CSS stuff for IE.

The wrapper has no fixed height anymore, it now adapts to the input.

The left/right arrow behaviour is in the ARIA spec (or something), but Scott is talking with them (or someone, whatever) to fix that, as it makes manual keyboard entry needlessly hard.

The mousewheel intent stuff is nice, that would probably be a great addition to the mousewheel plugin. I'll ping Brandon about that.

I've started working on a time spinner demo: http://view.jqueryui.com/spinner/demos/spinner/time.html

So far only a proof of concept, but the model could work for dates, too.

Handling of invalid values is currently rather bad - enter something that can't be parsed, and it'll get dropped on blur. If you enter an invalid value, then spin, it'll reset to the default value (eg. 0), then spin. Need to do more research here, ideas and suggestions are welcome, of course.

joern.zae..

Re: suggestions on spinner

9 years ago

I've updated the timerspinner demo, it now uses the Globalization plugin and actually works quite nicely. You can use cursor up/down to spin minutes, page up/down to spin hours.

info.corr..