Работа со списками и таблицами

Основы работы со списками

Tingle.js предоставляет несколько удобных способов для организации информации в виде списков. Хотя основное назначение этой библиотеки — создание модальных окон, она предоставляет гибкие возможности для отображения данных в виде списков и таблиц, используя простые HTML-элементы и CSS-классы.

Для начала создадим базовую структуру модального окна с простым списком:

<div id="modal" class="tingle-modal">
  <div class="tingle-modal-box">
    <div class="tingle-modal-header">
      <h2>Список задач</h2>
    </div>
    <div class="tingle-modal-body">
      <ul>
        <li>Задача 1</li>
        <li>Задача 2</li>
        <li>Задача 3</li>
      </ul>
    </div>
    <div class="tingle-modal-footer">
      <button class="tingle-btn tingle-btn--primary">Закрыть</button>
    </div>
  </div>
</div>

С помощью tingle-modal создаётся модальное окно, а внутри него — стандартный HTML-список. Можно также использовать классы Tingle для стилизации кнопок и заголовков. Это достаточно простая структура, но она уже предоставляет функциональность модального окна с отображением списка.

Подключение Tingle.js и создание модального окна

Для того чтобы модальное окно работало корректно, необходимо подключить саму библиотеку Tingle.js и инициализировать модальное окно в Jav * aScript:

<script src="https://cdn.jsdelivr.net/npm/tingle.js@0.15.0/dist/tingle.min.js"></script>
<script>
  var modal = new tingle.modal({
    closeMethods: ['overlay', 'button', 'escape'],
    closeLabel: "Закрыть"
  });

  modal.setContent(document.querySelector('#modal').innerHTML);
  modal.open();
</script>

Здесь важно отметить, что с помощью метода modal.setContent можно динамически задавать содержимое модального окна, например, используя HTML-разметку. Модальное окно откроется при вызове метода modal.open().

Стилизация списков с помощью Tingle.js

Хотя Tingle.js обеспечивает базовую стилизацию для модальных окон, для более сложных и адаптированных решений можно использовать дополнительные CSS-правила. Например, чтобы изменить внешний вид списка внутри модального окна, можно добавить стили, улучшая восприятие:

.tingle-modal-body ul {
  list-style-type: none;
  padding: 0;
}

.tingle-modal-body li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.tingle-modal-body li:last-child {
  border-bottom: none;
}

Эти стили удаляют стандартные маркеры списка и добавляют отступы и разделители для улучшения визуального восприятия.

Взаимодействие с элементами списка

Для интерактивности можно добавить обработчики событий для элементов списка. Например, при клике на пункт списка можно выполнить какое-то действие:

<ul id="task-list">
  <li>Задача 1</li>
  <li>Задача 2</li>
  <li>Задача 3</li>
</ul>

<script>
  document.querySelectorAll('#task-list li').forEach(function(item) {
    item.addEventListener('click', function() {
      alert('Вы выбрали: ' + item.textContent);
    });
  });
</script>

Этот код позволяет пользователю кликать по элементам списка, а при каждом клике выводить сообщение с текстом выбранной задачи.

Таблицы в модальных окнах

Таблицы могут быть полезны для представления структурированных данных. Для создания таблицы в Tingle.js достаточно использовать стандартный HTML-элемент <table>. Рассмотрим пример создания модального окна с таблицей:

<div id="modal-table" class="tingle-modal">
  <div class="tingle-modal-box">
    <div class="tingle-modal-header">
      <h2>Таблица с данными</h2>
    </div>
    <div class="tingle-modal-body">
      <table>
        <thead>
          <tr>
            <th>Имя</th>
            <th>Возраст</th>
            <th>Город</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Иван</td>
            <td>25</td>
            <td>Москва</td>
          </tr>
          <tr>
            <td>Мария</td>
            <td>30</td>
            <td>Питер</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="tingle-modal-footer">
      <button class="tingle-btn tingle-btn--primary">Закрыть</button>
    </div>
  </div>
</div>

Для этого не требуется никаких дополнительных настроек, кроме как разметки самой таблицы внутри модального окна.

Стилизация таблицы

Для более профессиональной стилизации таблицы в модальном окне можно применить следующие CSS-правила:

.tingle-modal-body table {
  width: 100%;
  border-collapse: collapse;
}

.tingle-modal-body th, .tingle-modal-body td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.tingle-modal-body th {
  background-color: #f4f4f4;
}

Эти правила улучшат визуальную составляющую таблицы, сделав её более читабельной и аккуратной.

Динамическое обновление содержимого

Tingle.js также позволяет динамически изменять содержимое как списков, так и таблиц. Для обновления данных внутри модального окна можно использовать методы JavaScript. Например, чтобы заменить данные таблицы:

var newRow = '<tr><td>Алексей</td><td>28</td><td>Новосибирск</td></tr>';
document.querySelector('tbody').innerHTML += newRow;

Этот код добавляет новую строку в таблицу, обновляя её содержимое без необходимости перезагружать страницу.

Удаление элементов

Если требуется динамически удалять элементы списка или строки таблицы, можно добавить соответствующие обработчики событий. Например, для удаления строки из таблицы:

<tr>
  <td>Иван</td>
  <td>25</td>
  <td>Москва</td>
  <td><button class="delete-btn">Удалить</button></td>
</tr>

<script>
  document.querySelectorAll('.delete-btn').forEach(function(button) {
    button.addEventListener('click', function() {
      button.closest('tr').remove();
    });
  });
</script>

Этот код добавляет кнопку для удаления строки, и при её нажатии строка будет удалена.

Заключение

Использование Tingle.js для работы со списками и таблицами позволяет создать динамичные и удобные интерфейсы, интегрируя списки и таблицы внутри модальных окон. С помощью простых HTML-элементов и возможностей библиотеки можно легко манипулировать данными, обновлять содержимое и добавлять интерактивность, делая интерфейс более гибким и привлекательным.

Оглавление