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例子。