将效果应用于 jquery-ui 选项卡答案

【问题标题】：Applying effects to jquery-ui tabs将效果应用于 jquery-ui 选项卡
【发布时间】：2010-04-16 17:10:59
【问题描述】：

是否可以将效果应用到 jquery-ui 选项卡，我还没有看到任何示例，我相当确定如果可能的话，以下是不正确的：

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

【问题讨论】：

从来没有想过……看到答案会很有趣。

标签： jquery jquery-ui jquery-ui-tabs jquery-effects

【解决方案1】：

如果您希望更改标签时出现效果using the fx option，您可以这样做：

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

淡入淡出+幻灯片是这样的：

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

这会将效果应用于标签本身，you can take it for a spin here。

【讨论】：

这就是我想要的，但更符合 localscroll 允许你做的事情。我正在尝试用这个替换一个相当笨重的类似 jquery coda-slider 的设备。您在哪里找到有关 FX 的信息？到目前为止，我没有发现任何有用的东西。
@VikingGoat - jQuery UI 站点本身非常好：jqueryui.com/demos/tabs/#option-fx 这里还有实际的文档站点：docs.jquery.com/UI/Tabs#options
经过一些实验，我设法让效果与选项卡一起工作，但只有一个选项卡神秘地工作。这里可以看到（玩）jsfiddle.net/p5VGj/32
@VikingGoat - ID 必须是唯一的 :) 这是使用 class="" jsfiddle.net/p5VGj/33 的更新示例
blink 但是我这样做了，但它不起作用，哦，来吧>_

【解决方案2】：

  $(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.");
                });
            }
        });
    });

【讨论】：