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选项或功能。

希望有帮助。

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

2 个答案: