2

Is it possible to apply an effect to a jquery-ui tab, I haven't seen any examples of it, and I'm fairly sure that if it is possible the following is incorrect:

<script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
        $("#tabs").effect(slide,options,500,callback);
    });
</script>
VikingGoat
  • 387
  • 3
  • 8
  • 30

2 Answers2

10

You can do something like this, if you want the effect to happen when you change tags using the fx option:

$(function() {
  $("#tabs").tabs( { fx: { height: 'toggle' } } );
});

A fade + slide would be like this:

$(function() {
  $("#tabs").tabs( { fx: { height: 'toggle', opacity: 'toggle' } } );
});

This applies the effects to the tabs themselves, you can take it for a spin here.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • That is sort of what I was going for, but more along the lines of what localscroll allows you to do. I'm attempting to replace a rather bulky jquery coda-slider-like device with this. Where did you find the information on the FX? Nothing I've found so far has been all that helpful. – VikingGoat Apr 16 '10 at 17:21
  • @VikingGoat - The jQuery UI site itself is pretty good: http://jqueryui.com/demos/tabs/#option-fx There's also the actual documentation site here: http://docs.jquery.com/UI/Tabs#options – Nick Craver Apr 16 '10 at 17:22
  • After some experimentation I've managed to get the effects to work with the tabs but only one of the tabs is mysteriously working. It can be seen (played with) here http://jsfiddle.net/p5VGj/32/ – VikingGoat Apr 16 '10 at 20:48
  • @VikingGoat - IDs have to be unique :) Here's a updated example using `class=""` http://jsfiddle.net/p5VGj/33/ – Nick Craver Apr 16 '10 at 20:51
  • *blink* But I did that, and it wasn't working, Oh Come on >_< Well at least it works now XD – VikingGoat Apr 16 '10 at 20:56
-1
  $(function () {
        $("#tabs").tabs({
            beforeLoad: function (event, ui) {
                if (ui.tab.data("loaded")) {
                    event.preventDefault();
                    return;
                }
                ui.ajaxSettings.cache = false,
                ui.panel.html('<img src="images/loader.gif" width="24" height="24" style="vertical-align:middle;"> Loading...'),
                ui.jqXHR.success(function() {
                    ui.tab.data( "loaded", true );
                }),
                ui.jqXHR.error(function () {
                    ui.panel.html(
                    "Couldn't load Data. Plz Reload Page or Try Again Later.");
                });
            }
        });
    });
Touhid
  • 303
  • 3
  • 8