Question

I use jQuery UI for the various widgets like dialogs, buttons, etc. I want to continue using the theme for my other webpage elements like error/alert notices and highlight styles. So I went to the themeroller page to view what they use for the css around, for example, an alert notice:

<div class="ui-widget">
    <div style="padding: 0 .7em;" class="ui-state-error ui-corner-all"> 
        <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-alert"></span> 
        <strong>Alert:</strong> Sample ui-state-error style.</p>
    </div>
</div>

There’s a wrapper div, span with background icon, etc. Do I just copy these or does the jQuery UI javascript create some for me? What’s the proper way to apply themes to non-widget html?

Answer 1

Simply apply that to your own HTML. No Javascript needed (except for hover state).

When you’re using jQueryUI’s widget, the Javascript creates all of that HTML with those classes.

If you need the hover state, you’ll have to toggle the ui-state-hover class. For that you’ll need Javascript:

$('.ui-state-error').hover(function(){
    $(this).toggleClass('ui-state-hover');
});