Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to apply jQuery UI theme to my regular html?

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?

like image 642
at. Avatar asked Sep 21 '11 23:09

at.


People also ask

What are jQuery UI themes?

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Is jQuery UI a plugin?

In order to fill this gap, jQuery UI has implemented a more advanced plugin system. The new system manages state, allows multiple functions to be exposed via a single plugin, and provides various extension points. This system is called the Widget Factory and is exposed as jQuery.

Can we use the jQuery UI library without including jQuery?

If you want to use jQuery. UI you have to include jQuery. js.


1 Answers

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');
});
like image 136
Joseph Silber Avatar answered Oct 01 '22 02:10

Joseph Silber