Hey Todd, I noticed you mentioned primary and secondary buttons and the link you gave shows these from a css perspective. I'm unable to see how this is actually used when constructing a dialog however. There doesn't seem to be any reference to this in the source and no way to pass anything but the handler function to a button config object. Am I missing something or is this yet to come ? I'd love to see this as I think the concept is a really useful one.
cheers, rob On Jan 29, 2:36 pm, Todd Parker <[email protected]> wrote: > Hi Bennie - > > The UI library won't automatically theme a htmlbuttonplaced 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 robustbuttontypes (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 abuttonthat adopts the theme is as easy as assigning a > class of ui-state-default to a link orbutton. In this example, we're > also adding the ui-corner-all framework class so thebuttonwill > inherit the theme's corner radius too: > > <buttonclass="ui-state-default ui-corner-all">Button > text goes here</button> > > This will give you a themedbutton. 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 abuttonprimaryandsecondaryto > handle situations where you want to emphasize theprimarybutton(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,secondarysets 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: > > <buttonclass="ui-state-default ui-priority-primaryui-corner- > all">Primary</button> > <buttonclass="ui-state-default ui-priority-secondaryui-corner- > all">Secondary</button> > <buttonclass="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 defaultbuttonstyle, > 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 abuttoninside a div that had the widget > > > stuff on it would be enough. Is there css I can put on thebuttonto > > > 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 -~----------~----~----~----~------~----~------~--~---
