At http://docs.jquery.com/UI/Tabs#Example there is a short HTML example of how to use JQuery UI Tabs.
What am I not copying locally that the online CSS file has? Has anyone gotten this JQuery UI Tabs to work and have a zip file that works locally?
Under the section of the docs for $(selector). tabs('enable', n) there is this statement: To enable more than one tab at once reset the disabled property like: $('#example'). tabs("option","disabled",[]); .
jQuery UI tabs() method is used to change the appearance of HTML elements inside the page. This method traverses the HTML code and adds new CSS classes to the element to give them appropriate style.
With the latest versions of jQuery is not not trivial to select a tab by ID as it was before. $("#tabs"). tabs("option", "active", index); where index is the ordinal number counting tabs from left to right.
If your problem is that everything seems to run but the DIVs do not disappear as they should then you have probably run into the same problem I did.
You need to define the class .ui-tabs-hide so that it hides the element. Basically jQuery uses this to hide the elements, rather than doing it manually with display: none. The reason for this is so that it doesn't mess with your display's default setting, which could be block, inline or anything. By adding and removing the class it gives you a more control.
.ui-tabs-hide
{
display: none
}
For the UI tabs to work you NEED some CSS. The documentation states the minimum required.
The problem you have with the example theme is because the css file used references other CSS files. You need to copy them all locally. You also need an image under the themes/flora/i folder.
I had the same problem which is why I am here and it took a while to find the problem. Thanks to kgiannakakis answer with the CSS I found on the JqueryUI page this CSS in the source code:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css" type="text/css" media="all" />
Add it BEFORE your main CSS like this for example:
And then you should be fine - it works for me.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With