jQuery UI tabs loading first as <ul> then as tabs

Answer 1

This is normal, but it shouldn't take a few seconds. How much are you doing in your jQuery ready (AKA $()) function before you call $("#whatever").tabs()? Try moving that method call to the top of your ready function.

Answer 2

This happens because you call $('#id').tabs() in document.ready(), which happens when the DOM is ready to be traversed^[1]. This generally means the page has been rendered, and so the <ul> is visible on the page as a regular <ul> without any tab-specific styling applied.

It's not super "clean", but a way I use to get around this is to add the ui-tabs class to the <ul> in the HTML, which causes it to get the CSS style applied immediately. The downside is that you don't have the 100% clean separation of behaviour and code, but the upside is it looks nice.

Answer 3

I'm using the jQuery UI tabs with great success. Here's some code I use:

<div id="tabs">
 <ul>
  <li><a href="">
   <span>Applicant</span></a></li>
  <li><a href="">
   <span>Insured</span></a></li>
  <li><a href="">
   <span>Beneficiary</span></a></li>
  <li><a href="">
   <span>Billing</span></a></li>
  <li><a href="">
   <span>Summary</span></a></li>
 </ul>
</div>
<script type="text/javascript">

 $(function() {
  $tabs = $("#tabs").tabs({
   disabled: [1, 2, 3, 4],
   event: null,
   load: function(event, ui) {
    handleload(ui);
   },
   selected: 0
  });
 });

</script>

As for the order I always place the jquery-ui.css first, followed by jquery.min.js and jquery-ui.min.js. I'm using the latest versions (jQuery 1.3.2 and jQuery 1.7.2) all served from the Google CDN.

Answer 4

The problem is that the css from jquery-ui is for the classes that the jquery-ui script add to the DOM when the page has loaded. Rather then adding ui-tabs to the HTML (as suggested by gregmac) you could simply add the same display rules to your CSS to apply to your navbar id. When jqueryui adds the classes to the ul and list items, the jqueryui CSS takes over.

So add this rule to your css:

#navbarID li {
    display: inline;
}

Answer 5

Like others have said, it's because jQuery doesn't render the UL as tabs until the document has loaded. I've gotten around this problem by simply hiding the tabs until they're loaded. That way you get rid of the flicker. For instance:

<ul id="tabs" style="display: none;">
...
$(document).ready(function(){
  $('#tabs').tabs();
  $('#tabs').attr('display', 'block');
});