TUI фреймворк

 Репозиторий

Это мини-фреймворк с набором CSS3 классов и сценария на нативном javaScript для создания простых, адаптивных веб-интерфейсов. Он подойдёт для тех, кто не хочет тащить в проект монстров типа Bootstrap с их зависимостями. Если ты любишь адаптивную, выразительную вёрстку без верениц классов и работающие из коробки веб-компоненты типа табов или многоуровневого меню без поиска и подключения дополнительных плагинов, TUI станет приемлемой отправной точкой. Расширяй TUI если хочешь больше возможностей.

Подключение TUI

  1. Загрузи архив с TUI и распакуй его или клонируй: https://github.com/kroloburet/TUI.git
  2. Подключи в документ TUI.css и TUI.js как в примере ниже. 
    <!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <!-- TUI CSS -->
   <link href="TUI.css" rel="stylesheet">
   <!-- TUI JS -->
   <script src="TUI.js" defer></script>
   <title>Document</title>
</head>
<body>
   <button type="button" onclick="TUI.Popup('myPop')">Click My</button>
   <div id="myPop" class="TUI_Popup">
       <h3>Hello, World!</h3>
   </div>
</body>
</html>

Зависимости

TUI зависит только от Font Awesome. Как же без иконок в наше время ;) Font Awesome импортирован в файле TUI.css.

Начало работы с TUI

TUI.css содержит классы для стилистического оформления и облегчения адаптивной вёрстки веб-интерфейса (открой эту страницу в мобильном/планшете или измени ширину окна браузера, чтобы видеть как TUI адаптирует содержимое). Обрати внимание, что в начале файла стилей TUI заданы переменные, которые определяют в интерфейсе пользователя цветовую схему, шрифт и прочее. Ты можешь переопределить их значения чтобы, например, легко изменить цветовую схему элементов форм. Для этого скопируй секцию :root{...} с переменными которые ты хочешь переопределить, вставь в начало основного CSS-файла подключив его в документ после TUI.css и задай свои значения переменным.

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

Адаптивная модульная сетка

Сетка может иметь неограниченное количество строк TUI_row, каждая из которых может содержать до 12-ти колонок TUI_col. 12 колонок = 100% от ширины родительского блока, 3 колонки = 25% и так далее. При ширине устройства >= 600px все колонки сетки трансформируются в строки.

.TUI_col-1
.TUI_col-11
.TUI_col-2
.TUI_col-10
.TUI_col-3
.TUI_col-9
.TUI_col-4
.TUI_col-8
.TUI_col-5
.TUI_col-7
.TUI_col-6
.TUI_col-6
.TUI_col-12
Пример кода сетки
<div class="TUI_row">
    <div class="TUI_col-6">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
        industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
    </div>
    <div class="TUI_col-6">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
        industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
    </div>
</div>

<div class="TUI_row">
    <div class="TUI_col-12">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
        industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
        scrambled it to make a type specimen book.
    </div>
</div>
Результат
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Другие полезные классы

Если хочешь скрыть некоторые элементы страницы при выводе её на печать — присвой таким элементам class="TUI_noprint".

Чтобы пользователь видел, что ссылка ведёт на другой ресурс или откроется в новом окне или вкладке, в TUI предусмотрены классы TUI_external и TUI_blank. Пример: class="TUI_external", class="TUI_blank" или target="_blank"

Присвой class="TUI_warn" для элемента с текстом, чтобы он стал таким как этот. Это подойдёт, к примеру, для аннотации к статье или другой важной информации, которая должна быть ненавязчиво подана читателю.

У этого текста class="TUI_red" поэтому он такой. У этого текста class="TUI_yellow" поэтому он такой. У этого текста class="TUI_green" поэтому он такой. У этого текста class="TUI_blue" поэтому он такой. У этого текста class="TUI_gray" поэтому он такой.

У этого блока class="TUI_align-l" поэтому текст и другие блоки в нём будут выровнены по левой стороне

У этого блока class="TUI_align-r" поэтому текст и другие блоки в нём будут выровнены по правой стороне

У этого блока class="TUI_align-c" поэтому текст и другие блоки в нём будут выровнены по центру

Принудительно установи ширину 100% для элемента используя class="TUI_full"
Уведомления

class="TUI_notice-error"

class="TUI_notice-warning"

class="TUI_notice-success"

class="TUI_notice-info"

class="TUI_notice-process"

class="TUI_notice-error mini"

class="TUI_notice-warning mini"

class="TUI_notice-success mini"

class="TUI_notice-info mini"

class="TUI_notice-process mini"

Пример кода
<p class="TUI_notice-error">class="TUI_notice-error"</p>
<p class="TUI_notice-warning">class="TUI_notice-warning"</p>
<p class="TUI_notice-success">class="TUI_notice-success"</p>
<p class="TUI_notice-info">class="TUI_notice-info"</p>
<p class="TUI_notice-process">class="TUI_notice-process"</p>
<p class="TUI_notice-error mini">class="TUI_notice-error mini"</p>
<p class="TUI_notice-warning mini">class="TUI_notice-warning mini"</p>
<p class="TUI_notice-success mini">class="TUI_notice-success mini"</p>
<p class="TUI_notice-info mini">class="TUI_notice-info mini"</p>
<p class="TUI_notice-process mini">class="TUI_notice-process mini"</p>
Таблицы

Таблицы могут быть большими и сложными, а данные в них довольно объёмными. Задай class="TUI_table" для таблицы, чтобы при малой ширине устройства её структура оставалась целостной, а просматривать её можно было используя горизонтальную прокрутку. — Это наиболее оптимальное решение для таблиц в данный момент.

Планета Диаметр Наклон оси Спутники
Вывод: Мы — космическая пыль..)
Меркурий 4879,4 ~0,01 0
Венера 12104 177,36 2
Земля 12742 23,439281 1
Пример кода
<table class="TUI_table">
    <thead>
    <tr>
        <th>Планета</th>
        <th>Диаметр</th>
        <th>Наклон оси</th>
        <th>Спутники</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <td colspan="4">Вывод: Мы &mdash; космическая пыль..)</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
        <td>Меркурий</td>
        <td>4879,4</td>
        <td>~0,01</td>
        <td>0</td>
    </tr>
    <tr>
        <td>Венера</td>
        <td>12104</td>
        <td>177,36</td>
        <td>2</td>
    </tr>
    <tr>
        <td>Земля</td>
        <td>12742</td>
        <td>23,439281</td>
        <td>1</td>
    </tr>
    </tbody>
</table>
Формы

Элементы формы по умолчанию

В TUI предусмотрена стилизация элементов формы. Следуй простым правилам разметки для форм TUI. Кроме кнопок, все элементы формы должны быть обёрнуты в теги label с классом TUI, а надписи для элементов могут располагаться снаружи или внутри label. По умолчанию, элементы ведут себя как блочные и занимают всю доступную ширину.

Default input type="text" Default input disabled Default input class="TUI_invalid" Default input type="search" with button Default select Default textarea Default input type="number" Default input type="file" multiple Default input type="range"
Default checkbox
Default radio
<a class="TUI_btn-link"></a>

Inline элементы формы

Чтобы элемент формы вёл себя как строчный, добавь класс inline его родительскому label. Следует заметить, что в таком случае имеет значение, где будет расположена надпись элемента.

Надписи полей внутри <label>

Надписи полей снаружи <label>

Name Email

Элементы без надписей

Чекбоксы и радио

Группировка элементов

Для группировки элементов формы в HTML предусмотрен тег fieldset, можешь использовать его. Но иногда нужно расположить несколько элементов в одну строку так, чтобы они эффективно использовали всю доступную ширину и при этом были адаптивны. Просто возьми <div class="TUI_fieldset"> и помести в него всё, что нужно. Кстати, TUI_fieldset удобно использовать для мини форм если добавить этот класс прямо к тегу form. Надпись для группы следует размещать за её пределами.

Fieldset group
Пример кода
<!-------------------------- Default view -->

<!-- text input -->
Default input type="text"
<label class="TUI_input">
    <input type="text">
</label>

<!-- disabled input -->
Default input disabled
<label class="TUI_input">
    <input type="text" disabled>
</label>

<!-- TUI_invalid input -->
Default input class="TUI_invalid"
<label class="TUI_input">
    <input type="text" class="TUI_invalid">
</label>

<!-- search input -->
Default input type="search" with button
<label class="TUI_search">
    <input type="search">
    <button>Поиск</button>
</label>

<!-- select -->
Default select
<label class="TUI_select">
    <select>
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
    </select>
</label>

<!-- textarea -->
Default textarea
<label class="TUI_textarea">
    <textarea></textarea>
</label>

<!-- number input -->
Default input type="number"
<label class="TUI_number">
    <input type="number" min="-10" max="10" value="0">
</label>

<!-- file input -->
Default input type="file" multiple
<label class="TUI_file">
    <input type="file" multiple>
</label>

<!-- range input -->
Default input type="range"
<label class="TUI_range">
    <input type="range" min="0" max="10" step="1" value="0">
</label>

<div class="TUI_row">
    <div class="TUI_col-6">

        <!-- checkbox -->
        Default checkbox
        <label class="TUI_checkbox">
            <input type="checkbox" disabled checked>
            <span class="custom-checkbox"></span> Disabled checked
        </label>
        <label class="TUI_checkbox">
            <input type="checkbox" checked>
            <span class="custom-checkbox"></span> Option one
        </label>
        <label class="TUI_checkbox">
            <input type="checkbox">
            <span class="custom-checkbox"></span> Option two
        </label>
    </div>
    <div class="TUI_col-6">

        <!-- radio -->
        Default radio
        <label class="TUI_radio">
            <input type="radio" disabled checked>
            <span class="custom-radio"></span> Disabled checked
        </label>
        <label class="TUI_radio">
            <input type="radio" checked>
            <span class="custom-radio"></span> Option one
        </label>
        <label class="TUI_radio">
            <input type="radio">
            <span class="custom-radio"></span> Option two
        </label>
    </div>
</div>

<!-- buttons -->
<button type="button">button</button>
<input type="button" value="input button">
<a href="#" class="TUI_btn-link">link button</a>
<input type="submit" value="disabled button" disabled>

<!-------------------------- Inline view -->

<!-- inline input -->
<!-- Надписи полей внутри <label> -->
<label class="TUI_input inline">
    Name
    <input type="text">
</label>
<label class="TUI_input inline">
    Email
    <input type="email">
</label>

<!-- Надписи полей снаружи <label> -->
Name
<label class="TUI_input inline">
    <input type="text">
</label>
Email
<label class="TUI_input inline">
    <input type="email">
</label>

<!-- Элементы без надписей -->
<!-- inline range input -->
<label class="TUI_range inline">
    <input type="range" min="0" max="10" step="1" value="0">
</label>

<!-- inline file input -->
<label class="TUI_file inline">
    <input type="file" multiple>
</label>

<!-- inline number input -->
<label class="TUI_number inline">
    <input type="number" min="-10" max="10" value="0">
</label>

<!-- inline select -->
<label class="TUI_select inline">
    <select>
        <option selected>Default select</option>
        <option>Option1</option>
        <option>Option2</option>
        <option>Option3</option>
    </select>
</label>

<!-- default button -->
<button type="button">Default button</button>

<!-- Чекбоксы и радио -->
<!-- inline checkbox -->
<label class="TUI_checkbox inline">
    <input type="checkbox" checked>
    <span class="custom-checkbox"></span> Option inline one
</label>
<label class="TUI_checkbox inline">
    <input type="checkbox">
    <span class="custom-checkbox"></span> Option inline two
</label>

<!-- inline radio -->
<label class="TUI_radio inline">
    <input type="radio" checked>
    <span class="custom-radio"></span> Option inline one
</label>
<label class="TUI_radio inline">
    <input type="radio">
    <span class="custom-radio"></span> Option inline two
</label>

<!-------------------------- Fieldset group view -->

Fieldset group
<div class="TUI_fieldset">
    <label class="TUI_select">
        <select>
            <option>Option1</option>
            <option>Option2</option>
            <option>Option3</option>
        </select>
    </label>
    <label class="TUI_input">
        <input type="text" placeholder="Example text">
    </label>
    <button type="button">Add</button>
    <i class="fas fa-trash-alt fa-2x TUI_blue"></i>
</div>

Компоненты TUI

Далее следует описание с примерами и документацией компонентов TUI которые условно отнесены к хелперам и плагинам. Это просто элементы или группы элементов страницы с которыми взаимодействуют методы TUI.js.

Блокировка узлов и элементов

После загрузки страницы с подключенным TUI происходит инициализация плагинов. Например, все списки <ul class="TUI_Menu">...</ul> превратятся в меню, а <dl class="TUI_Tab">...</dl> станут табами. Хелперы же отрабатывают только если их вызывает пользователь. Например, начнёт вводить в поле <input oninput="TUI.Lim(this, 75)"> Добавленный класс TUI_disabled-node к элементу запрещает методам TUI обрабатывать этот узел и все его дочерние элементы. Если такие есть, TUI сбросит уведомления о них в консоль браузера. В сценарии TUI.js определено свойство const _disabledNodes = [`.TUI_disabled-node`]. В этот массив можно добавить дополнительные селекторы узлов которые нужно блокировать.

Блокировка может пригодиться когда на странице используется WYSIWYG HTML-редактор в котором понадобилось сверстать всплывающее окно TUI. Поскольку современные редакторы встраивают контент сверстанный в них в текущий документ, подключенные в документ TUI.css и TUI.js также будут работать и в окне редактора. Всё бы хорошо, но методы хелперов и плагинов TUI меняют содержимое и даже расположение в DOM элементов с которыми они взаимодействуют. В результате есть вероятность изменения элементов сценариями TUI перед сохранением. <div id="editor" class="TUI_disabled-node"> запретит TUI взаимодействовать с элементом куда будет встроен редактор и всеми его дочерними элементами.

Хелперы

Элементы страницы, которые должны динамически меняться в зависимости от действий пользователя, в TUI обрабатываются сценариями javascript из файла TUI.js. Эти сценарии (методы TUI) условно отнесены к хелперам. Изменение элемента хелпера привязано к событию на элементе триггере. Ниже приведены хелперы TUI.

Переключение отображения элемента

Полезный хелпер для показа/скрытия любых элементов с их содержимым.

Пример кода
<button type="button" onclick="TUI.Toggle('hidElem')">Подробнее</button>

<div id="hidElem" hidden>
    <p>My hidden content. More... more content..)</p>
    <a onclick="TUI.Toggle('hidElem')">Скрыть подробности</a>
</div>
API

Метод TUI.Toggle(id[, display]) переключает отображение элемента с id. Метод возвращает элемент с id

Аргументы метода:
  1. id (строка, обязательный). ID элемента, который будет отображён или скрыт.
  2. display (строка, опционально, по умолчанию "block"). Значение CSS-свойства "display" для отображаемого элемента. При скрытии элемент получает display: none
Переход к элементу

Этот простой хелпер плавно прокручивает страницу к заданному элементу. Конечно, это уже давно нативно реализовано в HTML, но прокрутить страницу можно только с помощью ссылки href="#myElement". Бывает удобно использовать кнопку, любой другой элемент, а не только ссылку, или вообще сделать это динамически.

Пример кода
<h2 id="h2Header">Заголовок</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, consectetur,
labore voluptates natus commodi nemo asperiores cumque magnam iste unde quaerat officia
praesentium aspernatur qui laborum in accusantium quae facilis illo eos animi minus est
sequi totam optio enim quos nihil corporis numquam rem quod neque error tempore.
Aspernatur, facere, nihil, inventore repudiandae eum recusandae accusamus soluta nemo est
libero expedita perferendis incidunt possimus ut esse cumque consequatur aliquid similique
totam praesentium impedit fuga deserunt dolorum numquam rerum omnis dolore quibusdam
assumenda quas qui hic fugiat labore repellendus quos voluptatibus autem dolorem...</p>

И ещё много-много всякого...

<button type="button" onclick="TUI.GoTo('#h2Header')">Перейти к заголовку</button>
API

Метод TUI.GoTo(selectorId) используй чтобы плавно прокрутить страницу к желаемому элементу. Например: чтобы перейти к заголовку Подключение TUI на этой странице, используется ссылка с onclick="TUI.GoTo('#GetStart')", а сам заголовок имеет id="GetStart". Метод возвращает элемент с id

Аргументы метода:
  1. selectorId (строка, опционально, по умолчанию null). CSS-селектор ID элемента к которому нужно прокрутить страницу. Если аргумент не передан, метод попытается найти в текущем URI якорь (строка после # включительно) и выполнить выше описанный сценарий.
Всплывающая подсказка
Особенность этой всплывающей подсказки  
            Привет, Мир!
            Это пример всплывающей подсказки,
            которая появляется потому, что на
            элементе (триггере), над которым
            сейчас расположен курсор,
            есть событие с вызовом метода
            onmouseover="TUI.Hint(this)"
в том, что:
Пример кода
<ol>
    <li>
        Подсказка по умолчанию. Триггер <mark onmouseover="TUI.Hint(this)">здесь</mark>
        <pre class="TUI_Hint">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Dolores, aliquid consequuntur harum, quia voluptatem
        </pre>
    </li>

    <li>
        Чтобы скрыть <mark onmouseover="TUI.Hint(this,'click')">эту подсказку</mark>
        <pre class="TUI_Hint">
            Чтобы скрыть эту подсказку кликни
            в любом месте. Это пригодится, например,
            если в подсказке будет <a href="#">ссылка</a>
            или другой подобный элемент взаимодействия
        </pre>
        нужно кликнуть
    </li>

    <li>
        <mark onmouseover="TUI.Hint(this,'dblclick')">Подсказка</mark>
        <pre class="TUI_Hint">
            Ну, ты в курсе как её скрыть.
            Кликай дважды..)
        </pre>
        в этом примере скрывается при двойном клике
    </li>

    <li>
        А в <mark onmouseover="TUI.Hint(this)">этой</mark>
        <pre class="TUI_Hint">
            <b>Случайная картинка</b>
            <img src="https://loremflickr.com/250/150" alt="random">
        </pre>
        небольшой HTML-контент
    </li>

    <li>
        Если что-то нужно разъяснить <i class="fas fa-question-circle TUI_blue" onmouseover="TUI.Hint(this)"></i>
        <pre class="TUI_Hint">
            А что здесь разъяснять?
            Всё предельно просто, если посмотреть
            в исходный код этих примеров в вкладке
            "Пример кода".
        </pre>
    </li>
</ol>
Результат
  1. Подсказка по умолчанию. Триггер здесь 
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Dolores, aliquid consequuntur harum, quia voluptatem.
  2. Чтобы скрыть эту подсказку  
                        Чтобы скрыть эту подсказку кликни
                    в любом месте. Это пригодится, например,
                    если в подсказке будет ссылка
                    или другой подобный элемент взаимодействия.
    нужно кликнуть
  3. Подсказка  
                        Ну, ты в курсе как её скрыть.
                    Кликай дважды..)
    в этом примере скрывается при двойном клике
  4. А в этой  
                        Случайная картинка
                    random
    небольшой HTML-контент
  5. Если что-то нужно разъяснить 
                        А что здесь разъяснять?
                    Всё предельно просто, если посмотреть
                    в исходный код этих примеров в вкладке
                    "Пример кода".
API

Метод TUI.Hint(trigger[, hideEvent]) запускается по событию, установленному на триггере и показывает\скрывает подсказку, которая должна быть обернута в строчный элемент (span, pre). Элемент с подсказкой должен быть расположен сразу после триггера. Этому элементу необходимо присвоить class="TUI_Hint". Метод возвращает элемент подсказки

Аргументы метода:
  1. trigger (объект, обязательный). Указатель на триггер — "this". Или передай ссылку на элемент триггера если используешь метод динамически.
  2. hideEvent (строка, опционально, по умолчанию "mouseout") событие для скрытия подсказки. Это событие следует передавать как строку без префикса on, например: TUI.Hint(this, 'click'). В данном случае, после появления подсказки, она будет скрыта только после клика по ней или любому другому элементу на странице. По умолчанию подсказка скроется когда с триггера будет убран курсор. Список стандартных HTML событий
Лимит ввода

Этот хелпер ограничивает количество символов при заполнении текстового поля и динамически показывает, сколько ещё можно вводить.

Default input Default textarea
Пример кода
Default input
<label class="input">
    <input type="text" placeholder="начни вводить символы" oninput="TUI.Lim(this, 75)">
</label>

Default textarea
<label class="TUI_textarea">
    <textarea placeholder="начни вводить символы" oninput="TUI.Lim(this, 75)"></textarea>
</label>
API

Метод TUI.Lim(trigger[, limit]) ограничит ввод символов в поле trigger до limit и покажет пользователю сколько ещё можно ввести. Следует отметить, что метод корректно обработает только текстовые поля input и textarea которые свёрстаны по правилам разметки TUI, как показано в разделе Формы. Метод возвращает элемент поля.

Аргументы метода:
  1. trigger (объект, обязательный). Указатель на триггер — "this". Или передай ссылку на элемент триггера если используешь метод динамически.
  2. limit (целое число, опционально, по умолчанию 50). Лимит символов.

Плагины

Один или несколько элементов страницы, которые должны динамически трансформироваться чтобы в результате работать как отдельные единицы интерфейса (компоненты). Эти трансформации, и в последующем, логика работы таких единиц описаны в файле TUI.js в методах TUI, условно отнесенных к плагинам. Плагины отличаются от хелперов возможностью более гибкого управления и трансформации элементов. Ниже приведены плагины TUI.

Уведомления

Уведомить пользователя о статусе выполнения какого-либо процесса из твоего сценария можно с помощью TUI.Notice(). Например, при отправке ajax запроса на сервер и получения ответа или в других случаях, когда использование alert(), confirm() излишне или некрасиво. Плагин использует классы уведомлений, но может использовать и твои.

Пример кода
<button type="button" id="goFeed">Покормить Барсика</button>

<script>
    let feedTheBarsik = () => {
        TUI.Notice({
            text: `омномном...`,
            delay: 3000,
            callback: () => {
                TUI.Notice({
                    text: `Барсик покормлен..)`,
                    delay: 2000,
                    className: `TUI_notice-success`
                });
            }
        });
    }
    document.querySelector(`#goFeed`).addEventListener(`click`, feedTheBarsik);
</script>
API

Метод TUI.Notice() создаёт и показывает уведомление. Если уведомление ещё не создано TUI.Notice() создаст его, иначе просто применит переданную конфигурацию. Чтобы показать уведомление, вызови метод и передай в него объект конфигурации. Например: TUI.Notice({text: 'Успешно!', className: 'TUI_notice-success', delay: 2000}). Метод показывает и возвращает элемент уведомления.

Активация плагина

TUI.Notice([userConf]) В данном случае, метод может принимать один необязательный аргумент — литерал объекта с конфигурацией пользователя. Если конфигурация не передана, будет использована конфигурация по умолчанию.
  1. text (строка, опционально, по умолчанию "обработка..."). Текст или HTML в уведомлении.
  2. className (строка, опционально, по умолчанию "TUI_notice-process"). Класс/ы уведомления описанные в классах уведомлений. Можно передавать и свои классы.
  3. delay (число или null, опционально, по умолчанию null). Задержка в миллисекундах для показа уведомления перед деактивацией. Если передан 0 или null, уведомление будет активировано пока не вызовешь команду kill или не передашь новую конфигурацию с delay больше нуля.
  4. callback (функция или null, опционально, по умолчанию null). Функция, которая будет вызвана после деактивации уведомления. Обрати внимание, если delay 0 или null, функция не будет выполнена, поскольку деактивация в такой конфигурации не предусмотрена.

Деактивация плагина

TUI.Notice("kill"[, id]). В данном случае, метод должен принимать первым аргументом команду kill, а вторым, необязательным, идентификатор уведомления. Поскольку идентификатор присваивается плагином автоматически при активации и используется в служебных целях, будет достаточно использовать только команду kill.

  1. kill (строка, обязательный). Команда деактивации плагина
  2. id (строка, опционально). Идентификатор активного уведомления который нужно деактивировать.
Всплывающее окно

Любой элемент, которому присвоен class="TUI_Popup" и уникальный ID, TUI трансформирует в всплывающее окно. Этот элемент может содержать всё что угодно. Содержимое не будет скрыто от поисковых роботов. Вызов всплывающего окна можно привязать к любому событию, на любом элементе (триггере).

Ссылка и т.д.

Привет!

Окно активировано кнопкой.
Окно активировано ссылкой.
Пример кода
<button type="button" onclick="TUI.Popup('pop1')">Кнопка</button>
<a onclick="TUI.Popup('pop2')">Ссылка</a>

<div id="pop1" class="TUI_Popup">
    <h3>Привет!</h3>
    Окно активировано кнопкой.
</div>

<div id="pop2" class="TUI_Popup">
    Окно активировано ссылкой.
</div>
API

Метод TUI.Popup() создаёт и показывает всплывающие окна. Сначала метод трансформирует все элементы которым присвоен class="TUI_Popup" в сплывающие окна, которые будут скрыты изначально. Чтобы показать всплывающее окно, вызови метод с переданным ID элемента. Например: TUI.Popup("myPop") покажет всплывающее окно с id="myPop" class="TUI_Popup". Вызов всплывающего окна может быть привязан к любому элементу (триггеру) или вызван динамически из сценария. Метод возвращает элемент с переданным ID.

Аргументы метода:
  1. id (строка, обязательный). ID элемента который должен быть показан как всплывающее окно.
Табы

Интерфейс переключения между блоками с контентом с помощью вкладок (табов) можно наблюдать прямо здесь. HTML-структура списка определений dl отлично подходит для этой задачи. По умолчанию, все <dl class="TUI_Tab">...</dl> TUI трансформирует в табы. При ширине устройства >= 600px табы трансформируются в аккордеон.

Пример кода
<dl class="TUI_Tab">
    <dt>Tab 1</dt>
    <dd>
        <h2>Контент первого таба</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </dd>
    <dt>Tab 2</dt>
    <dd>
        <h2>Контент второго таба</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </dd>
</dl>
API

Метод TUI.Tab() динамически трансформирует список определений dl в табы. TUI по умолчанию трансформирует в табы все dl списки которым присвоен class="TUI_Tab". По умолчанию первая вкладка в табе будет активной. Если хочешь, чтобы по умолчанию была активна другая вкладка, присвой class="TUI_Tab-show" желаемому dt.

Активация плагина на элементе/тах

TUI.Tab([userConf]) В данном случае, метод может принимать один необязательный аргумент — литерал объекта с конфигурацией пользователя. Например: TUI.Tab({selector: ".myElement"}). Если методу не передать аргумент, он сработает только на <dl class="TUI_Tab">. Метод возвращает коллекцию обработанных элементов.

  1. selector (строка, опционально, по умолчанию ".TUI_Tab"). CSS-селектор/ры элемента/тов dl которые нужно трансформировать в табы.

Деактивация плагина на элементе/тах

TUI.Tab("kill"[, selector]) В данном случае, метод должен принимать первым аргументом команду kill, а вторым, необязательным, CSS-селектор/ры элемента/тов dl на которых нужно деактивировать плагин и трансформировать в первоначальный вид. Если методу передать только команду kill, он сработает только на <dl class="TUI_Tab">. Метод возвращает коллекцию обработанных элементов.

  1. kill (строка, обязательный). Команда деактивации плагина
  2. selector (строка, опционально, по умолчанию ".TUI_Tab"). CSS-селектор/ры элемента/тов dl на которых нужно деактивировать плагин.
Input type="file" и type="range"

К полю <input type="file"> добавь class="TUI_InputFile", а к полю <input type="range"> добавь class="TUI_InputRange". TUI добавит к этим полям информационные элементы и немного улучшит внешний вид.

TUI_InputFile on input type="file". Default & inline

TUI_InputRange on input type="range". Default & inline

Пример кода
TUI_InputFile on input type="file"
<label class="TUI_file">
    <input class="TUI_InputFile" type="file" multiple>
</label>

TUI_InputFile on inline input type="file"
<label class="TUI_file inline">
    <input class="TUI_InputFile" type="file" multiple>
</label>

TUI_InputRange on input type="range"
<label class="TUI_range">
    <input class="TUI_InputRange" type="range" min="0" max="10" step="1" value="0">
</label>

TUI_InputRange on inline input type="range"
<label class="TUI_range inline">
    <input class="TUI_InputRange" type="range" min="0" max="10" step="1" value="0">
</label>
API

Методы TUI.InputFile() и TUI.InputRange() динамически добавят информационный элемент к соответствующим полям — <input type="file"> и <input type="range">, а также улучшат их внешний вид. Оба метода принимают одинаковые параметры, но обрабатывают только соответствующие им типы полей (file или range). Следует отметить, что плагины корректно обработают поля которые свёрстаны по правилам разметки TUI, как показано в разделе Формы.

Активация плагинов на элементе/тах

TUI.InputFile([userConf]) и TUI.InputRange([userConf]). В данном случае, методы могут принимать один необязательный аргумент — литерал объекта с конфигурацией пользователя. Например: UI.InputFile({selector: ".myInput"}). Если методу не передать аргумент, по умолчанию он сработает только на <input type="file" class="TUI_InputFile">. Для TUI.InputRange() — это <input type="range" class="TUI_InputRange">. Методы возвращают коллекцию обработанных элементов.

  1. selector (строка, опционально, по умолчанию ".TUI_InputFile" / ".TUI_InputRange"). CSS-селектор/ры элемента/тов соответствующих полей которые нужно трансформировать.
  2. icon Только для TUI.InputFile() (строка, опционально, по умолчанию "<i class="fas fa-folder-open">"). Текст или HTML для информационного элемента если файл не выбран.

Деактивация плагинов на элементе/тах

TUI.InputFile("kill"[, selector]) и TUI.InputRange("kill"[, selector]). В данном случае, метод должен принимать первым аргументом команду kill, а вторым, необязательным, CSS-селектор/ры элемента/тов соответствующих полей, на которых нужно деактивировать плагин и трансформировать в первоначальный вид. Если методу передать только команду kill, он сработает только на <input type="file" class="TUI_InputFile"> и <input type="range" class="TUI_InputRange"> соответственно. Метод возвращает коллекцию обработанных элементов.

  1. kill (строка, обязательный). Команда деактивации плагина
  2. selector (строка, опционально, по умолчанию ".TUI_InputFile" / ".TUI_InputRange"). CSS-селектор/ры элемента/тов соответствующих полей на которых нужно деактивировать плагин.
Input type="number"

К полю <input type="number"> добавь class="TUI_InputNumber". TUI добавит к этому полю кнопки изменения значения, проверку на нечисловые значения и немного улучшит внешний вид. Обрати внимание, что надпись для поля следует размещать снаружи родительского label.

TUI_InputNumber on input type="number". Default & inline

Пример кода
<label class="TUI_number">
    <input class="TUI_InputNumber" type="number" min="0" max="6">
</label>

<label class="TUI_number inline">
    <input class="TUI_InputNumber" type="number" min="-6" max="6" step="2">
</label>
API

Метод TUI.InputNumber() динамически добавит кнопки изменения значения к полям <input type="number">, а также проверку на ввод нечисловых значений. Этот плагин корректно обработает поля которые свёрстаны по правилам разметки TUI, как показано в разделе Формы.

Активация плагина на элементе/тах

TUI.InputNumber([userConf]) может принимать один необязательный аргумент — литерал объекта с конфигурацией пользователя. Например: UI.InputNumber({selector: ".myInput"}). Если методу не передать аргумент, по умолчанию он сработает только на <input type="number" class="TUI_InputNumber"> . Метод возвращает коллекцию обработанных элементов.

  1. selector (строка, опционально, по умолчанию ".TUI_InputNumber"). CSS-селектор/ры элемента/тов полей которые нужно трансформировать.
  2. incIcon (строка, опционально, по умолчанию "+"). Текст или HTML для кнопки прибавления к значению поля.
  3. decIcon (строка, опционально, по умолчанию "−"). Текст или HTML для кнопки убавления от значения поля.
  4. info (строка, опционально, по умолчанию "Поставьте курсор в поле и крутите колёсико мыши ;)"). Текст-подсказка для поля. Например, если нужно подсказать пользователю допустимый диапазон ввода.

Деактивация плагина на элементе/тах

TUI.InputNumber("kill"[, selector]). В данном случае, метод должен принимать первым аргументом команду kill, а вторым, необязательным, CSS-селектор/ры поля/лей, на которых нужно деактивировать плагин и трансформировать в первоначальный вид. Если методу передать только команду kill, он сработает только на <input type="number" class="TUI_InputNumber">. Метод возвращает коллекцию обработанных элементов.

  1. kill (строка, обязательный). Команда деактивации плагина
  2. selector (строка, опционально, по умолчанию ".TUI_InputNumber"). CSS-селектор/ры элемента/тов полей на которых нужно деактивировать плагин.
Поиск по списку

Просто добавь class="TUI_SelectSearch" к списку <select>...</select>, а TUI прикрепит к нему поле поиска и обеспечит его работу. Используй стандартные атрибуты "size", "multiple" и другие, чтобы управлять списком как обычно.

Пример кода
<label class="TUI_select">
    <select class="TUI_SelectSearch" size="3">
        <option>Aquaman</option>
        <option>Asterix</option>
        <option>Batman</option>
        <option>Black Panther</option>
        <option>Captain America</option>
        <option>Captain Marvel</option>
        <option>Doctor Strange</option>
        <option>Guardians of the Galaxy</option>
        <option>Hellboy</option>
        <option>Robin</option>
        <option>Superman</option>
        <option>Teenage Mutant Ninja Turtles</option>
        <option>Thor</option>
    </select>
</label>
API

Метод TUI.SelectSearch() динамически добавляет к списку select текстовое поле и выполняет регистронезависимый поиск среди пунктов этого списка. TUI по умолчанию трансформирует все списки select которым присвоен class="TUI_SelectSearch". Следует отметить, что плагин корректно обработает списки которые свёрстаны по правилам разметки TUI, как показано в разделе Формы.

Активация плагина на элементе/тах

TUI.SelectSearch([userConf]) В данном случае, метод может принимать один необязательный аргумент — литерал объекта с конфигурацией пользователя. Например: TUI.SelectSearch({selector: ".myElement", placeholder: "Поиск"}). Если методу не передать аргумент, он сработает только на <select class="TUI_SelectSearch">...</select>. Метод возвращает коллекцию обработанных элементов.

  1. selector (строка, опционально, по умолчанию ".TUI_SelectSearch"). CSS-селектор/ры списка/ков select которые нужно трансформировать.
  2. placeholder (строка, опционально, по умолчанию "Поиск по списку"). Значение одноимённого атрибута для поля поиска.

Деактивация плагина на элементе/тах

TUI.SelectSearch("kill"[, selector]) В данном случае, метод должен принимать первым аргументом команду kill, а вторым, необязательным, CSS-селектор/ры списка/ков select на которых нужно деактивировать плагин и трансформировать в первоначальный вид. Если методу передать только команду kill, он сработает только на <select class="TUI_SelectSearch">...</select>. Метод возвращает коллекцию обработанных элементов.

  1. kill (строка, обязательный). Команда деактивации плагина
  2. selector (строка, опционально, по умолчанию ".TUI_SelectSearch"). CSS-селектор/ры списка/ков select на которых нужно деактивировать плагин.
Меню

Обычный маркированный список <ul class="TUI_Menu">...</ul> TUI трансформирует в адаптивное меню. Если пункт меню не должен быть ссылкой, его следует поместить в тег span. Добавь class="TUI_Menu-mark" родительскому li пункта, чтобы пометить его. А вообще, плагин сам пометит пункт первого уровня, если на любой глубине вложенности его дочерних пунктов есть ссылка на текущую страницу.

Пример кода
<ul class="TUI_Menu">
    <li class="TUI_Menu-mark"><a href="#">item1</a>
    </li>
    <li><span>item2</span>
        <ul>
            <li><a href="#">sub item1</a>
            </li>
            <li><a href="#">sub item2</a>
            </li>
        </ul>
    </li>
    <li><a href="#">item3</a>
        <ul>
            <li><span>sub item1</span>
            </li>
            <li><a href="#">sub item2</a>
                <ul>
                    <li><a href="#">sub item1</a>
                    </li>
                    <li><a href="#">sub item2</a>
                    </li>
                </ul>
            </li>
            <li><span>sub item3</span>
            </li>
        </ul>
    </li>
</ul>
API

Метод TUI.Menu() динамически трансформирует список ul в меню. TUI по умолчанию трансформирует в меню все ul списки которым присвоен class="TUI_Menu". Плагин выделяет корневой пункт если среди его вложенных пунктов есть ссылка на текущую страницу. Если URI текущей страницы совпадает со значением href ссылки на любом уровне вложенности, плагин найдёт родительский li самого верхнего уровня и добавит ему class="TUI_Menu-mark". Ты тоже можешь использовать этот класс, чтобы выделить какой-либо li в структуре. Для мобильной версии, плагин добавит кнопку отображения/скрытия меню и кнопки отображения/скрытия вложенных подуровней меню.

Активация плагина на элементе/тах

TUI.Menu([userConf]) В данном случае, метод может принимать один необязательный аргумент — литерал объекта с конфигурацией пользователя. Например: TUI.Menu({selector: ".myElement", icon: "…"}). Если методу не передать аргумент, он сработает только на <ul class="TUI_Menu">. Метод возвращает коллекцию обработанных элементов.

  1. selector (строка, опционально, по умолчанию ".TUI_Menu"). CSS-селектор/ры списка/ков ul которые нужно трансформировать в меню.
  2. icon (строка, опционально, по умолчанию "≡"). Текст или HTML на кнопках меню.

Деактивация плагина на элементе/тах

TUI.Menu("kill"[, selector]) В данном случае, метод должен принимать первым аргументом команду kill, а вторым, необязательным, CSS-селектор/ры списка/ков ul на которых нужно деактивировать плагин и трансформировать в первоначальный вид. Если методу передать только команду kill, он сработает только на <ul class="TUI_Menu">. Метод возвращает коллекцию обработанных элементов.

  1. kill (строка, обязательный). Команда деактивации плагина
  2. selector (строка, опционально, по умолчанию ".TUI_Menu"). CSS-селектор/ры списка/ков ul на которых нужно деактивировать плагин.