javascript - jQuery 可选列表作为日历-6ren

javascript - jQuery 可选列表作为日历

转载作者：行者123 更新时间：2023-11-30 14:13:30

24

4

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

24

4

0

文章推荐： swift - UICollectionView 和解析图像(Swift)没有错误但崩溃

文章推荐： c# - 从同一页面中的另一个用户控件中查找用户控件的控件

文章推荐：复制数组上的 Javascript .map()

日历
我想知道是否有一种简单的方法可以为网站制作自上而下的列表日历。我不想使用谷歌日历。我还希望日历像接下来的 5 个事件一样显示并隐藏其余事件，直到显示的 5 个事件已经发生。如果有办法用 jquery
css - Drupal 日历 - 日历 View 在 IE7 中不显示条目
我使用的是 Drupal 日历，它在除 IE7 之外的所有浏览器中都运行良好。在 IE7 中，不会呈现单个日历条目。奇怪的是，如果页面加载缓慢，那么正确着色的表格单元格会出现然后消失。这是我尝试过
javascript - 原型(prototype) JavaScript 日历，可自定义单元格渲染，如 YUI 日历
我已经广泛使用了原型(prototype)，并且不想添加像 YUI 这样的额外框架。我需要一个 JavaScript 日历，它使我能够逐个单元格地自定义日历单元格的呈现。 (用于渲染特定日期的事件、
javascript - Google 日历 API key 不允许通过简单的 GET 请求访问公共(public)日历
通过 Google API 浏览器，我可以使用日历 ID 访问我的公共(public)日历事件列表。所以我知道这是对的 https://developers.google.com/google-app
CakePHP 日历
我是 CakePHP 的新手，想使用这个框架创建一个日历。我遇到了困难，想知道是否有关于如何使用 CakePHP 创建简单日历的教程或指南？最佳答案这里有两个链接:LINK1 (日历助手)和 LI
jquery 日历
我正在寻找一个与 jquery week calendar 具有相同功能的 jquery 日历我浏览了某些日历，但它们不包含jquery周日历的资源这可能是一个愚蠢的问题，但我可以修改jquery
Javascript 日历
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以
javascript, 日历
我想问一下我是否可以将日历“移动”到页面的右侧？因为我意识到它只能显示在左手边。我真的不知道如何将它“移动”到右侧...我也不知道如何放入 css 来做到这一点。这是制作日历的代码... //
Javascript 日历
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
Java 日历/日期问题
我正在构建一个月份列表，用作 JSP 中表格的标题。我正在做的是比较我从数据库中获得的月份，并一直迭代或“尝试”到那个月。在这种情况下，月份是 11 月问题是我只能从 2012 年 10 月到 2
calendar - 有没有地方提供世界假期？ [日历]
我将开发一个支持多种语言的日历解决方案，但我不确定应该如何根据各个国家/地区的用户需要来管理和显示所有不同的假期信息？有没有地方提供世界假期信息，以便我可以解析和显示？如果没有，您会推荐更好的开发方
带有年份选择和时间选择的 Javascript 日历
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为
javascript - 日历，需要一种隐藏周六和周日的方法吗？
我试图让我的应用程序隐藏周末，我的日历存储在一个字符串中，然后打印到innerHTML。我该如何隐藏周六和周日。我的日历打印如下: 周日周一周二周三周四周五周六代码: calendarString
javascript - 日历 - 编辑脚本
日历有可能从星期一开始吗？我在教程中找到了这个，但我的 JS 知识还不够。我改变了一些值但没有成功。 function Calendar(id, year, month) { var elem
iOS 编程 - 日历
我正在创建一个使用 iCal 格式日历的应用程序，很可能由 Google 存储在 Google 日历中。实现这一目标的最佳方法是什么？我真的不想在 iOS 日历应用程序中导入我的日历。我应该解决重
ios - 日历，无论设置如何
在应用程序中，我使用星期几来打开成就。 let date = Date() let dateFormatter = DateFormatter() dateFormatter.dateFormat =
Java 日历 - 设置自定义日期和时间
我正在尝试在java中为日历对象设置自定义日期和时间。我必须创建一个比当前日期多 1 天的日期，并且时间应设置为“X”(例如 05:00:00)。这是我到目前为止所做的: Calendar tomo
java - 日历 <= 另一个日历
while (r.next()) { String rn = r.getString(3); String sqldate = r.getString(2); // database
jQuery 日历 - 突出显示日期
我有一个日历，其中突出显示了一些日期它工作得很好，直到我想突出显示 2013 年 3 月 31 日之后的日期。此后日期就正常显示。有人知道为什么会这样吗？这是我用来突出显示日期的代码 //
java - 闹钟管理器日历
关于报警管理器的问题我有这个代码 Calendar cal = Calendar.getInstance(); cal.add(Calendar.SECOND, 5); Intege

首页

博学

6Ren·AI

商城

javascript - jQuery 可选列表作为日历