个人中心
gpt4 book ai didi

javascript - jQuery 可选列表作为日历

转载 作者：行者123 更新时间：2023-11-30 14:13:30 24 4
gpt4 key购买 nike

我想创建一个简单的日历，它由 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的顺序不对: enter image description here

还有一个 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/

24 4 0
文章推荐： swift - UICollectionView 和解析图像(Swift)没有错误但崩溃
文章推荐： c# - 从同一页面中的另一个用户控件中查找用户控件的控件
文章推荐： javascript - 它来自 freecodecamp，我需要帮助来弄清楚 push() 与 concat()
文章推荐： 复制数组上的 Javascript .map()
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com