Question

我想创建一个简单的日历，该日历由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？

Answer 1

要想改善您构想的布局并整理代码，您可以做的是创建一个表单，以允许您的用户输入其列表项，并允许他们通过以下方式为该列表项选择日期：日期选择器。 Materialize有一个由jQuery提供支持的出色版本：https://materializecss.com/pickers.html。

Answer 2

我建议使用类似float: left;和column-count: 2;的方法。无论哪种方式，我都建议为ol设置适当的宽度和高度。这将使选择工作更加容易。

示例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>

希望有帮助。

jQuery可选择列表作为日历

2 个答案: