4

我正在处理的一个项目使用选项卡式导航。因为选项卡的数量是动态计算的，并且可以达到很高的数量，有时这些选项卡（本质上是<li>具有float: left;样式声明的元素）溢出到下一行，[###]用于显示选项卡，最终结果看起来像这样：

[###] [###] [###] [###] [###] [###]
[###] [###]
[Rest of the content..............]

因为顶行的最后 4 个元素没有它们“连接”的元素，所以这看起来很可怕。

是否有可能在 Javascript 的帮助下（可以接受 jQuery 或 MooTools 等框架，如果它们提供更短/更简单的解决方案）首先填写底部行，然后将其余元素放在顶部？

像这样：

[###] [###]
[###] [###] [###] [###] [###] [###]
[Rest of the content..............]

（标记为 MooTools 的问题，因为它是我们当前使用的 JS 框架。在任何其他框架中给出的答案都可以，因为它可能会很快翻译成 MT）

4

4 回答 4

1

下面是我用来解决这个问题的代码。基本上，使用 JS，我们计算容器的宽度，并与选项卡的宽度（所有选项卡具有相同的宽度）一起计算每行的选项卡数，以及余数。使用简单的模比较，我们可以插入一个clear: both样式（强制标签移动到一个空行）。

var allTabs = $$('#tab-container li');
var tabNum = allTabs.length;
var tabWidth = allTabs[0].offsetWidth;
var oWidth = $('tab-container').offsetWidth;
var tabRowNum = Math.floor(oWidth/tabWidth);
var tabRowOffset = (tabNum % tabRowNum);

for(var i = 0; i < tabNum; i++) {
    if((i % tabRowNum) == tabRowOffset) {
        allTabs[i].setStyle('clear', 'both');
    }
    else {
        allTabs[i].setStyle('clear', 'none');
    }
}
于 2010-02-26T13:56:04.567 回答
0

恐怕没有简单的解决方案可以完全按照您的意愿行事。花车就是花车。您最好的选择是使用 javascript 即时计算选项卡的尺寸和数量，然后使用position:absolute. 不漂亮。

但是将大量标签放入小空间的问题是可以解决的。最简单的方法是给第二行中的选项卡一个额外的 css 类，并使用它将它们定位在第一行的顶部。这可以在服务器端或客户端使用 javascript 完成。或者，如果您知道标签的确切数量和容器的确切宽度，那么您可以max-width为它们设置并让它们缩小一点。或者您可以使用overflow: scroll选项卡容器，但这肯定会看起来很丑:)

于 2010-02-25T11:29:41.020 回答
0

用JS很容易。小于伪代码：

  • 创建一个div（可选）
  • 创建一个ul
  • 用 s 填充它，li直到达到给定的最大数量或者它们的组合宽度“刚好低于”所需的宽度
  • 添加div到您的 html 文档，保存对 id 的引用
  • 重复，但如果你有一个已保存的对已保存 div 的引用，请在此之前添加新的引用。
于 2010-02-25T11:35:47.683 回答
0

我建议将所有选项卡放在一行上（使其尽可能宽）并滚动到当前选项卡。（您还需要一个列出所有可用选项卡的下拉菜单，用于导航。）

您正在尝试的问题是，如果您确实获得了所需的内容，选择顶行中的选项卡时会发生什么？

  • 您有一个未连接到当前面板的选定选项卡（由选项卡的底行分隔），这很难看或
  • 您将第一行选项卡移到底部（与面板相邻），在这种情况下，您会遇到想要避免的情况或
  • 您重新组织选项卡以将选定的选项卡放在底部，这会使导航混乱（用户不可能知道选项卡在哪里）。
于 2010-02-25T18:49:37.930 回答