CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
wiki
wiki

Reputation: 31

How jQuery UI works?

Can any one explain how jQuery UI themes works without assigning any elements to css class in plan html page. How can a .css files in jQuery UI theme can pick up the elements? Does jQuery script file helps css file picking elements ?

Upvotes: 3

Views: 790

Answers (4)

Tarun
Tarun

Reputation: 5514

When u make an element a jQuery UI element, you do something like 

$('#myDiv').tabs();

It essentially adds classes, like

$('#myDiv').addClass('ui-tabs');
$('#myDiv').addClass('ui-widget');

then it modifies the DOM and appends the controls necessary to implement the UI element, like in case of Tabs, it searches for the List which has tab headings and make them tabs and then searches for all divs corresponding to the List-Elements and assigns them classes and so on.

The stylesheets only uses the assigned classes to style the elements.

and to Answer your question in short The CSS picks up classes because jQuery assigns classes when implementing a control

Upvotes: 0

Jace Rhea
Jace Rhea

Reputation: 5018

Look at the source. Here are a few snippets of code...

.ui-helper-hidden { display: none; }
...
.ui-widget .ui-widget { font-size: 1em; }
...
.ui-icon-carat-1-n { background-position: 0 0; }
...
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
...
.ui-menu .ui-menu {
 margin-top: -3px;
}

You will see that the jQuery css uses classes in all of its css selectors. So why does the css reference class selectors that don't exist? The jquery UI javascript framework dynamically adds the classes to the html elements and the css styles them according to the class.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

When jquery creates dynamic html elements it assigns so predefined classes to the elements.

Ex. The tab container has the following css classes assigned to it ui-tabs ui-widget ui-widget-content ui-corner-all and each tab heading has the following classes ui-state-default ui-corner-top.

Then the theme .css file uses these classes to assign different styles to these elements based on the theme.

Upvotes: 1

mikesir87
mikesir87

Reputation: 1797

You can create your own UI theme...sure. But, it's going to take a lot of work to get what they've got with the images, gradients, etc.

The way it works is that when the UI plugin is initiated, for example, tabs, you'll see that there are divs created, classes assigned, and a few other changes. The CSS files style according to the new classes that are created. If you were to make your own, you would need to look for these styles (use Firebug for help with that), and go from there.

Upvotes: 0

Related Questions