如何使 jQuery 选项卡滑动？答案

【问题标题】：How to make jQuery tabs to slide?如何使 jQuery 选项卡滑动？
【发布时间】：2011-03-23 12:52:16
【问题描述】：

我使用 jquery 选项卡（tabs）。我想让标签水平滑动（向左/向右滑动）..

我google了一下，发现我可以将'fx'参数传递给标签，但我没有找到要传递什么参数才能使标签滑动。

谢谢

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

This plugin is great，它叫 CodaSlider。像魅力一样工作，非常易于使用。将节省您的工作时间。

【讨论】：

这个插件只浪费了我一个小时的工作。对于那些习惯了 jQuery UI 非侵入式标记并愿意尝试这个插件的人，你应该知道它需要你插入很多容器和包装器，比如 panel-container 和它的 UI，默认打开，可能会破坏你的某些情况下的布局（我还没有弄清楚原因，因为我放弃了）。
链接失效

【解决方案2】：

这对我有用：

$("#tabs").tabs( { show: { effect: "slide", direction: "left", duration: 500 }});

【讨论】：

【解决方案3】：

您可以在此处找到“幻灯片”效果的选项： http://docs.jquery.com/UI/Effects/Slide

例如，

$( ".selector" ).tabs({ fx: { direction: 'left' } });

您还可以在以下链接中找到其他动画选项： http://docs.jquery.com/UI/Effects/

【讨论】：

我测试了这段代码，但它不起作用。唯一的“幻灯片”选项似乎是$('.tabs').tabs({ fx: { width: 'toggle' } });，但这会双向滑动。当然必须可以滑动一种方式，但我找不到任何文档。
看看这个：stackoverflow.com/questions/1350666/….

【解决方案4】：

@DanAbramov Coda Slider 使用起来非常简单。所有这些包装器和容器都是动态生成的，根本不需要程序员进行设置……

此外，虽然它不会破坏任何布局，但它不是为移动设备设计的。请查看 Liquid Slider，它是 Coda Slider 的扩展。

这两个都是我建造的。

【讨论】：

链接失效

【解决方案5】：

响应点击的 JQuery 选项卡滑动 - 向前和向后

 $( "#jtabs" ).tabs({beforeActivate: function (event, ui) {
       var newTab = ui.newTab.index();
       var active = $("#jtabs").tabs("option", "active");

   ( newTab < active ) ?  $( "#jtabs" ).tabs( { show: { effect: "slide", direction: "right", duration: 200 }} ) :$( "#jtabs" ).tabs( { show: { effect: "slide", direction: "left", duration: 100 }} );
      }});

// NEXT Button
$(".nexttab").click(function() {
   var active = $( "#jtabs" ).tabs( "option", "active" );
$( "#jtabs" ).tabs( "option", "active", active + 1 );
});

【讨论】：