jquery featured ui scroller

Question

我正在修改jquery特色的ui示例。它显示4拇指向右，我想知道如果我有更多像8我怎样才能让我的滚动移动突出显示的功能？

我有一个例子在这里给大家审查。如何在显示选定项目时获取包含拇指的div？

样品在这里： http://www.barberveri.com/featured/index.html

Answer 1

本页面使用jQuery UI Tabs plugin和jScrollPane插件。

我认为这种行为可以通过使用jScrollPane插件中的方法scrollToElement()和jQuery UI选项卡中的show回调来实现。

基本上，当自动显示下一个标签的内容，获得从jquery的数据JScrollPane的插件的实例（以访问的API），并使用ui.tab（当前标签按钮）scrollToElement。

$(document).ready(function(){ 
    $("#featured > #thumbs ul") 
     .tabs({ 
      fx: { opacity: "toggle" }, 
      show: function(e, ui) { 
       // when the next tab is displayed, scroll to this new element 
       var plugin = $('.ui-tabs-nav').data('jsp'); 
       if (plugin) { 
        plugin.scrollToElement(ui.tab, false); 
       } 
      } 
     }) 
     .tabs("rotate", 5000, true); 
}); 

---

编辑：徘徊面板时，如何停止转动。

根据该jquery tabs documentation，旋转可以为ms参数（第二）传递一个空值时

设置通过一个标签窗格选项卡的自动停止转动。第二个参数 是一个以毫秒为单位的时间量，直到周期被激活的 中的下一个选项卡。使用0或null来停止旋转。 控制是否在用户选择了标签 后继续旋转。默认值：false。

徘徊面板时，可使用.hover()方法调用rotate方法：

$('.ui-tabs-panel').hover(
    // stops the rotation when mouse enters 
    function() { $tabs.tabs("rotate", null); }, 
    // restart it when mouse goes out 
    function() { $tabs.tabs("rotate", 2000, true); } 
); 

---

这里正在jsfiddle例子。