Question

我想在页面上渲染标签元素。选项卡是内联块，因此如果单个行上有太多选项卡，其余选项卡将自动将自身换行到新行。我不想要这个。我想要的是，如果选项卡太多，则会在选项卡元素的末尾呈现箭头图标，这样就可以在选项卡组之间循环。

问题是包含所有选项卡的容器元素的宽度可以动态更改，选项卡的数量可以更改，每个选项卡的宽度也不同。

是否有可能创建一个JavaScript函数，告诉我如果这些选项卡是在容器元素上呈现的，那么它们中有多少适合单行？即使是所有渲染标签的宽度都很有用。

我可以使用此函数计算我可以在页面上呈现的标签数量，并将其余标签放在不同的组中。

Answer 1

看起来我可以在容器中插入标签，获取它们的大小并在下一个渲染事件发生之前将它们从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);

Answer 2

也许这就是你要找的东西

carouFredSel插件

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

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

使用JavaScript预测元素宽度

2 个答案: