Question

Really simple question: Am I missing something? Seems like this should be all that is necessary for the basic setup… currently I’m getting an un-stylized version (i.e. no tabs, just plain text/html). So they don’t look like tabs and when you click them nothing hides/shows as would be expected with tabs. Do I have to manually hook up javascript to show and hide the contents of the tabs or does the framework do this for me?

Update:

So I tested the code out and
this works fine for basic tabs.
However, I need to use this inside a
.Net modal popup using their “Ajax”
toolkit. Essentially this is doing a
postback which I’ve noticed tends to
fight with jQuery. In the past, I’ve
used the jQuery live events, but
I’m not sure what to bind it to…
Usually you bind to an event on an
object, like a click handler for a
button. Here, I need to attach the
tab assignment/binding ( using .tabs()
) via a live event but I’m not sure
which one. I tried binding to the
document load event but no luck with
that:

$(document).live('load', bind_tabs);

Any ideas?

Style sheet and Javascript links included on page:

https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css
https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js

Added the following line to my stylesheet:

.ui-tabs .ui-tabs-hide { display: none; }

Added the following script to the page:

<script type="text/javascript">
  $(function () {
  $("#tabs2").tabs();
  $("#tabs").tabs();
  });
</script>

HTML:

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

Also noticed on the “theming” documentation on the page (http://jqueryui.com/demos/tabs/#theming) that it states the following. Should I manually put in all those styles (like ui-widget) or rely on the framework to do it?

Sample markup with jQuery UI CSS
Framework classes

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

Note: This is a sample of markup
generated by the tabs plugin, not
markup you should use to create a
tabs. The only markup needed for that
is

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

Answer 1

you could find an appropriate event that occurs after the postback completes – I’m not familiar enough with the MSAjax library to know what that would be but it seems reasonable that they would have one. In that event, you can execute the .tabs() code.