将所有面板的宽度设置为最宽面板的宽度

Question

我有 jquery 个选项卡，我想让所有面板的宽度都与最宽的面板宽度相同。 heightStyle:"auto" 之类的东西适用于身高。 widthStyle:"auto" 是我要找的东西，但它不存在。

外观与我希望的外观比较：

<div id="tabs" class="tab" >
  <ul>
    <li><a href="#f1"><span>One</span></a></li>
    <li><a href="#f2"><span>Two</span></a></li>
    <li><a href="#f3"><span>Three</span></a></li>
  </ul>
  <div id="f1">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div id="f2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
  <div id="f3">c<br>c<br>c<br>c<br>c<br>c<br></div>
</div>
<div style="clear:both">
</div>
<div id="tabs2" class="tab" >
  <ul>
    <li><a href="#f1"><span>One</span></a></li>
    <li><a href="#f2"><span>Two</span></a></li>
    <li><a href="#f3"><span>Three</span></a></li>
  </ul>
  <div id="f1">aaaaaaaaaaaaaaaaaaaaaaaaaa</div>
  <div id="f2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
  <div id="f3">c<br>c<br>c<br>c<br>c<br>c<br></div>
</div>
<script>
$("#tabs").tabs({
            heightStyle: "auto",
        }).css("float", "left");

$("#tabs2").tabs({
            heightStyle: "auto",
        }).css("float", "left").width(485);
</script>

http://jsfiddle.net/knj73r9o/2/

我想在不硬编码宽度但自动使用内容宽度的情况下执行此操作。这样的事情可能吗？

Answer 1

您可以使用 CSS 并将选项卡扩展到 100% 的宽度。这将扩展到父容器的宽度。

.tab{
 width: 100%;
}

Answer 2

为了解决这个问题，您需要迭代每个面板并确定最大宽度值。由于宽度已折叠，您还必须激活每个面板。这样的事情会有所帮助：

示例：https://jsfiddle.net/Twisty/knj73r9o/24/

JavaScript

$(function() {
  function findMaxWidth($tab) {
    var mw = 0;
    var oInd = $tab.tabs("option", "active");
    $tab.find(".ui-tabs-panel").each(function(ind, el) {
      $tab.tabs("option", "activate", ind);
      console.log("Activate Tab " + ind);
      if ($(el).width() > mw) {
        mw = $(this).width();
        console.log("Tab " + ind + " Width: " + mw + "px");
      }
    });
    $tab.tabs("option", "active", oInd);
    return mw;
  }

  $("#tabs").tabs({
    heightStyle: "auto",
  }).css("float", "left");

  var widthStyle = findMaxWidth($("#tabs"));
  $("#tabs div").each(function() {
    $(this).css("width", widthStyle + "px");
  });

  $("#tabs2").tabs({
    heightStyle: "auto",
  }).css("float", "left").width(485);
});

一旦你有了宽度，你可以使用.css()来设置每个的宽度。

如果您经常需要这样做，或者对很多项目执行此操作，请考虑使用 $.widget() 来设置您自己的 widthStyle 选项或功能。

希望对您有所帮助。

将所有面板的宽度设置为最宽面板的宽度

Set all panels width to the width of the widest panel

html

css

jquery-ui

jquery-ui-tabs