New interaction state - ui-state-pressed (for button like mousedown effect)
I was trying to implement mousedown (3D effect on pressing button
down, without wait for mouse up) and I found that currently there is
no class that can be applied accross the widgets for that purpose.
Currently we have:
.ui-state-default
.ui-state-hover
.ui-state-focus
.ui-state-active
Assuming that button like elements can have only 2 states - default or
active and that hover and focus are extras (i.e. button has to be
default or active, hover or focus are arbitrary). We get these:
default - not pressed or cleared back
active - pressed before and not cleared back - (thus current/active)
focus & hover - can occur on both default or active.
then the missing one is "pressed" - which can occur on default or
active and lasts ONLY when button is down.
Now ThemeRoller would need to add "Clickable: pressed state".
The way to ignore this effect would be to define it same as hover
state since it hovers anyway. Or overwrite it in a concrete widget.
I found some ".ui-spinner-pressed" discussion. Did not study it but
possibly this could help there too.
(Instead of new class ".ui-spinner-pressed" it would be ".ui-
spinner .ui-state-pressed")
I made a quick dirty test:
added $.fn.mousePress() in ui.core:
mousePress: function(){
return this.each(function(){
$(this).mousedown(function(){$(this).addClass('ui-state-pressed')})
.mouseup(function(){$(this).removeClass('ui-state-
pressed')});
});
and e.g. in tabs:
// highlight selected tab
this.lis.mousePress();
and it works like a charm;)
Will you come up with some concept wise solution?
Jan