使用JavaScript預測元素寬度

Question

我想在頁面上呈現選項卡元素。這些選項卡是內聯塊，因此如果單個行上的選項卡太多，其餘選項卡將自動將自己包裝到新行中。我不想要這個。我想要的是，如果選項卡太多，則在選項卡元素的末尾會顯示一個箭頭圖標，這使得可以在選項卡組之間循環。

問題是，包含所有選項卡的容器元素的寬度可以動態更改，選項卡數量可以更改，並且每個選項卡的寬度也不同。

是否有可能創建一個JavaScript函數，告訴我如果這些選項卡在容器元素上呈現，那麼它們中有多少可以放在單個行上？即使所有呈現的標籤的寬度都是有用的。

我可以使用此函數來計算我可以在頁面上呈現的選項卡數量，並將其餘選項卡放在不同的組中。

Answer 1

也許這是你在找什麼

carouFredSel插件

https://github.com/Codeinwp/carouFredSel-jQuery

演示 http://www.colemuseum.org/js/

Answer 2

貌似我可以插入容器的標籤，讓它們的大小和刪除在下一個渲染事件發生之前，它們來自DOM。通過這種方法，我可以計算待渲染選項卡的大小以將其放入組中。

下面是一個簡單的例子可以怎麼做： https://jsfiddle.net/fqkx9krs/

HTML

<!-- Normally the tab list is generated with JSX, but in this simple example we just grab it from here--> 
<ul class="tabs-list hidden" id="tabs"> 
    <li>Tab 1</li> 
    <li>This is Tab 2</li> 
    <li>And this Tab 3</li> 
</ul> 


<br> 
<br> 
<br> 

<div class="tabs" id="container"></div> 

CSS

.tabs { 
    width: 200px; 
    background-color: grey; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
} 

li { 
    display: inline-block; 
    background-color: blue; 
    padding: 3px; 
    color: white; 
    border: 1px solid black; 
} 

.hidden { 
visibility: hidden; 
} 

JS

function predictElementSizes() { 
    var tabs = document.getElementById("tabs"); 
    var container = document.getElementById("container"); 

    container.appendChild(tabs); 

    var lis = tabs.childNodes; 

    lis.forEach(elem => { 
    if (elem.getBoundingClientRect) { 
     console.log(elem.getBoundingClientRect().width); 
    } 
    }); 

    tabs.parentNode.removeChild(tabs); 
} 

setTimeout(predictElementSizes, 1000);