jQuery Выбираемый список как календарь - PullRequest
Новая
       0

jQuery Выбираемый список как календарь

0 голосов
/ 29 декабря 2018

Я хотел бы создать простой календарь, который представлен 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 - включая «по дням» (щелкнув по первому элементу и перетащив курсор на следующий или предыдущий).

Я использую selectable из jqueryUi - 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>

, но есть проблема из-за неправильного порядка выбора: enter image description here

Также есть grid selectable элементы списка - https://jqueryui.com/selectable/#display-grid но в моем случае порядок неверный (порядок по строкам, а не по столбцам).

Как можно создать несколько столбцов из одного ol списка и использовать selectable jqueryUi вэто элементы?

Ответы [ 2 ]

0 голосов
/ 29 декабря 2018

Я бы предложил что-то вроде 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>

Надеюсь, что поможет.

0 голосов
/ 29 декабря 2018

Чтобы, возможно, улучшить макет того, что вы имели в виду, и привести в порядок код, вы можете создать форму, которая позволит вашим пользователям вводить свой элемент списка и позволять им выбирать дату для этого элемента списка черезВыбор датыМатериализация есть отличный, который работает на jQuery: https://materializecss.com/pickers.html.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...