Looking into the states a bit more closely, it seems as if there might be enough states, but the interactivity could be better if the active state was shown on mouse down. That's how the HTML buttons work.
It just seems absolutely wrong to have hover and depressed look the same. Dead interface feeling. --- On Jan 28, 7:36 pm, Todd Parker <[email protected]> wrote: > 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.... > > 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 -~----------~----~----~----~------~----~------~--~---
