jQuery UI選項卡式小部件添加滾動條何時到很多選項卡

Question

您好我正在使用jQuery UI的選項卡式小部件，我試圖爲選項卡創建一個水平滾動條。我已創建代碼來添加新的選項卡上點擊時，選項卡總寬度大於容器。問題是標籤移動到第二行女巫不是我想要的。我希望它們全都保持在同一行，稍後我將添加2個按鈕從左到右滾動。下面是我創建的代碼：

​​

正如你可以從我貼的標籤上，即使我添加的容器溢出的第二行動見：滾動。

Answer 1

爲了讓您一開始，這個結帳fiddle。

這裏的附加JS：

(function() { 
    var $tabsCont = $('#tabs_container'), 
     $tabs = $tabsCont.children(), 
     widthOffset = 10; // The width calculated below is a bit too large... 

    $tabsCont.wrap('<div class="tab_cont_wrapper"></div>'); 
    $tabsCont.width($tabs.length * $tabs.first().width() - widthOffset); 
    $tabsCont.height($tabs.first().height()); 
})();​ 

我要把它留給你找到更好的標籤寬度計算。

的CSS：

#tabs_container {overflow:hidden !important;} 
.tab_cont_wrapper {overflow:auto;} 

Answer 2

溢出無法應用，因爲未設置高度。如果限制高度，則會將其他標籤分類爲溢出。

只需簡單地添加一些樣式，像這樣......

<style type='text/css'> 
    #tabs_container{ 
     max-height:70px; 
     overflow:scroll; 
    } 
</style> 

希望這有助於:)