Hi Bennie -
The UI library won't automatically theme a html button placed inside
it because we try to respect the your custom markup and styles when
placed inside a container like a dialog or accordion. We'd consider re-
styling your buttons a bit too intrusive. We do plan on creating a set
of robust button types (basic, split, menu, etc.) that you can drop
in, but for now, it's very easy for you to created themed buttons by
using the new UI CSS framework. Here is the docs for it:
http://ui-dev.jquery.com/docs/Theming/API
Creating a button that adopts the theme is as easy as assigning a
class of ui-state-default to a link or button. In this example, we're
also adding the ui-corner-all framework class so the button will
inherit the theme's corner radius too:
<button class="ui-state-default ui-corner-all">Button
text goes here</button>
This will give you a themed button. You will need to script a class
swap to "ui-state-hover" on mouseover and "ui-state-active" on click
to handle all the states. Because we use standardized css classes
across all plugins, you can write a very broad rule to swap any
instance of ui-state-default to -hover on mouseover to handle this
scripting in a clean way.
We've also created a way to make a button primary and secondary to
handle situations where you want to emphasize the primary button (like
a Save/Cancel dialog). There is also a disabled class you can add. All
of these work with the ThemeRoller and framework classes. Primary
makes the text bold, secondary sets the opacity to be a bit less than
100% and disabled sets opacity to a very low % opacity. We restricted
ourselves to these opacity and font weight shifts so we let the
theme's background color, border, font & icon colors "flow through". A
few examples of this syntax:
<button class="ui-state-default ui-priority-primary ui-corner-
all">Primary</button>
<button class="ui-state-default ui-priority-secondary ui-corner-
all">Secondary</button>
<button class="ui-state-default ui-state-disabled ui-corner-
all">Disabled</button>
The static markup example of the dialog shows these framework classes
in action:
http://jquery-ui.googlecode.com/svn/trunk/tests/static/dialog/dialog.html
I think your suggestion for an additional state is good and makes
sense in some situations. We were trying to keep the number of class
levers simple and were concerned that this would add too much
overhead. Remember, each state has a background image, colorized icon
sprite and style block so it adds weight and also complexity to the TR
UI. You could very easily use ThemeRoller to create an additional
theme that has your desired 4th state as the default button style,
download it and grab the images and styles generated. You could re-
name these styles ui-state-depressed and simply add it to your
original theme css file and script it to swap the class on mousedown.
Or, you could use the active state but just tweak the margins to make
it move a bit on mouse down.
>From my experience, 3 state buttons are more of the norm. On a Mac,
buttons don't usually have a hover change but do get a depressed
state. Same goes for a touchscreen app like a kiosk. PCs and many web
apps use a hover state and an active state but every project is
different. We're trying to supply a solid framework that is clearly
organized and flexible enough for people to customize as needed
because there is no perfect solution. With a bit of finesse, you can
do lots of powerful things. For example, you could use some CSS
scoping to have multiple TR themes in play on one page.
Thanks,
Todd
On Jan 28, 3:57 pm, Bennie <[email protected]> wrote:
> To be clearer on the second point, what I mean is you see a state
> change when you hover but not when you click.
>
> On Jan 28, 7:43 am, Bennie <[email protected]> wrote:
>
> > 1)
>
> > I'm a bit mystified by the lack of themed buttons in jQuery UI. I've
> > rolled my own theme in Steamroller. I've styled my divs with the css
> > available.
>
> > I assumed that just having a button inside a div that had the widget
> > stuff on it would be enough. Is there css I can put on the button to
> > have it automatically get appropriate hover and other states on the
> > button? Or do I have to attach some javascript?
>
> > 2)
>
> > As a side issue, the jQuery UI seems to be lacking a state I expect in
> > any UI library. There's an inactive, hover, and active, but there's no
> > "depressed" state for when you've clicked but not yet released. This
> > makes all jQuery UI stuff seem a little broken, or at least not as
> > responsive as it should be. Is this a jQuery UI limitation? Or just a
> > ThemeRoller one?
>
> > Try to find a modern OS or app that doesn't have a depressed state.
> > It's tough.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
