jQuery 可选列表作为日历答案

【问题标题】：jQuery Selectable list as calendarjQuery 可选列表作为日历
【发布时间】：2018-12-28 21:56:59
【问题描述】：

我想创建一个简单的日历，它由 7 列（以天为单位）和几行（例如 6 行 - 每行 4 小时）表示。

结果应该是这样的：

        monday        tuesday        wednesday    ...
0-4     listItem      listItem       listItem
4-8     listItem      listItem       listItem
8-12    listItem      listItem       listItem
12-16   listItem      listItem       listItem
...

然后用户应该能够选择几个listItem- 包括“跨天”（通过单击第一个元素并将光标拖动到下一个或上一个）。

我使用来自 jqueryUi 的 selectable - https://jqueryui.com/selectable/#default 但它仅适用于一列中的列表。

我尝试修改代码并将column-count: 2;添加为ol css属性：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">

  <style>
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
  #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; border: 2px solid black}
  ol{
    column-count: 2;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#selectable" ).selectable();
  } );
  </script>
</head>
<body>

<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>


</body>
</html>

但是由于选择顺序错误而出现问题：

还有一个 grid selectable 列表元素 - https://jqueryui.com/selectable/#display-grid 但顺序不适合我的情况（顺序是按行，而不是按列）。

如何从一个ol 列表创建多个列并在此元素上使用selectable jqueryUi？

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案1】：

我会建议像 float: left; 和 column-count: 2; 这样的东西。无论哪种方式，我都建议为ol 设置适当的宽度和高度。这将使 selectable 更容易工作。

示例 1

$(function() {
  $("#selectable").selectable();
});

#feedback {
  font-size: 1.4em;
}

#selectable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected {
  background: #F39814;
  color: white;
}

#selectable {
  list-style-type: none;
  margin: 0;
  padding: 10px;
  width: 260px;
  height: 240px;
}

#selectable li {
  margin: 3px;
  padding: 0.4em;
  font-size: 1.4em;
  height: 18px;
  border: 2px solid black;
  width: 100px;
  float: left;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ol id="selectable">
  <li class="ui-widget-content">Item 1</li>
  <li class="ui-widget-content">Item 2</li>
  <li class="ui-widget-content">Item 3</li>
  <li class="ui-widget-content">Item 4</li>
  <li class="ui-widget-content">Item 5</li>
  <li class="ui-widget-content">Item 6</li>
  <li class="ui-widget-content">Item 7</li>
</ol>

如果您需要更多的行和列控制，我会切换到table 元素。或者从多个列表中创建多个列。

示例 2

$(function() {
  $(".week-days").selectable({
    filter: ".day-list > td"
  });
});

#feedback {
  font-size: 1.4em;
}

.day-list .ui-selecting {
  background: #FECA40;
  border-color: #999;
}

.day-list .ui-selected {
  background: #F39814;
  color: white;
  border: 2px solid #000;
}

.day-list td {
  margin: 3px;
  padding: 0.2em;
  font-size: 1.3em;
  height: 18px;
  border: 2px solid #eee;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="week-days">
  <table>
    <tbody>
      <tr>
        <th></th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thursday</th>
        <th>Friday</th>
      </tr>
      <tr class="day-list">
        <th>0 - 4</th>
        <td>Item 1</td>
        <td>Item 7</td>
        <td>Item 13</td>
        <td>Item 19</td>
        <td>Item 25</td>
      </tr>
      <tr class="day-list">
        <th>4 - 8</th>
        <td>Item 2</td>
        <td>Item 8</td>
        <td>Item 14</td>
        <td>Item 20</td>
        <td>Item 26</td>
      </tr>
      <tr class="day-list">
        <th>8 - 12</th>
        <td>Item 3</td>
        <td>Item 9</td>
        <td>Item 15</td>
        <td>Item 21</td>
        <td>Item 27</td>
      </tr>
      <tr class="day-list">
        <th>12 - 16</th>
        <td>Item 4</td>
        <td>Item 10</td>
        <td>Item 16</td>
        <td>Item 22</td>
        <td>Item 28</td>
      </tr>
      <tr class="day-list">
        <th>16 - 20</th>
        <td>Item 5</td>
        <td>Item 11</td>
        <td>Item 17</td>
        <td>Item 23</td>
        <td>Item 29</td>
      </tr>
      <tr class="day-list">
        <th>20 - 24</th>
        <td>Item 6</td>
        <td>Item 13</td>
        <td>Item 18</td>
        <td>Item 24</td>
        <td>Item 30</td>
      </tr>
    </tbody>
  </table>
</div>

希望对您有所帮助。

【讨论】：

您的解决方案看起来很棒！我想使用 Example2，但还有一件事。在所选项目的最小和最大数量之间选择所有项目的最佳方法是什么？我的意思是当前用户可以选择Item2，然后将光标向右移动并选择Item9。最终的解决方案应该选择2 和9 之间的所有项目（所以Item3、Item4、...、Item8）。你知道如何以最有效的方式做到这一点吗？我尝试将 id 添加到每个元素，然后选择所有必需的，但它看起来并不聪明。
@karlperson 这在您的原始帖子中没有讨论。请注意，用户可以使用 Ctrl 键来选择第二个项目或第二组。看看stop 或selected 回调：api.jqueryui.com/selectable

【解决方案2】：

也许要改进您的想法的布局并整理代码，您可以做的是创建一个表单以允许您的用户输入他们的列表项并允许他们通过日期选择器。 Materialise 有一个很棒的由 jQuery 提供支持的工具：https://materializecss.com/pickers.html。

【讨论】：