How to apply jQuery user interface theme for my regular html?

Question

I use jQuery UI for various widgets such as dialogs, buttons, etc. I want to continue using the theme for other elements of the web page, such as error / warning notifications and highlight styles. So I went to the themeroller page to see what they use for css, for example a warning notification:

<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 is a shell div, span with a background icon, etc. Am I just copying them or is javascript jQuery creating some for me? What is the correct way to apply themes to a non-widget html?

Answer 1

Just apply this to your own HTML. No need for Javascript (other than a hang state).

When you use the jQueryUI widget, Javascript creates all this HTML code with these classes.

If you need a hover state, you will need to switch the ui-state-hover class. For this you need Javascript:

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

Answer 2

By default, you can only use predefined themeroller elements on your site: buttons, icons, headers, etc. and all jquery widgets like datepicker, dialogs, highlight / error are almost all the elements you see at http://jqueryui.com/themeroller/#themeGallery .

in order to archive this, you need to copy the html and corresponding classes for the html tags, and the browser will apply the styles from your included themeroller.css to it.

however, it also means that you are a little restricted by your location. You can still include other non-themeroller elements as long as you apply the right css classes (.ui-state-default, .ui-state-hover, .ui-state-disabled, icons, etc.) to your html was able to use the witcher theme - see http://jqueryui.com/docs/Theming/API for a complete list of applicable classes.