我想创建一个简单的日历，它由 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>
但是有一个问题，因为select的顺序不对:
还有一个 grid selectable 列表元素 - https://jqueryui.com/selectable/#display-grid但顺序不适合我的情况(顺序是按行，而不是按列)。
如何从一个 ol 列表创建多个列并在这些元素上使用 selectable jqueryUi？
最佳答案
我会建议像 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>希望对您有所帮助。
关于javascript - jQuery 可选列表作为日历，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53964693/