让 jQuery UI 可选择作为网格和表格中的列表

Posted 2023-05-07

【中文标题】让 jQuery UI 可选择作为网格和表格中的列表

【英文标题】：Having jQuery UI Selectable both as grid and a list in a table

【发布时间】：2021-01-25 13:02:00

【问题描述】：

我已经为我的问题准备了jsFiddle -

我正在尝试将jQuery UI Selectable 放在带有黄色页眉和页脚行的表格中。一次是左侧单元格中的数字网格，然后是右侧单元格中的字母列表。

我还试图让表格占据浏览器宽度和高度的 100%。

这就是为什么我将 CSS 属性 width: 100% 和 height: 100vh 分配给表格并将 overflow-y: scroll 分配给这两个可选项。

由于某种原因，右侧滚动不起作用，即显示了整个字母列表，从而炸毁了桌面高度。

TLDR：

数字/字母列表应该具有相同的高度并且可以滚动 黄色页眉/页脚应该在浏览器窗口的顶部/底部可见

这是我的代码 -

Javascript：

  $(function() 
    $("#selectable1").selectable();
    $("#selectable2").selectable();
  );

CSS：

<table>
  <tr>
    <td colspan=2 bgcolor="yellow">Header1</td>
  </tr>
  <tr>
    <td>
      <ol id="selectable1">
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">2</li>
        <li class="ui-state-default">3</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">5</li>
        <li class="ui-state-default">6</li>
        <li class="ui-state-default">7</li>
        <li class="ui-state-default">8</li>
        <li class="ui-state-default">9</li>
        <li class="ui-state-default">10</li>
        <li class="ui-state-default">11</li>
        <li class="ui-state-default">12</li>
      </ol>
    </td>
    <td>
      <ol id="selectable2">
        <li class="ui-state-default">A</li>
        <li class="ui-state-default">B</li>
        <li class="ui-state-default">C</li>
        <li class="ui-state-default">D</li>
        <li class="ui-state-default">E</li>
        <li class="ui-state-default">F</li>
        <li class="ui-state-default">G</li>
        <li class="ui-state-default">H</li>
        <li class="ui-state-default">I</li>
        <li class="ui-state-default">J</li>
      </ol>
    </td>
  </tr>
  <tr>
    <td colspan=2 bgcolor="yellow">Footer1</td>
  </tr>
</table>

CSS：

table 
  width: 100%;
  height: 100vh;


#selectable1 
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow-y: scroll;


#selectable2 
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100px;
  overflow-y: scroll; /* WHY IS THIS NOT WORKING? */


#selectable1 li,
#selectable2 li 
  margin: 3px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;

我的问题的背景是我正在尝试创建一个纸牌游戏，左边是桌子，右边是大厅里的玩家列表 -

【问题讨论】：

不清楚您需要什么帮助。 Selectable 还是 CSS？

CSS，有没有办法将数字和字母单元格设置为相同（和最大）高度？

需要保留Table结构吗？如果没有，我会将每个移至 DIV，然后您可以更轻松地解决 CSS 问题。

我想离开 html TABLE，但我不明白如何在屏幕上同时显示页眉和页脚 TR，然后是字母/数字区域。我只是不确定如何使用 DIV 来做到这一点

我希望页眉/页脚 TR 占用尽可能小的空间（但仍然可见）。并且字母/数字 TR 占用尽可能多的空间并且可以滚动

【参考方案1】：

更新：

要支持 IE 11，您可以更新您的 CSS 以包含 -ms-grid 特定样式，它应该可以工作，但您可能需要再次对其进行彻底测试：

$(function() 
  $("#selectable1").selectable();
  $("#selectable2").selectable();
);

body 
  margin: 0;
  padding: 0;


.header 
  background: yellow;
  -ms-grid-row: 1; /* for IE */


.footer 
  background: yellow;
  -ms-grid-row: 3; /* for IE */


div.table 
  display: grid;
  width: 100vw;
  height: 100vh;
  
  /* for IE */
  display: -ms-grid;
  -ms-grid-columns: 1fr;
  -ms-grid-rows: 20px 1fr 20px;


div.container 
  display: grid;
  grid-template-columns: auto 140px;
  grid-column-gap: 10px;
  overflow: hidden;
  
  /* for IE */
  display: -ms-grid;
  -ms-grid-columns: 1fr 140px;
  -ms-grid-rows: 1fr;
  -ms-grid-row: 2;


div.container div 
  overflow: auto;


div.container div.column1 
    -ms-grid-column: 1; /* for IE */


div.container div.column2 
    -ms-grid-column: 2; /* for IE */


#selectable1 
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex: 1;


#selectable2 
  list-style-type: none;
  margin: 0;
  padding: 0;


#selectable1 li,
#selectable2 li 
  margin: 3px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="table">
  <div class="header">Header1</div>
  <div class="container">
    <div class="column1">
      <ol id="selectable1">
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">2</li>
        <li class="ui-state-default">3</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">5</li>
        <li class="ui-state-default">6</li>
        <li class="ui-state-default">7</li>
        <li class="ui-state-default">8</li>
        <li class="ui-state-default">9</li>
        <li class="ui-state-default">10</li>
        <li class="ui-state-default">11</li>
        <li class="ui-state-default">12</li>
      </ol>
    </div>
    <div class="column2">
      <ol id="selectable2">
        <li class="ui-state-default">A</li>
        <li class="ui-state-default">B</li>
        <li class="ui-state-default">C</li>
        <li class="ui-state-default">D</li>
        <li class="ui-state-default">E</li>
        <li class="ui-state-default">F</li>
        <li class="ui-state-default">G</li>
        <li class="ui-state-default">H</li>
        <li class="ui-state-default">I</li>
        <li class="ui-state-default">J</li>
      </ol>
    </div>
  </div>
  <div class="footer">Footer1</div>
</div>

如果您愿意用 CSS Grid 替换 table，您应该能够使用它们来实现您想要的：

$(function() 
  $("#selectable1").selectable();
  $("#selectable2").selectable();
);

body 
  margin: 0;
  padding: 0;


.header,
.footer 
  background: yellow;


div.table 
  display: grid;
  width: 100vw;
  height: 100vh;


div.container 
  display: grid;
  grid-template-columns: auto 140px;
  grid-column-gap: 10px;
  overflow: auto;


div.container div 
  overflow-y: auto;
  height: 100%;


#selectable1 
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex: 1;


#selectable2 
  list-style-type: none;
  margin: 0;
  padding: 0;


#selectable1 li,
#selectable2 li 
  margin: 3px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="table">
  <div class="header">Header1</div>
  <div class="container">
    <div>
      <ol id="selectable1">
        <li class="ui-state-default">1</li>
        <li class="ui-state-default">2</li>
        <li class="ui-state-default">3</li>
        <li class="ui-state-default">4</li>
        <li class="ui-state-default">5</li>
        <li class="ui-state-default">6</li>
        <li class="ui-state-default">7</li>
        <li class="ui-state-default">8</li>
        <li class="ui-state-default">9</li>
        <li class="ui-state-default">10</li>
        <li class="ui-state-default">11</li>
        <li class="ui-state-default">12</li>
      </ol>
    </div>
    <div>
      <ol id="selectable2">
        <li class="ui-state-default">A</li>
        <li class="ui-state-default">B</li>
        <li class="ui-state-default">C</li>
        <li class="ui-state-default">D</li>
        <li class="ui-state-default">E</li>
        <li class="ui-state-default">F</li>
        <li class="ui-state-default">G</li>
        <li class="ui-state-default">H</li>
        <li class="ui-state-default">I</li>
        <li class="ui-state-default">J</li>
      </ol>
    </div>
  </div>
  <div class="footer">Footer1</div>
</div>

【讨论】：

除了在 IE 浏览器中（我知道我没有提到）之外，这非常有效。请让我等几天并接受答案。为什么需要overflow: auto;？

overflow: auto 需要确保容器 div 不会完全展开并在内容高度/宽度超过其容器的宽度/高度时显示滚动条。关于IE，你是指edge还是IE 11？ IE 不支持 CSS3 Grid，但 edge 支持 CSS3 Grid。我已更新答案以包含 IE 11 的 css。

是的，现在它可以完美地与 IE 11 配合使用，谢谢。我还是要支持IE，因为我的纸牌游戏是给俄罗斯用户的，有些还在用Win 7。

【参考方案2】：

考虑以下问题：https://jsfiddle.net/Twisty/uro3b2ps/17/

HTML

<div class="page">
  <div class="header">Header1</div>
  <div class="content">
    <ol id="selectable1">
      <li class="ui-state-default">1</li>
      <li class="ui-state-default">2</li>
      <li class="ui-state-default">3</li>
      <li class="ui-state-default">4</li>
      <li class="ui-state-default">5</li>
      <li class="ui-state-default">6</li>
      <li class="ui-state-default">7</li>
      <li class="ui-state-default">8</li>
      <li class="ui-state-default">9</li>
      <li class="ui-state-default">10</li>
      <li class="ui-state-default">11</li>
      <li class="ui-state-default">12</li>
    </ol>
    <ol id="selectable2">
      <li class="ui-state-default">A</li>
      <li class="ui-state-default">B</li>
      <li class="ui-state-default">C</li>
      <li class="ui-state-default">D</li>
      <li class="ui-state-default">E</li>
      <li class="ui-state-default">F</li>
      <li class="ui-state-default">G</li>
      <li class="ui-state-default">H</li>
      <li class="ui-state-default">I</li>
      <li class="ui-state-default">J</li>
    </ol>
  </div>
  <div class="footer">
    <td colspan=2 bgcolor="yellow">Footer1</td>
  </div>
</div>

CSS

.header,
.footer 
  width: 100%;
  background-color: yellow;


.content 
  height: 100vh;
  overflow: hidden;


#selectable1 
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  width: calc(100% - 150px);
  float: left;


#selectable2 
  list-style-type: none;
  margin: 0;
  padding: 10px;
  width: 100px;
  height: 100vh;
  overflow-y: scroll;


#selectable1 li,
#selectable2 li 
  margin: 3px;
  padding: 1px;
  float: left;
  width: 100px;
  height: 80px;
  font-size: 4em;
  text-align: center;

还有很多其他方法可以做到这一点。 inline-block 是阻止某些东西但在其后为其他元素留出空间的众多方法中的另一种方法。 float 也是另一种方式。

基本上，您必须为列表元素设置一个高度，这将在溢出时创建一个滚动条。

更新

https://jsfiddle.net/Twisty/uro3b2ps/21/

#selectable2 
  list-style-type: none;
  margin: 0;
  padding: 10px;
  width: 110px;
  height: 200px;
  overflow-y: scroll;

更新 2

https://jsfiddle.net/Twisty/uro3b2ps/25/

这里使用jQuery根据Window动态设置高度。

【讨论】：

感谢您的建议，但不幸的是，黄色页脚不可见，#selectable2 似乎将其向下推。我首先想到的可能是 jsfiddle 问题，但是在将代码保存到单独的 HTML 文件后，问题仍然存在：页脚不可见。

您已通过为#selectabled2 设置固定的height: 200px; 来更新您的答案，但这不是解决方案，页脚应位于屏幕底部（这就是我尝试使用的原因height: 100vh;用于父表）。在您更新的 jsfiddle 中，黄色页脚靠近屏幕中间

@AlexanderFarber 从您的帖子中不清楚。更新了答案。