Установка и подключение

Tingle.js — это библиотека для создания модальных окон на JavaScript. Она предоставляет разработчику минималистичный, но гибкий инструмент для создания настраиваемых всплывающих окон, которые могут быть использованы для отображения информации, подтверждений, форм и другого контента. Благодаря простоте интеграции и обширной настройке, tingle.js является отличным выбором для добавления модальных окон на веб-страницу.

Установка через NPM

Для использования tingle.js в проекте, основанном на Node.js, необходимо установить библиотеку через менеджер пакетов NPM. Процесс установки прост и стандартен для большинства JavaScript библиотек.

  1. Откройте терминал и перейдите в корень вашего проекта.

  2. Введите команду для установки библиотеки:

    npm install tingle.js

После этого библиотека будет добавлена в зависимостях вашего проекта. Важно, чтобы в вашем проекте уже был настроен package.json.

Установка через CDN

Если проект не использует систему управления пакетами (например, NPM или Yarn), можно подключить tingle.js напрямую через CDN. Это позволяет быстро интегрировать библиотеку в проект без необходимости в дополнительной настройке сборщика.

Добавьте следующие строки в HTML-файл:

<!-- Подключение стилей tingle.js -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tingle.js@0.15.0/dist/tingle.min.css">

<!-- Подключение скрипта tingle.js -->
<script src="https://cdn.jsdelivr.net/npm/tingle.js@0.15.0/dist/tingle.min.js"></script>

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

Установка через Yarn

Если проект использует Yarn в качестве менеджера пакетов, библиотеку также можно установить с его помощью:

  1. Откройте терминал и выполните команду:

    yarn add tingle.js

  2. После этого tingle.js будет добавлена в зависимости вашего проекта.

Импорт библиотеки

После того как tingle.js установлена, можно импортировать её в ваш JavaScript файл. Для использования через модульную систему JavaScript (ES6 Modules, CommonJS и т.д.), используйте один из следующих вариантов импорта.

Если ваш проект использует ES6 модули, импорт будет выглядеть так:

import tingle from 'tingle.js';

Если используется система CommonJS:

const tingle = require('tingle.js');

После этого можно будет использовать все возможности библиотеки в коде.

Инициализация модального окна

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

// Создание нового модального окна
var modal = new tingle.modal({
    closeMethods: ['button', 'overlay'], // Как закрывать модалку (по кнопке или при клике на оверлей)
    closeLabel: "Закрыть", // Подсказка для кнопки закрытия
    cssClass: ['custom-class'], // Дополнительные классы CSS
    onClose: function () {
        console.log('Модальное окно закрыто');
    }
});

// Добавление контента в модальное окно
modal.setContent('<h1>Пример модального окна</h1><p>Текст в модалке</p>');

// Открытие модального окна
modal.open();

Модальное окно открывается с помощью метода modal.open(), а его содержимое задается через modal.setContent(). Параметры настройки (например, способ закрытия окна или добавление пользовательских классов) задаются при создании нового экземпляра окна.

Структура проекта

При установке tingle.js через NPM или Yarn, структура проекта будет выглядеть следующим образом:

/project-directory
  /node_modules
    /tingle.js
  /src
    /index.js
  package.json

В этом случае файл index.js будет вашим основным файлом для работы с библиотекой. Если вы подключаете tingle.js через CDN, структура будет значительно проще и не будет включать папку node_modules.

Подключение в HTML

Если вы используете CDN, то достаточно добавить два тега в файл HTML, как указано выше. Если же вы используете модульную систему через NPM или Yarn, вы должны собрать проект с помощью соответствующих инструментов (например, Webpack, Rollup или Parcel), которые поддерживают импорт модулей.

После того как сборка будет настроена, результат будет таким же, как если бы вы использовали CDN: подключенная библиотека будет доступна для использования в любом файле проекта, подключенном через JavaScript.

Порядок загрузки файлов

Если вы используете подключение через CDN, важно помнить о порядке загрузки файлов. Скрипт tingle.js должен быть подключен после стилей, чтобы стили были применены корректно.

Пример правильного порядка подключения:

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tingle.js@0.15.0/dist/tingle.min.css">
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/tingle.js@0.15.0/dist/tingle.min.js"></script>
</body>

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

Версии библиотеки

При подключении tingle.js через CDN или установке через NPM можно указать конкретную версию библиотеки. В примерах выше использована версия 0.15.0. Убедитесь, что вы используете актуальную версию для вашего проекта, так как более старые версии могут не поддерживать некоторые новые функции или исправления ошибок.

Для указания другой версии через NPM используйте команду:

npm install tingle.js@0.14.0

Если вы используете CDN, просто замените версию в ссылке:

<script src="https://cdn.jsdelivr.net/npm/tingle.js@0.14.0/dist/tingle.min.js"></script>

Таким образом, установка и подключение tingle.js может быть выполнено различными способами в зависимости от типа проекта. Важно выбрать наиболее подходящий метод в зависимости от используемой сборки или фреймворка.

Оглавление