Okay so I took a quick look at this and based on what I think you're
asking, I have an answer.
In the UI framework, icon classes are set up to be placed on child
elements of state and container classes. Your demo doesn't work
because ui-state-hover class has its own positioning rules for
background images that are conflicting with the icon's rules.
Also, by using a state class and the icon class on the same element,
you won't see most of the state classes because the element will only
support one background image at a time using the syntax we use.
So... to fix your demo, you'd just want the icon to be set on its own
element.
Change this:
$(".app-button").addClass("app-icon ui-icon ui-icon-trash");
to this:
$('<span />').appendTo(".app-button").addClass("app-icon ui-icon ui-
icon-trash");
This same logic goes for other types of framework classes. Generally,
container classes are stateless, so classes like ui-widget-content and
ui-widget-header will not have hover or active states applied. The CSS
framework is designed for clickable elements to be child nodes of
these containers, not the containers themselves.
Does this answer your question?
Let me know!
thanks
Scott
--~--~---------~--~----~------------~-------~--~----~
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
-~----------~----~----~----~------~----~------~--~---
