jquery特集ui scroller

Question

私はjqueryの機能の例を変更しようとしています。それは右に4つの親指を表示し、私は8のようなものを持っていた場合私はスクロールをハイライトされた機能で移動することができますか？

ここには皆が検討するための例があります。選択した項目が表示されているときに、親指を含むdivをどのように動かすことができますか？ここで

サンプル： http://www.barberveri.com/featured/index.html

Answer 1

このページではjQuery UI Tabs pluginとjScrollPaneプラグインを使用しています。

この動作は、jScrollPaneプラグインのscrollToElement()メソッドとjQuery UIタブのshowコールバックメソッドを使用することで実現できます。

基本的に、次のタブコンテンツが自動的に表示されるときは、jScrollPaneプラグインのインスタンスをjqueryデータ（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); 
}); 

---

編集：パネルをホバリング時に回転を停止する方法。 （第2の）

タブウィンドウのタブを自動回転を設定msパラメータにNULL値を渡すとき

はjquery tabs documentationによれば、回転を停止させることができます。 2番目の 引数は、サイクルがアクティブになる の次のタブまでのミリ秒単位の時間です。回転を停止するには、0またはnullを使用します。 3番目のタブは、ユーザがタブを にした後に回転を継続するかどうかを制御します。デフォルト：false。

は、パネルをホバリング時に回転メソッドを呼び出すために.hover()メソッドを使用します。

$('.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に例を取り組んでいます。