Question

我使用的是语义ui，但这可能是一个更普遍的问题。我创建了一组标签（见下文）。然后我用表动态加载选项卡。这些表比选项卡宽（见下文） - 有没有办法让选项卡调整到表格大小？这只是小型（移动）设备的问题。我想也许可以使用jQuery，但似乎无法正常工作。

修改：添加了代码段，但不确定是否可以在代码段工具中看到问题

Edit2 ：在jQuery .width（）控制台日志中添加了一个前后片段。无论我输入什么值，宽度都会达到480.

<div class="ui top attached tabular menu">
  <a class="active item" data-tab="Fixtures" data-vivaldi-spatnav-clickable="1">Fixtures</a>
  <a class="item" data-tab="Standings" data-vivaldi-spatnav-clickable="1">Standings</a>
  <a class="item" data-tab="Stats" data-vivaldi-spatnav-clickable="1">Stats</a>
</div>
<div class="ui bottom attached active tab segment" data-tab="Fixtures">
  <div id="showFixtures"></div>
</div>
<div class="ui bottom attached tab segment" data-tab="Standings">
  <div id="showStandings"></div>
</div>
<div class="ui bottom attached tab segment" data-tab="Stats">
  Stats
</div>

＆＃13;

var jData = [{
  "name": "John",
  "age": 30,
  "cars": "Ford",
  "Longer Title": "Longer text",
  "Longer Title2": "Longer text",
  "Longer Title3": "Longer text",
  "Longer Title2a": "Longer text"
}];

console.log("Before: " + $('.ui.menu').width());

$('.ui.menu').width(800);


console.log("After: " + $('.ui.menu').width());

$('.menu .item')
  .tab();
div_id = "showFixtures";
CreateTableFromJSON(jData, div_id)

function CreateTableFromJSON(jData, div_id) {
  // EXTRACT VALUE FOR HTML HEADER.
  var col = [];
  for (var i = 0; i < jData.length; i++) {
    for (var key in jData[i]) {
      if (col.indexOf(key) === -1) {
        col.push(key);
      }
    }
  }

  // CREATE DYNAMIC TABLE.
  var table = document.createElement("table");
  table.id = "dp";
  table.className = "ui collapsing striped blue table unstackable";

  var thead = table.appendChild(document.createElement("thead"));

  var tbody = table.appendChild(document.createElement("tbody"));

  var thr = thead.insertRow(-1); // TABLE ROW.

  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.className = "collapsing";
    th.innerHTML = col[i];
    thr.appendChild(th);
  }

  // ADD JSON DATA TO THE TABLE AS ROWS.
  for (var i = 0; i < jData.length; i++) {

    var tr = tbody.insertRow(-1);

    for (var j = 0; j < col.length; j++) {
      var tabCell = tr.insertCell(-1);
      tabCell.className = "collapsing";
      tabCell.innerHTML = jData[i][col[j]];
    }
  }

  // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
  var divContainer = document.getElementById(div_id);
  divContainer.innerHTML = "";
  divContainer.appendChild(table);

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
<link href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" />
<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

  <div class="ui top attached tabular menu">
    <a class="active item" data-tab="Fixtures" data-vivaldi-spatnav-clickable="1">Fixtures</a>
    <a class="item" data-tab="Standings" data-vivaldi-spatnav-clickable="1">Standings</a>
    <a class="item" data-tab="Stats" data-vivaldi-spatnav-clickable="1">Stats</a>
  </div>
  <div class="ui bottom attached active tab segment" data-tab="Fixtures">
    <div id="showFixtures"></div>
  </div>
  <div class="ui bottom attached tab segment" data-tab="Standings">
    <div id="showStandings"></div>
  </div>
  <div class="ui bottom attached tab segment" data-tab="Stats">
    Stats
  </div>

</body>

＆＃13;

Answer 1

您应该可以使用width()使用jQuery执行此操作。例如，如果要在单击“灯具”选项卡时调整选项卡的大小，则可以执行以下操作：

$('.item[data-tab="Fixtures"]').click(function() {
  $('.ui.menu').width($('#showFixtures').width());
}

语义UI - 调整tab / div以适应动态表

1 个答案: