Установите ширину всех панелей по ширине самой широкой панели - PullRequest
Новая
       39

Установите ширину всех панелей по ширине самой широкой панели

0 голосов
/ 26 октября 2018

У меня есть вкладки 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/

Я бы хотел сделать это без жесткого кодирования ширины, но автоматически с использованием ширины содержимого.Возможно ли что-то подобное?

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Чтобы решить эту проблему, вам нужно будет перебрать каждую панель и определить наибольшее значение ширины.Поскольку ширина свернута, вы также должны активировать каждую панель.Как-то так поможет:

Пример: 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.

Надеюсь, это поможет.

0 голосов
/ 26 октября 2018

Вы можете использовать CSS и увеличить ширину вкладок до 100%.Это расширится до ширины родительского контейнера.

.tab{
 width: 100%;
}
...