UI фреймворк
РепозиторійМініфреймворк UI створено для зручної, адаптивної верстки вебінтерфейсів. Ця сторінка містить опис, документацію, приклади застосування компонентів та CSS-класів UI.
Залежності
Залежності імпортовано в файл UI.css
.
Початок роботи з UI
Щоб почати користуватися UI, завантажте каталог UI
:
Або скористуйтеся для підключення CDN:
- UI folder cdn:
- UI.min.css cdn:
- UI.min.js cdn:
UI.css
та UI.js
до сторінки.
<!DOCTYPE html> <html lang="uk"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/gh/kroloburet/UI/UI.min.css" rel="stylesheet"> <link href="/style/main.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/gh/kroloburet/UI/UI.min.js" defer></script> <script src="/scripts/main.js" defer></script> <title>Hello, World!</title> </head> <body> Hello, World! </body> </html>
UI.css
містить CSS-класи з префіксом UI_
для стилістичного оформлення та спрощення
адаптивної верстки інтерфейсів та сторінок (відкрийте цю сторінку в мобільному/планшеті чи змініть ширину вікна
браузера, щоб побачити як UI адаптує
контент). Зверніть увагу, що на початку файлу стилів UI завдані
змінні з префіксом --UI_
, котрі задають в дизайні кольори, шрифт та інші властивості. Ви можете
перевизначити їхнє значення у своєму файлі стилів, щоб, наприклад, легко змінити тему сторінки. Отже, перевизначайте та користуйтеся у своїх файлах
цими змінними, щоб керувати виглядом UI.
UI.js
містить суперклас UI
з методами для
забезпечення роботи вебкомпонентів, таких як вікна, що випливають, таби та інших. Деякі методи, що змінюють
елементи, повинні бути викликані одразу після завантаження сторінки. Тому у файлі одразу ініціюється клас
UI
та викликаються такі методи.
Типографіка
Базовий шрифт документа, оформлення заголовків, параграфів, списків, посилань та інших елементів верстки
контенту. Для всього цього в UI не передбачено особливих CSS-класів. Правила просто застосовуються до тегів в
файлі
UI.css
за допомогою змінних.
- Вигляд
-
Заголовок h1 в 2 рядки
другий рядокПараграф 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores eaque fugiat laboriosam laudantium libero magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!
Параграф 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores eaque fugiat laboriosam laudantium libero magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!
Заголовок h2 в 2 рядки
другий рядокПараграф 1 перед переліком: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores laboriosam laudantium libero magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!
- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, pariatur.
- Lorem ipsum dolor sit amet.
Параграф 2 після переліком: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores laboriosam laudantium libero magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!
Заголовок h3 в 2 рядки
другий рядокПараграф 1 до розподільчої лінії: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore laboriosam laudantium libero magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!
Параграф 2 після розподільчої лінії: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, laboriosam laudantium libero magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!
Заголовок h4 в 2 рядки
другий рядокПараграф 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores eaque fugiat laboriosam laudantium libero magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!
Заголовок h5 в 2 рядки
другий рядокПараграф 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores eaque fugiat laboriosam magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident laudantium libero reiciendis!
em example, i example,
s example,del example, abbr example,code example
, kbd example, samp example, mark example , sub example, sup example, b example, strong example, small example,pre example
Блок цитата: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aperiam facere neque, sequi voluptatum. Ad autem, culpa cum explicabo, itaque laudantium nesciunt nulla, perferendis quaerat.
- Код
-
<!--- h1 with p ---> <h1>Заголовок h1 в 2 рядки<br>другий рядок</h1> <p>Параграф 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores eaque fugiat laboriosam <a>laudantium libero</a> magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!</p> <p>Параграф 2: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores eaque fugiat laboriosam laudantium libero magnam omnis pariatur <a>tempora</a> veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!</p> <!--- h2 with p & ul ---> <h2>Заголовок h2 в 2 рядки<br>другий рядок</h2> <p>Параграф 1 перед переліком: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores laboriosam <a>laudantium libero</a> magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!</p> <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, pariatur.</li> <li>Lorem ipsum dolor sit amet.</li> </ul> <p>Параграф 2 після переліку: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores laboriosam laudantium libero magnam omnis pariatur <a>tempora</a> veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!</p> <!--- h3 with p & hr ---> <h3>Заголовок h3 в 2 рядки<br>другий рядок</h3> <p>Параграф 1 до розподільчої лінії: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore laboriosam <a>laudantium libero</a> magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!</p> <hr> <p>Параграф 2 після розподільчої лінії: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, laboriosam laudantium libero magnam omnis pariatur <a>tempora</a> veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!</p> <!--- h4 with p ---> <h4>Заголовок h4 в 2 рядки<br>другий рядок</h4> <p>Параграф 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores eaque fugiat laboriosam <a>laudantium libero</a> magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident reiciendis!</p> <!--- h5 with p ---> <h5>Заголовок h5 в 2 рядки<br>другий рядок</h5> <p>Параграф 1: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, dolore dolores eaque fugiat laboriosam magnam omnis pariatur tempora veritatis voluptas? Cumque distinctio earum obcaecati provident <a>laudantium libero</a> reiciendis!</p> <!--- text format example ---> <p><em>em example</em>, <i>i example</i>, <s>s example</s>, <del>del example</del>, <abbr title="abbr">abbr example</abbr>, <code>code example</code>, <kbd>kbd example</kbd>, <samp>samp example</samp>, <mark>mark example</mark>, <sub>sub</sub> example, <sup>sup</sup> example, <b>b example</b>, <strong>strong example</strong>, <small>small example</small>, <pre>pre example</pre></p> <!--- blockquote examole ---> <blockquote> Блок цитата: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aperiam facere neque, sequi voluptatum. Ad autem, culpa cum explicabo, itaque laudantium nesciunt nulla, perferendis quaerat. </blockquote>
Сітка
Сітка UI розрахована на 12 стовпців. Елемент з класом UI_grid
матиме display: grid
, тож
може містити як один, так і декілька рядків зі стовпцями з класом UI_col
. На малих пристроях усі
стовпці трансформуються в рядки.
- Вигляд
-
1112103948576612
- Код
-
<!--- grid example ---> <div class="UI_grid"> <div class="UI_col-1">1</div> <div class="UI_col-11">11</div> <div class="UI_col-2">2</div> <div class="UI_col-10">10</div> <div class="UI_col-3">3</div> <div class="UI_col-9">9</div> <div class="UI_col-4">4</div> <div class="UI_col-8">8</div> <div class="UI_col-5">5</div> <div class="UI_col-7">7</div> <div class="UI_col-6">6</div> <div class="UI_col-6">6</div> <div class="UI_col-12">12</div> </div>
Допоміжні CSS-класи
UI_noprint
— Якщо не хочете, щоб елемент був надрукований.
UI_external
та UI_blank
— Щоб користувач бачив, що посилання веде на сторонній
ресурс або буде відкрите в новому вікні чи вкладці. Приклад:
class="UI_external",
class="UI_blank" або target="_blank"
UI_nowrap
— Щоб текст всередині елемента не переносився на новий рядок. Але не забувайте, на
малих пристроях це може спричинити поперечний скролл.
UI_arrow-right
, UI_angle-right
, UI_angle-down
, UI_angle-up
— Псевдоелементом ::after в кнопках та посиланнях з цим класом буде стрілка праворуч або куточок з
відповідним напрямом. Приклад:
UI_arrow-right, UI_angle-right, UI_angle-down, UI_angle-up
UI_size-xl
, UI_size-l
, UI_size-s
та UI_size-xs
—
Використовуйте для того, щоб змінювати розміри будь-яких елементів з їхнім вмістом. Приклад:
UI_primary
, UI_accent
та UI_contour
— Декілька стилів, що можна
застосувати до: кнопок, табів, таблиць, компонентів форми, меню. Деякі компоненти та елементи UI, наприклад
елементи форми, по замовчуванню мають стиль primary
. Приклад:
UI_disabled
— Заблокує
елемент та його нащадків. Приклад:
Цей блок заблоковано
. Користувач не може взаємодіяти з посиланнями, кнопками та будь-якими інтерактивними
заблокованими елементами. Але може, наприклад, виділити та скопіювати текст.
Заблоковане посилання
UI_process
— Заблокує
елемент та додасть ::after
псевдоелемент зі
спінером. Це знадобиться, наприклад, на кнопках відправлення форми, щоб заблокувати елемент та водночас показати
користувачу, що треба зачекати. Приклад:
чи ☕ По каві
UI_full-width
— Розтягне
елемент на всю ширину батьківського елемента. Приклад:
UI_align-l
— Вирівняти текст та елементи по лівій стороні. Приклад:
Lorem ipsum dolor sit amet.
UI_align-r
— Вирівняти текст та елементи по правій стороні. Приклад:
Lorem ipsum dolor sit amet.
UI_align-c
— Вирівняти текст та елементи по центру. Приклад:
Lorem ipsum dolor sit amet.
UI_scrollbar
— Стилізує scrollbar. Приклад:
UI_no-scrollbar
— Ховає scrollbar. Приклад:
Повідомлення
Наразі в UI є 5 типів повідомлень. За замовчуванням повідомлення інлайнові, з шириною, що визначається шириною
контенту всередині. Використовуйте клас UI_full-width
, щоб розтягнути
повідомлення на всю
ширину батьківського елемента. Розмір повідомлення можна визначати класами UI_xl-size
, UI_l-size
,
UI_size-s
та UI_size-xs
.
- Вигляд
- Код
-
<div class="UI_notice-error"> <h5>Header</h5> <p>class="UI_notice-error"</p> <hr> <a>Test link</a> </div> <div class="UI_notice-warning"> <h5>Header</h5> <p>class="UI_notice-warning"</p> <hr> <a>Test link</a> </div> <div class="UI_notice-success"> <h5>Header</h5> <p>class="UI_notice-success"</p> <hr> <a>Test link</a> </div> <div class="UI_notice-info"> <h5>Header</h5> <p>class="UI_notice-info"</p> <hr> <a>Test link</a> </div> <div class="UI_notice-process"> <h5>Header</h5> <p>class="UI_notice-process"</p> <hr> <a>Test link</a> </div>
Таблиці
Таблиці можуть бути великими та складними, а дані в них досить об'ємними. Користуйтеся
class="UI_table"
для таблиць, щоб на малих екранах пристроїв структура таблиць залишалась цілісною,
а продивлюватись їх можна було завдяки горизонтальній прокрутці. Зараз це найбільш вдале рішення для таблиць.
- Вигляд
-
Планета Діаметр Наклон вісі Супутники Висновок: Ми — космічний пил..) Меркурій 4879,4 ~0,01 0 Венера 12104 177,36 2 Земля 12742 23,439281 1 - Код
-
<table class="UI_table"> <thead> <tr> <th>Планета</th> <th>Діаметр</th> <th>Наклон вісі</th> <th>Супутники</th> </tr> </thead> <tfoot> <tr> <td colspan="4">Висновок: Ми — космічний пил..)</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>
Форми
В UI передбачено стилізацію елементів форми. Дотримуйтесь простих правил розмітки форм UI. Для елементів форми в
UI
передбачені CSS-класи (див. вкладку Код
). Для елементів форм, які важко стилізуються і не
дуже зручні для використання, UI обгортає
в компоненти форми передбачені в методах UI. Елементи форми в UI можуть бути звичайними
(блоковими за замовчуванням) та інлайновими.
Допоміжні класи елементів форми
UI_focus-form
, UI_invalid-form
, UI_readonly-form
та
UI_disabled-form
стилізують елемент форми відповідно до статусу. Можна застосувати один з цих
класів до елемента форми, щоб стилізувати тільки його, або до групи
елементів чи компоненту, щоб стилізувати всі вкладені
елементи. Поля та елементи форми :focus
, :invalid
, :read-only
та :disabled
будуть стилізовані за відповідними правилами цих класів.
UI_primary
, UI_accent
та UI_contour
cтилізують елемент форми
відповідно до теми. Елементи форми по замовчуванню мають тему primary
. Ці класи також можна застосовувати
окремо до елементу, групи або компоненту.
UI_size-xl
, UI_size-l
, UI_size-s
та UI_size-xs
змінюють
розмір елемента форми, всі елементи групи або компоненту.
UI_required-form
застосовуйте до <label>Напис до поля</label>
, а
UI додасть зірочку до напису. Якщо застосувати цей клас до полів форми, ці поля будуть стилізовані як :required
.
І навпаки, поля :required
будуть стилізовані правилами цього класу.
Звичайні елементи форми
За замовчуванням елементи поводяться як блокові (display: block) та займають всю доступну ширину.
- Вигляд
-
Input type="text"
Input type="text" readonly
Input type="text" disabled
Input type="text" invalid
Textarea
Simple select
Select with class "UI_Select"
Simple multiple select
Select multiple with class "UI_Select"
Simple input type="number"
Input type="number" with class "UI_InputNumber"
Simple input type="file" multiple
Input type="file" multiple with class "UI_InputFile"
Simple input type="range"
Input type="range" with class "UI_InputRange"
CheckboxRadio
- Код
-
<!--- input type="text" ---> Input type="text" <input type="text" class="UI_input" placeholder="Placeholder"> <!--- input type="text" readonly ---> Input type="text" readonly <input type="text" class="UI_input" placeholder="Placeholder" readonly> <!--- input type="text" disabled ---> Input type="text" disabled <input type="text" class="UI_input" placeholder="Placeholder" disabled> <!--- input type="text" required ---> <label class="UI_required-form">Input type="text" required</label> <input type="text" class="UI_input" placeholder="Required field" value="Required value" required> <!--- input type="text" invalid ---> Input type="text" invalid <input type="text" class="UI_input UI_invalid-form" placeholder="Placeholder"> <!--- textarea ---> Textarea <textarea class="UI_textarea" placeholder="Placeholder"></textarea> <!--- simple select ---> Simple select <select class="UI_select"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> <!--- select with class "UI_Select" ---> Select with class "UI_Select" <select class="UI_Select"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> <!--- simple multiple select ---> Simple multiple select <select class="UI_select" multiple> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> <option selected>Option 4</option> <option>Option 5</option> </select> <!--- select multiple with class "UI_Select" ---> Select multiple with class "UI_Select" <select class="UI_Select" multiple> <option>Option 1</option> <option selected>Option 2</option> <option>Option 3</option> <option selected>Option 4</option> <option>Option 5</option> </select> <!--- simple input type="number" ---> Simple input type="number" <input type="number" class="UI_input" min="0" max="6"> <!--- input type="number" with class "UI_InputNumber" ---> Input type="number" with class "UI_InputNumber" <input type="number" class="UI_InputNumber" min="0" max="6"> <!--- simple input type="file" multiple ---> Simple input type="file" multiple <input type="file" class="UI_input" multiple> <!--- input type="file" multiple with class "UI_InputFile" ---> Input type="file" multiple with class "UI_InputFile" <input type="file" class="UI_InputFile" multiple> <!--- simple input type="range" ---> Simple input type="range" <input type="range" class="UI_range" min="0" max="100" step="1" value="0"> <!--- input type="range" with class "UI_InputRange" ---> Input type="range" with class "UI_InputRange" <input type="range" class="UI_InputRange" min="0" max="100" step="1" value="0"> <!--- checkbox ---> Checkbox <label class="UI_checkbox"> <input type="checkbox" disabled checked> <span class="UI_checkmark"></span> Disabled checked </label> <label class="UI_checkbox"> <input type="checkbox" checked> <span class="UI_checkmark"></span> Option one </label> <label class="UI_checkbox"> <input type="checkbox"> <span class="UI_checkmark"></span> Option two </label> <!--- radio ---> Radio <label class="UI_radio"> <input type="radio" disabled checked> <span class="UI_checkmark"></span> Disabled checked </label> <label class="UI_radio"> <input type="radio" checked> <span class="UI_checkmark"></span> Option one </label> <label class="UI_radio"> <input type="radio"> <span class="UI_checkmark"></span> Option two </label>
Інлайнові елементи форми
Кнопки — типові інлайнові елементи. Вони такі за замовчуванням. Інлайнові елементи форми мають ширину, що
дорівнює максимальній ширині контенту, який вони містять. Вони поводять себе як рядкові (display: inline) та
мають відступ з правої сторони. Будь-які звичайні (блокові) елементи форми можна перетворити в інлайновий, якщо
застосувати клас UI_inline-form
. Компоненти форми та групи елементів форми з цим класом також стануть інлайновими.
- Вигляд
-
- Код
-
<!--- Simple input type="text" with class "UI_inline-form" ---> <input type="text" class="UI_input UI_inline-form" placeholder="input type=text"> <!--- Input type="number" with class "UI_inline-form UI_InputNumber" ---> <input type="number" class="UI_InputNumber UI_inline-form" min="0" max="6"> <!--- Input type="file" multiple with class "UI_inline-form UI_InputFile" ---> <input type="file" class="UI_InputFile UI_inline-form" multiple> <!--- Select multiple with class "UI_inline-form UI_Select" ---> <select class="UI_Select UI_inline-form" multiple> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> <!--- Select with class "UI_inline-form UI_Select" ---> <select class="UI_Select UI_inline-form"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> <!--- Input type="range" with class "UI_inline-form UI_InputRange" ---> <input type="range" class="UI_InputRange UI_inline-form" min="0" max="100" step="1" value="0"> <!--- Simple input type="range" with class "UI_inline-form" ---> <input type="range" class="UI_range UI_inline-form" min="0" max="100" step="1" value="0"> <!--- checkbox with class "UI_inline-form" ---> <label class="UI_checkbox UI_inline-form"> <input type="checkbox" checked> <span class="UI_checkmark"></span> Option one </label> <label class="UI_checkbox UI_inline-form"> <input type="checkbox"> <span class="UI_checkmark"></span> Option two </label> <!--- radio with class "UI_inline-form" ---> <label class="UI_radio UI_inline-form"> <input type="radio" checked> <span class="UI_checkmark"></span> Option one </label> <label class="UI_radio UI_inline-form"> <input type="radio"> <span class="UI_checkmark"></span> Option two </label>
Кнопки
Майже будь-який елемент можна зробити кнопкою. Просто додайте до елементу class="UI_button"
. За
замовчуванням всі кнопки поводяться як інлайнові, але якщо додати class="UI_full-width"
, кнопка
розтягнеться на всю ширину батьківського елементу.
- Вигляд
- a UI_button b UI_button
- Код
-
<!--- buttons ---> <input type="button" class="UI_button" value="input UI_button"> <button type="button" class="UI_button">button UI_button</button> <a class="UI_button">a UI_button</a> <div class="UI_button">div UI_button</div> <b class="UI_button">b UI_button</b> <span class="UI_button">span UI_button</span> <span class="UI_button">with icon <i class="fa-solid fa-trash-alt"></i></span> <!--- disabled button ---> <input type="submit" class="UI_button" value="disabled button" disabled> <!--- button UI_full-width ---> <button type="button" class="UI_button UI_full-width">button UI_button UI_full-width</button>
Групування елементів форми
Для групування елементів форми в HTML існує тег fieldset
, можете використовувати його. Але іноді
треба розмістити декілька елементів в один рядок так, щоб вони ефективно використовували всю наявну ширину та
були адаптивними. Просто візьміть для цього <div class="UI_fieldset">
та помістіть
в нього все необхідне. Класами UI_align-l
, UI_align-r
та UI_align-c
вирівнюйте елементи всередині групи. До речі, UI_fieldset
зручно використовувати для мініформ, якщо
застосувати цей клас до тегу form
. Написи для групи слід розміщувати за її межами.
- Вигляд
-
Fieldset group
- Код
-
<!--- Fieldset group ---> Fieldset group <div class="UI_fieldset"> <select class="UI_Select"> <option>Option1</option> <option>Option2</option> <option>Option3</option> </select> <input type="text" class="UI_input" placeholder="Example text"> <button type="button" class="UI_button">Add</button> <i class="fa-solid fa-trash-alt fa-2x"></i> </div> <!--- Fieldset group with UI_readonly-form ---> Fieldset group with UI_readonly-form <div class="UI_fieldset UI_readonly-form"> <select class="UI_Select"> <option>Option1</option> <option>Option2</option> <option>Option3</option> </select> <input type="text" class="UI_input" placeholder="Example text"> <button type="button" class="UI_button">Add</button> <i class="fa-solid fa-trash-alt fa-2x"></i> </div> <!--- Fieldset group with UI_disabled-form ---> Fieldset group with UI_disabled-form <div class="UI_fieldset UI_disabled-form"> <select class="UI_Select"> <option>Option1</option> <option>Option2</option> <option>Option3</option> </select> <input type="text" class="UI_input" placeholder="Example text"> <button type="button" class="UI_button">Add</button> <i class="fa-solid fa-trash-alt fa-2x"></i> </div> <!--- Fieldset group with UI_contour ---> Fieldset group with UI_contour <div class="UI_fieldset UI_contour"> <select class="UI_Select"> <option>Option1</option> <option>Option2</option> <option>Option3</option> </select> <input type="text" class="UI_input" placeholder="Example text"> <button type="button" class="UI_button">Add</button> <i class="fa-solid fa-trash-alt fa-2x"></i> </div> <!--- Fieldset group with UI_inline-form ---> Fieldset group with UI_inline-form <div class="UI_fieldset UI_inline-form"> <select class="UI_Select"> <option>Option1</option> <option>Option2</option> <option>Option3</option> </select> <input type="text" class="UI_input" placeholder="Example text"> <button type="button" class="UI_button">Add</button> <i class="fa-solid fa-trash-alt fa-2x"></i> </div>
Компонент форми
Буває, треба до поля прикріпити елементи керування, чи це має бути якась мініформа на кшталт пошуку. В обгортці
з класом UI_form-component
розмістіть поле/ля, кнопку/ки. Елементи з класом UI_form-component-control
всередині компоненту будуть виглядати як елементи керування. Компонент форми може містити елементи форми та
вкладені компоненти форми. До полей та кнопок в середині компонента можна не застосовувати класи елементів форми
такі як UI_input
, UI_button
та інші.
- Вигляд
-
Submit form component
Search form component
Search form component with "UI_disabled-form"
Form component with "UI_contour UI_readonly-form"
- Код
-
<!--- Submit form component ---> Submit form component <form class="UI_form-component"> <select class="UI_Select" data-select-placeholder="Add categories" data-with-search="true" multiple> <option>Category 1</option> <option>Category 2</option> <option>Category 3</option> <option>Category 4</option> <option>Category 5</option> <option>Category 6</option> <option>Category 7</option> <option>Category 8</option> <option>Category 9</option> <option>Category 10</option> </select> <button type="button">Submit</button> </form> <!--- Search form component ---> Search form component <form class="UI_form-component"> <input type="search" placeholder="Example search"> <button type="button">Search</button> </form> <!--- Search form component with "UI_disabled-form" ---> Search form component with "UI_disabled-form" <form class="UI_form-component UI_disabled-form"> <input type="search" placeholder="Example search"> <button type="button">Search</button> </form> <!--- Form component with "UI_contour UI_readonly-form" ---> Form component with "UI_contour UI_readonly-form" <div class="UI_form-component UI_contour UI_readonly-form"> <select class="UI_Select" data-open-icon="⇵"> <option>Option1</option> <option>Option2</option> <option>Option3</option> </select> <input type="text" data-lim="this, 50" placeholder="Example text"> <button type="button">Add</button> <i class="fa-solid fa-trash-alt UI_form-component-control"></i> </div> <!--- Form component with "UI_contour UI_size-s UI_inline-form" ---> Form component with "UI_contour UI_size-s UI_inline-form" <div class="UI_form-component UI_contour UI_size-s UI_inline-form"> <select class="UI_Select" data-open-icon="⤵" data-close-icon="⤴"> <option>Option1</option> <option>Option2</option> <option>Option3</option> </select> <input type="text" data-lim="this, 50" placeholder="Example text"> <button type="button">Add</button> <i class="fa-solid fa-trash-alt UI_form-component-control"></i> </div>
Методи UI
Нижче перераховані методи суперкласу UI
, що описаний та проініціалізований в файлі
UI.js
. Більшість методів UI призначені, щоб змінювати елементи на сторінці, будувати якісь
компоненти та керувати ними. Умовно методи можна поділити на хелпери
та плагіни
. Якщо перші
викликаються переважно по якійсь події (натискання кнопки чи введення в полі), то другі викликаються одразу
після завантаження сторінки, знаходять по селектору в конфігурації потрібні елементи та щось з ними роблять
(активують).
Блокування вузлів та елементів
Після завантаження сторінки з підключеним UI.js
відбувається активація деяких методів UI. Наприклад,
всі списки <ul class="UI_Menu">...</ul>
перетворяться в меню, а<dl
class="UI_Tabs">...</dl>
стануть табами. Доданий до елементу CSS-клас UI_disabled-node
забороняє опрацьовувати методам UI цей елемент та всі його дочірні елементи. Якщо такі є, UI виведе повідомлення
про них в консоль браузера. Якщо вам потрібно використовувати свій клас, що блокує методи UI або додати ще
класи, знайдіть рядок #disabledNodes = [`.UI_disabled-node`];
в файлі UI.js
та
скорегуйте масив.
Блокування може стати у пригоді, коли на сторінці використовується WYSIWYG
HTML-редактор, в якому потрібно зверстати, наприклад, вікно, що випливає (popup).
Оскільки сучасні редактори вбудовують контент, зверстаний в них, у поточний документ, під'єднані до документу
UI.css
та UI.js
також будуть працювати в вікні редактора. Річ в тому, що деякі
методи UI змінюють зміст та навіть розташування в DOM елементів, які
вини опрацьовують. В результаті існує ймовірність небажаних змін елементів перед їх збереженням. <div
id="editor" class="UI_disabled-node">
заборонить UI опрацьовувати сам елемент редактору та всі
його дочірні елементи.
Css селектори UI в сценаріях JS
Можливо вам знадобиться маніпулювати css селекторами UI у своїх сценаріях. Наприклад: динамічно помітити поле як
не валідне, додавши до нього клас UI_invalid-form
. Звичайно, ви можете це зробити якось так: field.classList.add('UI_invalid-form')
.
Щоб зменшити залежність від використання в сценаріях рядків селекторів, в UI.js
передбачена
публічна властивість UI.сss
яка представляє об'єкт. Користуйтеся полями цього об'єкту та додавайте
свої поля. Тож, приклад з додаванням класу краще записати так:
field.classList.add(UI.css.invalidForm)
.
Таби
Інтерфейс перемикання між блоками контенту за допомогою вкладок (табів) — дуже корисний компонент UI.
Якщо вкладок дуже багато, до потрібної можна скролити, — це вдале рішення для цього інтерфейсу на
малих екранах. HTML-структура списку визначень dl
бездоганно підходить для побудови цього
компоненту.
- Вигляд
-
Метод
UI.Tabs()
за замовчуванням побудує таби із<dl class="UI_Tabs">...</dl>
та відкриє перші вкладки. - Код
-
<!--- UI.Tabs() ---> <dl class="UI_Tabs"> <dt>Tab 1</dt> <dd> <h2>Content 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </dd> <dt>Tab 2</dt> <dd> <h2>Content 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </dd> </dl>
- API
-
Метод
UI.Tabs([userConf])
перетворює список визначеньdl
в таби. За замовчуванням UI трансформує всіdl
списки, в яких єclass="UI_Tabs"
. Це вже спрацювало, бо в кінці файлуUI.js
викликаноUI.Tabs()
. Метод приймає необов'язковий аргумент — літерал об'єкта з конфігурацією. Якщо конфігурація не передана, метод використає конфігурацію за замовчуванням. Така поведінка стосується також полів об'єкта конфігурації. Метод повертає екземпляркласу-будівельника
.Поля об'єкта конфігурації
Слід зазначити, що всі або окремі перераховані нижче поля, окрім
selector
, можна передати методу атрибутамиdata-
. Це дозволить конфігурувати кожний окремий екземпляр. Передані таким чином поля конфігурації вказують методу застосовувати їх з найвищим пріоритетом. Назви полів слід вказувати з префіксомdata-
в стиліkebab-case
. Приклад:{iconMail: `<i class="fa-solid fa-envelope"></i>`}
->data-icon-mail="<i class='fa-solid fa-envelope'></i>"
. Так, це спрацює..)selector
(рядок, опціонально, за замовчуванням ".UI_Tabs"). CSS-селектор або комбінація селекторів, за якою будуть знайдені елементи на сторінці. Елементи будуть відфільтровані за тегомdl
в колекцію. Саме ця колекція буде надалі опрацьована методом.showTabIndex
(ціле число, опціонально, за замовчуванням 0). Індекс вкладки, яку потрібно відкрити за замовчуванням. Зверніть увагу: індекси вкладок починаются з нуля.smartShow
(булево, опціонально, за замовчуванням "true"). Дозволено чи ні за замовчуванням відкривати вкладку, передану в рядку uri. Для цього в елементаdl
має бути id, а після хешу рядка uri, відокремлені знаком=
, передано цей id з індексом вкладки, що потрібно відкрити. Якщо таких табів багато, їх треба відокремлювати знаком&
. В рядку не повинно бути пробілів. Приклад:example.com#tabs1=2&tabs2=0
— в табі зid="tabs1"
буде відкрито третю вкладку, а зid="tabs2"
першу.
клас-будівельник
UI.Tabs()
повертає екземпляр безіменногокласу-будівельника
для подальших ланцюгових викликів допоміжних публічних методів та властивостей.Властивості та методи
класу-будівельника
- Метод
show(tabIndex [,tabs])
відкриває вкладку. Повертаєклас-будівельник
.- Аргумент
tabIndex
(ціле число, обов'язковий). Індекс вкладки, яку потрібно відкрити. Зверніть увагу: індекси вкладок починаються з нуля. - Аргумент
tabs
(HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, в якому треба відкрити вкладку. Якщо аргумент не передано, вкладкаtabIndex
буде відкрита у всіх елементах колекції.
- Аргумент
- Метод
remove()
деактивує всі активовані елементи колекції та повертає звичайний виглядdl
. Повертаєклас-будівельник
. - Властивість
get
повертає масив активованих елементів колекції. Повинен бути викликаний останнім в ланцюгу викликів.
Події
UI.Tabs()
генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на елементdl
який активується.UI.activated
компонент активовано.UI.unactivated
компонент деактивовано.UI.beforeRemove
компонент буде видалено та деактивовано.UI.removed
компонент видалено та деактивовано.UI.beforeShow
вкладку буде відкрито.event.detail.tabIndex
(ціле число) індекс вкладки.
UI.showed
вкладку відкрито.event.detail.tabIndex
(ціле число) індекс вкладки.
Поглиблений доступ
Як тільки компонент буде активовано на елементі, елемент отримає об'єктUI
. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад,myDl.UI.component
щоб отримати сам елемент компонента.
Перемикання відображення елемента
Метод UI.Toggle()
показує/приховує елемент який йому передадуть в аргументі. Цей елемент може бути
передано як HTMLElement або ідентифікатор цього елементу.
- Вигляд
-
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dignissimos doloremque ducimus et, fugiat in iure nemo odit quidem quo! Aliquid aspernatur assumenda consequuntur doloremque enim, fugiat in iure modi nihil quas quos, ratione recusandae reiciendis rem suscipit. Cum, laudantium?.
Приховати - Код
-
<!--- UI.Toggle() ---> <button type="button" class="UI_button" data-toggle="hidElem">Докладніше</button> <!--- або "повісити" опрацьовувач на подію <button type="button" class="UI_button" onclick="UI.Toggle('hidElem')">Докладніше</button> ---> <!--- або "повісити" опрацьовувач на подію в сценарії const myElem = document.getElementById(`hidElem`); button.addEventListener(`click`, () => UI.Toggle(myElem)); ---> <div id="hidElem" hidden> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae dignissimos doloremque ducimus et, fugiat in iure nemo odit quidem quo! Aliquid aspernatur assumenda consequuntur doloremque enim, fugiat in iure modi nihil quas quos, ratione recusandae reiciendis rem suscipit. Cum, laudantium?.<br> <a data-toggle="hidElem">Приховати</a> </div>
- API
-
Метод
UI.Toggle(target[, display])
перемикає відображення елементаtarget
. Щоб елемент був прихованим від самого початку, додайте йому атрибутhidden
абоdisplay: none
. Метод повертає елементtarget
. Якщо елемент не знайдено, буде видана помилкаReferenceError
.Порада
Метод можна
повісити
на елемент атрибутомdata-
та передати параметри через кому в його властивість. Приклад:data-toggle="elemId, block"
. Рядкові параметри слід передавати не в лапках. UI коректно опрацює типи (числові, булеві, this, null, undefined), а інше передасть в метод як рядок.Аргументи метода
target
(рядок або HTMLElement, обов'язковий). Елемент або ідентифікатор елемента за яким треба його знайти. Цей елемент буде показано або приховано.display
(рядок, опціонально, за замовчуванням "block"). Значення CSS-властивості "display" для видимого елемента. Прихований елемент отримуєdisplay: none
Події
UI.Toggle()
генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на елементtarget
.UI.beforeShow
елемент буде показано.UI.showed
елемент показано.UI.beforeHide
елемент буде приховано.UI.hidden
елемент приховано.
Перехід до елементу
В HTML вже давно реалізована така можливість за допомогою <a
href="#element">...</a>
. Але метод UI.GoTo()
більш гнучкий у
використанні ніж посилання, та вміє ще дещо.
- Вигляд
- Перейти до: Посилання на перший h2 в документі
- Код
-
<!--- UI.GoTo() ---> <h2 id="MyHeader">Заголовок</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" class="UI_button" data-go-to="#MyHeader">Перейти до заголовку</button> <!--- Можна "повісити" опрацьовувач на подію <button type="button" class="UI_button" onclick="UI.GoTo('#h2Header')">Перейти до заголовку</button> ---> <!--- Можна передати елемент const element = document.querySelector(`h2`); UI.GoTo(element); --->
- API
-
Використовуйте метод
UI.GoTo([target])
, щобпрокрутити
сторінку до елементу. Аргументомtarget
методу можна передати сам елемент чи селектор елемента. Якщо викликати цей метод без аргумента, він буде намагатись отримати хеш-рядок з uri тапрокрутити
сторінку до елементу, який маєid
, ідентичний рядку в хеш. Це вже працює, боUI.GoTo()
викликано в кінці файлуUI.js
. Метод повертає елемент абоundefined
, якщо елемент не знайдено.Порада
Метод можна
повісити
на елемент атрибутомdata-
та передати параметер в його властивість. Приклад:data-go-to="#elemId"
. Рядкові параметри слід передавати не в лапках. UI коректно опрацює типи (числові, булеві, this, null, undefined), а інше передасть в метод як рядок.Аргументи метода
target
(рядок чи HTMLElement, опціонально, за замовчуванням null). Селектор елемента чи елемент до якого будепрокручено
сторінку. Зверніть увагу, якщо передано селектор, метод буде намагатися знайти перший елемент в документі за цим селектором. Якщо аргумент не передано, метод намагатиметься отримати в поточному uri хеш (рядок після#
включно) та шукатиме на сторінці елемент з таким id, щобпрокрутити
сторінку до нього.
Підказка, що випливає
При наведені на елемент з навішеним
методом UI.Hint()
з'явиться підказка. Підказка може
містити буд-який контент. Немає жодних обмежень що до тегу підказки — обгортки
контенту. Однак,
підказка повинна мати клас UI_Hint
та бути розташована одразу за елементом на який навішений
метод UI.Hint()
. Тож, ви можете верстати, не порушуючи правила валідації. Контент підказки буде
доступний пошуковим ботам.
- Вигляд
-
- Підказка Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, aliquid consequuntur harum, quia voluptatem. за замовчуванням.
- Щоб сховати, цю підказку Клацни в будь-якому місці. Це стане в пригоді, наприклад, коли в підказці буде посилання або інший елемент взаємодії. треба клікнути
-
Підказка
Нумо! Ти знаєш, що робити. Клацай двічі..)
в цьому прикладі підказка ховається, якщо клацнути двічі. -
Трохи HTML в
цій підказці
Випадкове зображення
- Якщо щось потрібно пояснити Та що тут вже пояснювати..) Все стане ясно, якщо подивитись код на вкладці поруч.
- Код
-
<!--- UI.Hint() ---> <ol> <li> <mark data-hint="this">Підказка</mark> <span class="UI_Hint"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, aliquid consequuntur harum, quia voluptatem. </span> за замовчуванням. </li> <li> Щоб сховати, <mark data-hint="this, click">цю підказку</mark> <i class="UI_Hint"> Клацни в будь-якому місці. Це стане в пригоді, наприклад, коли в підказці буде <a>посилання</a> або інший елемент взаємодії. </i> треба клікнути </li> <li> <mark data-hint="this, dblclick">Підказка</mark> <pre class="UI_Hint"> Нумо! Ти знаєш, що робити. Клацай двічі..) </pre> в цьому прикладі підказка ховається, якщо клацнути двічі. </li> <li> Трохи HTML в <mark data-hint="this">цій підказці</mark> <div class="UI_Hint"> <h4>Випадкове зображення</h4> <img src="https://picsum.photos/250" alt="Random Image"> </div> </li> <li> Якщо щось потрібно пояснити <i class="fa-solid fa-question-circle" data-hint="this"></i> <span class="UI_Hint"> Та що тут вже пояснювати..) Все стане ясно, якщо подивитись код на вкладці поруч. </span> </li> </ol> <!--- або "повісити" опрацьовувач на подію <i class="fa-solid fa-question-circle" onmouseover="UI.Hint(this)"></i> <span class="UI_Hint"> Але все ж таки, в верстці краще використовувати виклик через "data-" атрибут 😉 </span> --->
- API
-
Метод
UI.Hint(el[, hideEvent])
показує та ховає підказку, що випливає. Аргументel
визначає елемент, біля якого буде показана підказка. Сам елемент підказки має знаходитись одразу заel
та мати класUI_Hint
. Метод слід застосовувати як опрацьовувач події на елементіel
. Метод повертає екземпляркласу-будівельника
.Порада
Метод можна
повісити
на елемент атрибутомdata-
та передати параметри через кому в його властивість. Приклад:data-hint="this, click"
. Рядкові параметри слід передавати не в лапках. UI коректно опрацює типи (числові, булеві, this, null, undefined), а інше передасть в метод як рядок.Аргументи метода
el
(HTMLElement, обов'язковий). Елемент або посилання на нього.hideEvent
(рядок, опціонально, за замовчуванням "mouseout"). Подія, що сховає підказку. Цю подію слід передавати рядком без префіксуon
. Приклад:UI.Hint(this, 'click')
. В цьому випадку підказка зникне тільки після клацання по ній чи будь-де. За замовчуванням підказка зникає, коли з елементуel
буде прибрано курсор.Список стандартних HTML подій
клас-будівельник
UI.Hint()
повертає екземпляр безіменногокласу-будівельника
для подальших ланцюгових викликів допоміжних публічних методів та властивостей.Властивості та методи
класу-будівельника
- Метод
setPosition([e])
визначає розташування підказки. Повертаєклас-будівельник
.- Аргумент
e
(Event, опціонально, за замовчуваннямel
). Об'єкт події на елементіel
.
- Аргумент
- Метод
show()
показує підказку. Повертаєклас-будівельник
. - Метод
hide()
ховає підказку. Повертаєклас-будівельник
. - Властивість
get
повертає елементel
, який використовуєUI.Hint()
. Повинен бути викликаний останнім в ланцюгу викликів.
Події
UI.Hint()
генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на елементel
.UI.beforeShow
підказку буде показано.UI.showed
підказку показано.UI.beforeHide
підказку буде приховано.UI.hidden
підказку приховано.
Поглиблений доступ
Як тільки компонент буде активовано на елементі, елемент отримає об'єктUI
. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад,myTrigger.UI.hint
щоб отримати елемент підказки.
Повідомлення
Метод UI.Notice()
— гарна альтернатива стандартним, сумним alert()
, prompt()
та confirm()
. Метод використовує класи повідомлень, але
також може викристовувати ваші класи.
- Вигляд
- Код
-
<!--- UI.Notice() ---> <button type="button" class="UI_button" id="goFeed">Погодувати Мурчика</button> <script> let feedTheMurchik = () => { UI.Notice({ message: `🐱 омномном...`, delay: 3000, callback: () => { UI.Notice({ message: `Мурчика погодовано 😺`, delay: 2000, className: `UI_notice-success` }); } }); } document.querySelector(`#goFeed`).addEventListener(`click`, feedTheMurchik); </script>
- API
-
Метод
UI.Notice([userConf])
приймає необов'язковий аргумент — літерал об'єкта з конфігурацією. Якщо конфігурація не передана, плагін використає конфігурацію за замовчуванням. Така поведінка стосується також полів об'єкта конфігурації. Одразу після виклику метод активує (створює та показує) повідомлення. Метод повертає екземпляркласу-будівельника
.Поля конфігурації метода
message
(рядок, опціонально, за замовчуванням "processing..."). Текст або HTML в повідомленні.className
(рядок, опціонально, за замовчуванням "UI_notice-process"). Один або декілька CSS-класів, які будуть застосовані до елемента підказки. Зручно використовувати один з класів повідомлень UI.delay
(ціле число або null, опціонально, за замовчуванням null). Скільки мілісекунд буде показане (активне) повідомлення перед тим, як зникне. Якщо передано 0 або null, повідомлення буде активне, поки не отримає викликUI.Notice().remove()
або виклик зdelay
більше нуляUI.Notice({delay: 200})
.callback
(функція або null, опціонально, за замовчуванням null). Функція, яка буде викликана після того, як часdelay
сплине. Зверни увагу, якщоdelay
0 або null, функція ніколи не буде викликана.callback
може бути асинхронною функцією.
клас-будівельник
UI.Notice()
повертає екземпляр безіменногокласу-будівельника
для подальших ланцюгових викликів допоміжних публічних методів та властивостей.Властивості та методи
класу-будівельника
- Метод
insert(...nodes)
вставляє елемент/елементи в повідомлення. Перед вставкою контент повідомлення буде видалений. Повертаєклас-будівельник
. - Метод
remove()
приховує повідомлення. Повертаєклас-будівельник
. - Властивість
get
повертає динамічно створений елемент повідомленняUI.Notice()
. Повинен бути викликаний останнім в ланцюгу викликів.
Події
UI.Notice()
генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на елемент повідомленняUI.Notice().get.addEventListener(...)
.UI.created
повідомлення створено.UI.activated
повідомлення активовано (показано).UI.beforeInsert
в повідомлення буде вставлено елемент.UI.inserted
в повідомлення вставлено елемент.UI.beforeRemove
повідомлення буде видалено.UI.removed
повідомлення видалено.
Поглиблений доступ
Як тільки компонент буде активовано, ви зможете мати доступ до об'єктаUI
. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад,UI.Notice({...}).get.UI.component
щоб активувати компонент та одразу отримати елемент компонента.
Вікно, що випливає
Будь-які елементи з CSS-класом UI_Popup
та унікальним id
UI перетворить на вікна, що
випливають. Цей елемент може містити що завгодно. Зміст не буде приховано від пошукових ботів. За замовчуванням
такі вікна приховані на сторінці, а щоб показати вікно, треба викликати метод з переданим id
вікна.
- Вигляд
-
Посилання
Привіт!
Вікно активоване кнопкою.Вікно активоване посиланням. - Код
-
<!--- UI.Popup() ---> <button type="button" class="UI_button" data-popup="pop1">Кнопка</button> <a data-popup="pop2">Посилання</a> <!--- або "повісити" опрацьовувач на подію <button type="button" class="UI_button" onclick="UI.Popup('pop1')">Кнопка</button> <a onclick="UI.Popup('pop2')">Посилання</a> ---> <div id="pop1" class="UI_Popup"> <h3>Привіт!</h3> Вікно активоване кнопкою. </div> <div id="pop2" class="UI_Popup"> Вікно активоване посиланням. </div>
- API
-
Метод
UI.Popup([id])
приймає єдиний необов'язковий аргумент —id
елемента, який треба показати як вікно, що випливає. Викликаний без аргументу метод знайде всі елементи з класомUI_Popup
, опрацює їх та активує. Це вже зроблено, боUI.Popup()
викликано в кінці файлуUI.js
. Вам залишилось лише передатиid
та показати вікно. Метод повертає екземпляркласу-будівельника
.Порада
Метод можна
повісити
на елемент атрибутомdata-
та передати параметер в його властивість. Приклад:data-popup="elemId"
. Рядкові параметри слід передавати не в лапках. UI коректно опрацює типи (числові, булеві, this, null, undefined), а інше передасть в метод як рядок.Аргументи метода
id
(рядок, необов'зковий, за замовчуванням null). Елемент з цимid
та класомUI_Popup
буде показано як вікно, що випливає.
клас-будівельник
UI.Popup()
повертає екземпляр безіменногокласу-будівельника
для подальших ланцюгових викликів допоміжних публічних методів та властивостей.Властивості та методи
класу-будівельника
- Метод
show()
показує вікно зid
та класомUI_Popup
. Повертаєклас-будівельник
. - Метод
hide()
ховає всі вікна. Повертаєклас-будівельник
. - Властивість
get
повертає масив — колекцію елементів, які активувавUI.Popup()
. Повинен бути викликаним останнім в ланцюгу викликів.
Події
UI.Popup()
генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на елемент вікнаmyPopup.addEventListener(...)
.UI.activated
вікно активовано.UI.unactivated
вікно деактивовано.UI.beforeShow
вікно буде показано.UI.showed
вікно показано.UI.beforeHide
вікно буде приховано.UI.hidden
вікно приховано.
Поглиблений доступ
Як тільки компонент буде активовано, елемент вікна отримає об'єктUI
. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад,myPopup.UI.closeButton
щоб отримати елемент кнопки що ховає вікно.
Обмеження рядка вводу
Метод UI.Lim()
показує, скільки символів залишилось ввести до обмеження. Коли обмеження буде
досягнуто, метод не дасть можливість вводити більше.
- Вигляд
- Код
-
<!--- UI.Lim() input type="text" ---> <input type="text" class="UI_input" placeholder="Почни вводити текст" data-lim="this, 75"> <!--- UI.Lim() textarea ---> <textarea class="UI_textarea" placeholder="Почни вводити текст" data-lim="this, 75"></textarea> <!--- або "повісити" опрацьовувач на подію <input type="text" class="UI_input" placeholder="Почни вводити текст" oninput="UI.Lim(this, 75)"> <textarea class="UI_textarea" placeholder="Почни вводити текст" oninput="UI.Lim(this, 75)"></textarea> --->
- API
-
Метод
UI.Lim(field [, limit])
обмежує ввод символів в полеfield
доlimit
та показує користувачу, скільки ще можна ввести. Слід зазначити, що метод опрацьовує тільки текстові поля<input type="text">
та<textarea>...</textarea>
, зверстані за правилами UI, як зазначено в розділіФорми
. Метод повертає екземпляркласу-будівельника
.Порада
Метод можна
повісити
на елемент атрибутомdata-
та передати параметри через кому в його властивість. Приклад:data-lim="this, 50"
. Рядкові параметри слід передавати не в лапках. UI коректно опрацює типи (числові, булеві, this, null, undefined), а інше передасть в метод як рядок.Аргументи метода
field
(HTMLElement, обов'язковий). Елемент (поле) або посилання на нього.limit
(ціле число, опціонально, за замовчуванням 50). Скільки символів можна вводити.
клас-будівельник
UI.Lim()
повертає екземпляр безіменногокласу-будівельника
для подальших ланцюгових викликів допоміжних публічних методів та властивостей.Властивості та методи
класу-будівельника
- Метод
run()
показує лічильник, опрацьовує рядок в поліfield
та обрізає до лімітуlimit
. Повертаєклас-будівельник
. - Метод
show()
показує лічильник та встановлює фокус в поліfield
. Повертаєклас-будівельник
. - Метод
hide()
ховає лічильник. Повертаєклас-будівельник
. - Метод
cut()
обрізає рядок в поліfield
до лімітуlimit
. Повертаєклас-будівельник
. - Метод
remove()
видаляє лічильник символів. Повертаєклас-будівельник
. - Властивість
get
повертає полеfield
, яке використовуєUI.Lim()
. Повинен бути викликаний останнім в ланцюгу викликів.
Події
UI.Lim()
генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на елементfield
.UI.created
лічильник створено.UI.beforeShow
лічильник буде показано.UI.showed
лічильник показано.UI.beforeHide
лічильник буде приховано.UI.hidden
лічильник приховано.UI.beforeCut
рядок в полі буде обрізано.UI.cut
рядок в полі обрізано.UI.beforeRemove
лічильник буде видалено.UI.removed
лічильник видалено.
Поглиблений доступ
Як тільки компонент буде активовано на елементі, елемент отримає об'єктUI
. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад,myTextarea.UI.counter
щоб отримати елемент лічильника.
Input type="file"
Метод UI.InputFile()
будує компонент форми з зручним
інтерфейсом навколо звичайного поля <input type="file">
та забезпечує управління
полем через цей компонент.
- Вигляд
- Код
-
<!--- UI.InputFile() Input type="file" multiple ---> <input type="file" class="UI_InputFile" data-placeholder="Choose several files" multiple> <!--- UI.InputFile() Inline input type="file" ---> <input type="file" class="UI_InputFile UI_inline-form">
- API
-
Метод
UI.InputFile([userConf])
за замовчуванням опрацює всі<input type="file">
з класомUI_InputFile
. Це вже спрацювало, бо в кінці файлуUI.js
викликаноUI.InputFile()
. Метод приймає необов'язковий аргумент — літерал об'єкта з конфігурацією. Якщо конфігурація не передана, метод використає конфігурацію за замовчуванням. Така поведінка стосується також полей об'єкту конфігурації. Метод повертає екземпляркласу-будівельника
.Поля об'єкту конфігурації
Слід зазначити, що всі або окремі перераховані нижче поля, окрім
selector
, можна передати методу атрибутамиdata-
. Це дозволить конфігурувати кожен окремий екземпляр. Передані таким чином поля конфігурації вказують методу застосовувати їх з найвищим пріоритетом. Назви полів слід вказувати з префіксомdata-
в стиліkebab-case
. Приклад:{iconMail: `<i class="fa-solid fa-envelope"></i>`}
->data-icon-mail="<i class='fa-solid fa-envelope'></i>"
. Так, це спрацює..)selector
(рядок, опціонально, за замовчуванням ".UI_InputFile"). CSS-селектор або комбінація селекторів, за якою будуть знайдені елементи на сторінці. Елементи будуть відфільтровані за тегомinput type="file"
в колекцію. Саме ця колекція буде надалі опрацьована методом.placeholder
(рядок, опціонально, за замовчуванням "Choose a file"). Текст в полі компонента, якщо файл не обрано.choiceIcon
(рядок, опціонально, за замовчуванням "<i class='fa-solid fa-folder-open'></i>"). Текст або HTML-іконки обрання файла/лів.
клас-будівельник
UI.InputFile()
повертає екземпляр безіменногокласу-будівельника
для подальших ланцюгових викликів допоміжних публічних методів та властивостей.Властивості та методи
класу-будівельника
- Метод
render([input])
Метод отримує обрані в поліinput
файли та показує їх в компоненті. Повертаєклас-будівельник
.- Аргумент
input
(HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
- Аргумент
- Метод
remove()
деактивує всі активовані елементи колекції та повертає звичайний вигляд<input type="file">
. Повертаєклас-будівельник
. - Властивість
get
повертає масив активованих елементів колекції. Повинен бути викликаний останнім в ланцюгу викликів.
Події
UI.InputFile()
генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на<input type="file">
на якому активовано компонент.UI.activated
компонент активовано.UI.unactivated
компонент деактивовано.UI.beforeRender
обрані файли будуть показані у компоненті.UI.rendered
обрані файли показані у компоненті.UI.beforeRemove
компонент буде видалено та деактивовано.UI.removed
компонент видалено та деактивовано.
Поглиблений доступ
Як тільки компонент буде активовано на елементі, елемент отримає об'єктUI
. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад,myInput.UI.component
щоб отримати сам елемент компонента.
Input type="range"
Метод UI.InputRange()
додасть до полів <input type="range">
з класом
UI_InputRange
інформаційний елемент.
- Вигляд
- Код
-
<!--- UI.InputRange() Input type="range" ---> <input type="range" class="UI_InputRange" min="0" max="10" step="1" value="0"> <!--- UI.InputRange() Inline input type="range" ---> <input type="range" class="UI_InputRange UI_inline-form" min="0" max="10" step="1" value="0">
- API
-
Метод
UI.InputRange([userConf])
за замовчуванням опрацює всі<input type="range">
з класомUI_InputRange
. Це вже спрацювало, бо в кінці файлуUI.js
викликаноUI.InputRange()
. Метод приймає необов'язковий аргумент — літерал об'єкта з конфігурацією. Якщо конфігурація не передана, метод використає конфігурацію за замовчуванням. Така поведінка стосується також полей об'єкту конфігурації. Метод повертає екземпляркласу-будівельника
.Поля об'єкту конфігурації
selector
(рядок, опціонально, за замовчуванням ".UI_InputRange"). CSS-селектор або комбінація селекторів, за якою будуть знайдені елементи на сторінці. Елементи будуть відфільтровані за тегомinput type="range"
в колекцію. Саме ця колекція буде надалі опрацьована методом.
клас-будівельник
UI.InputRange()
повертає екземпляр безіменногокласу-будівельника
для подальших ланцюгових викликів допоміжних публічних методів та властивостей.Властивості та методи
класу-будівельника
- Метод
remove()
деактивує всі активовані елементи колекції та повертає звичайний вигляд<input type="range">
. Повертаєклас-будівельник
. - Властивість
get
повертає масив активованих елементів колекції. Повинен бути викликаний останнім в ланцюгу викликів.
Події
UI.InputRange()
генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на<input type="range">
на якому активовано компонент.UI.activated
компонент активовано.UI.unactivated
компонент деактивовано.UI.beforeRender
обране значення буде показано у компоненті.UI.rendered
обране значення буде показано у компоненті.UI.beforeRemove
компонент буде видалено та деактивовано.UI.removed
компонент видалено та деактивовано.
Поглиблений доступ
Як тільки компонент буде активовано на елементі, елемент отримає об'єктUI
. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад,myInput.UI.infobox
щоб отримати інформаційний елемент компонента.
Input type="number"
Метод UI.InputNumber()
будує компонент форми зі зручним
інтерфейсом навколо звичайного поля <input type="number">
та забезпечує управління
полем через цей компонент.
- Вигляд
- Код
-
<!--- UI.InputNumber() Input type="number" ---> <input type="number" class="UI_InputNumber" min="0" max="6"> <!--- UI.InputNumber() Inline input type="number" ---> <input type="number" class="UI_InputNumber UI_inline-form" min="-6" max="6" step="2">
- API
-
Метод
UI.InputNumber([userConf])
за замовчуванням опрацює всі<input type="number">
з класомUI_InputNumber
. Це вже спрацювало, бо в кінці файлуUI.js
викликаноUI.InputNumber()
. Метод приймає необов'язковий аргумент — літерал об'єкта з конфігурацією. Якщо конфігурація не передана, метод використає конфігурацію за замовчуванням. Така поведінка стосується також полей об'єкту конфігурації. Метод повертає екземпляркласу-будівельника
.Поля об'єкту конфігурації
Слід зазначити, що всі або окремі перераховані нижче поля, окрім
selector
, можна передати методу атрибутамиdata-
. Це дозволить конфігурувати кожен окремий екземпляр. Передані таким чином поля конфігурації вказують методу застосовувати їх з найвищим пріоритетом. Назви полів слід вказувати з префіксомdata-
в стиліkebab-case
. Приклад:{iconMail: `<i class="fa-solid fa-envelope"></i>`}
->data-icon-mail="<i class='fa-solid fa-envelope'></i>"
. Так, це спрацює..)selector
(рядок, опціонально, за замовчуванням ".UI_InputNumber"). CSS-селектор або комбінація селекторів за якою будуть знайдені елементи на сторінці. Елементи будуть відфільтровані за тегомinput type="number"
в колекцію. Саме ця колекція буде надалі опрацьована методом.incIcon
(рядок, опціонально, за замовчуванням "<i class='fa-solid fa-plus'></i>"). Іконка на кнопці додавання. Може містити HTML.decIcon
(рядок, опціонально, за замовчуванням "<i class='fa-solid fa-minus'></i>"). Іконка на кнопці віднімання. Може містити HTML.title
(рядок, опціонально, за замовчуванням "Put the cursor in the field and scroll it ;)"). Текст атрибутуtitle
компонента. Спеціальні символи слід екранувати.
клас-будівельник
UI.InputNumber()
повертає екземпляр безіменногокласу-будівельника
для подальших ланцюгових викликів допоміжних публічних методів та властивостей.Властивості та методи
класу-будівельника
- Метод
setVal(action [, input])
В залежності від аргументуaction
, метод додає чи віднімає значення поляinput
на крок, який визначено атрибутомstep
, чи одиницю. Повертаєклас-будівельник
.- Аргумент
action
(рядок, обов'язковий, "inc" або "dec"). Додати чи відняти на крок, визначиний в атрибутіstep
поля. - Аргумент
input
(HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
- Аргумент
- Метод
remove()
деактивує всі активовані елементи колекції та повертає звичайний вигляд<input type="number">
. Повертаєклас-будівельник
. - Властивість
get
повертає масив активованих елементів колекції. Повинен бути викликаний останнім в ланцюгу викликів.
Події
UI.InputNumber()
генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на<input type="number">
на якому активовано компонент.UI.activated
компонент активовано.UI.unactivated
компонент деактивовано.UI.beforeSetVal
значення буде встановлено.UI.setVal
значення встановлено.UI.beforeInc
значення на крок меньше буде встановлено.UI.inc
значення на крок меньше встановлено.UI.beforeDec
значення на крок більше буде встановлено.UI.dec
значення на крок більше встановлено.UI.beforeRemove
компонент буде видалено та деактивовано.UI.removed
компонент видалено та деактивовано.
Поглиблений доступ
Як тільки компонент буде активовано на елементі, елемент отримає об'єктUI
. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад,myInput.UI.decButton
щоб отримати елемент кнопки зменшення значення.
Список, що випадає
Метод UI.Select()
будує компонент форми зі зручним
інтерфейсом навколо звичайного поля <select>...</select>
та забезпечує управління
полем через цей компонент.
- Вигляд
- Код
-
<!--- UI.Select() Multiple select with search ---> <select class="UI_Select" id="mySelect" data-with-search="true" data-select-placeholder="Шукай та обирай своїх героїв..)" data-search-placeholder="Наприклад, за запитом "magic" знайдеться "Doctor Strange"" multiple> <option data-find-of="water swim" value="aquaman">Aquaman</option> <option data-find-of="gall" value="asterix">Asterix</option> <option data-find-of="fly" value="batman">Batman</option> <option data-find-of="jump" value="black panther">Black Panther</option> <option data-find-of="fly power" value="captain america">Captain America</option> <option data-find-of="fly power" value="captain marvel">Captain Marvel</option> <option data-find-of="magic" value="doctor strange">Doctor Strange</option> <option data-find-of="team" value="guardians of the galaxy">Guardians of the Galaxy</option> <option data-find-of="rage" value="hellboy">Hellboy</option> <option data-find-of="antihero" value="robin">Robin</option> <option data-find-of="fly power" value="superman">Superman</option> <option data-find-of="jump swim team" value="tmnt">Teenage Mutant Ninja Turtles</option> <option data-find-of="power" value="thor">Thor</option> </select> <!--- UI.Select() Simple inline select ---> <select class="UI_Select UI_inline-form"> <option value="aquaman">Aquaman</option> <option value="asterix">Asterix</option> <option value="batman">Batman</option> <option value="black panther">Black Panther</option> <option value="captain america">Captain America</option> <option value="captain marvel">Captain Marvel</option> <option value="doctor strange">Doctor Strange</option> <option value="guardians of the galaxy">Guardians of the Galaxy</option> <option value="hellboy">Hellboy</option> <option value="robin">Robin</option> <option value="superman">Superman</option> <option value="tmnt">Teenage Mutant Ninja Turtles</option> <option value="thor">Thor</option> </select> <!--- UI.Select() with data-content attributes ---> <select class="UI_Select UI_inline-form" data-select-placeholder=""> <option data-content="<i class='fa-brands fa-instagram'></i> Instagram" value="instagram"></option> <option data-content="<i class='fa-brands fa-facebook'></i> Facebook" value="facebook"></option> <option data-content="<i class='fa-brands fa-twitter'></i> Twitter" value="twitter"></option> <option data-content="<i class='fa-brands fa-youtube'></i> You Tube" value="youtube"></option> <option value="none">I don't have an account</option> </select> <script> // Динамічно отримувати значення multiple поля let select = document.querySelector('#mySelect'); select.addEventListener('change', () => { console.log(select.UI.value); // Array [ "Aquaman", "Asterix" ] }); </script>
- API
-
Метод
UI.Select([userConf])
за замовчуванням опрацює всі<select>...</select>
з класомUI_Select
. Це вже спрацювало, бо в кінці файлуUI.js
викликаноUI.Select()
.Метод приймає необов'язковий аргумент — літерал об'єкта з конфігурацією. Якщо конфігурація не передана, метод використає конфігурацію за замовчуванням. Така поведінка стосується також полей об'єкту конфігурації. Метод повертає екземпляркласу-будівельника
.На жаль, браузери не підтримують HTML в
option
списків що випадають. Але оскількиUI.Select()
будує компонент навколо звичайногоselect
, ви можете передати атрибутомdata-content
навіть HTML. Приклад:<option data-content="<i class='fa-brands fa-facebook'></i>">Text</option>
. При побудові компонента і формуванні елементів списку вміст цього атрибуту буде мати пріоритет над вмістомoption
. В цьому прикладі вмістText
буде проігноровано.Поля об'єкту конфігурації
Слід зазначити, що всі або окремі перераховані нижче поля, окрім
selector
, можна передати методу атрибутамиdata-
. Це дозволить конфігурувати кожен окремий екземпляр. Передані таким чином поля конфігурації вказують методу застосовувати їх з найвищим пріоритетом. Назви полів слід вказувати з префіксомdata-
в стиліkebab-case
. Приклад:{iconMail: `<i class="fa-solid fa-envelope"></i>`}
->data-icon-mail="<i class='fa-solid fa-envelope'></i>"
. Так, це спрацює..)selector
(рядок, опціонально, за замовчуванням ".UI_Select"). CSS-селектор або комбінація селекторів, за якою будуть знайдені елементи на сторінці. Елементи будуть відфільтровані за тегомselect
в колекцію. Саме ця колекція буде надалі опрацьована методом.withSearch
(булево, опціонально, за замовчуванням true). Чи потрібен в компоненті пошук по опціях списку та значенням атрибутівdata-find-of
(дивись метод search()).selectPlaceholder
(рядок, опціонально, за замовчуванням "Make a choice"). Заповнювач порожнього поля. Якщо передано порожній рядок, заповнювач не буде додано.searchPlaceholder
(рядок, опціонально, за замовчуванням "Search on the list"). Заповнювач порожнього поля пошуку по опціях списку.openIcon
(рядок, опціонально, за замовчуванням "<i class='fa-solid fa-chevron-down'></i>"). Іконка кнопки, що показує dropdown компонента. Може містити HTML.closeIcon
(рядок, опціонально, за замовчуванням "<i class='fa-solid fa-chevron-up'></i>"). Іконка кнопки, що ховає dropdown компонента. Може містити HTML.delItemIcon
(рядок, опціонально, за замовчуванням "<i class='fa-solid fa-xmark'></i>"). Іконка кнопки видалення обраної опції в multiple компоненті. Може містити HTML.
клас-будівельник
UI.Select()
повертає екземпляр безіменногокласу-будівельника
для подальших ланцюгових викликів допоміжних публічних методів та властивостей.Властивості та методи
класу-будівельника
- Метод
showDropdown([select])
Показує dropdown компонента. Повертаєклас-будівельник
.- Аргумент
select
(HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
- Аргумент
- Метод
hideDropdown([select])
Ховає dropdown компонента. Повертаєклас-будівельник
.- Аргумент
select
(HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
- Аргумент
- Метод
search(query [, select])
Шукає по запиту серед опцій компонента та залишає в dropdown лише знайдені опції. Пошук не чутливий до регистру. Якщо опція не містить тексту чи опцію потрібно знайти за додатковим запитом, використовуйте атрибут опціїdata-find-of
. Приклад: опція<option data-find-of="Ukraine UA" value="+380">🇺🇦</option>
буде знайдена за запитомukraine
таua
. Метод повертаєклас-будівельник
.- Аргумент
query
(рядок, обов'язковий). Запит, за яким буде відбуватись пошук в рядках опцій dropdown компонента. - Аргумент
select
(HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
- Аргумент
- Метод
selected(val, indexes [, select])
Встановлює значення атрибутуselected
для опцій поляselect
за індексами та оновлює компонент. Повертаєклас-будівельник
.- Аргумент
val
(булево, обов'язковий). true або false для значення атрибутуselected
. - Аргумент
indexes
(масив, обов'язковий). Масив індексів опцій в поліselect
. Атрибутамselected
цих опцій буде встановлене значенняval
. Зверніть увагу, disabled опції оброблені не будуть. Для списку з одинарним обиранням вindexes
буде опрацьовано лише перше значення. - Аргумент
select
(HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
- Аргумент
- Метод
render([select])
Синхронізує компонент з полемselect
. Коли значення поля змінено, цей метод застосовує такі зміни в компоненті. Повертаєклас-будівельник
.- Аргумент
select
(HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
- Аргумент
- Метод
remove()
деактивує всі активовані елементи колекції та повертає звичайний виглядselect
. Повертаєклас-будівельник
. - Властивість
get
повертає масив активованих елементів колекції. Повинен бути викликаний останнім в ланцюгу викликів.
Події
UI.Select()
генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на<select>
на якому активовано компонент.UI.activated
компонент активовано.UI.unactivated
компонент деактивовано.UI.beforeDropdownShow
dropdown буде показано.UI.dropdownShowed
dropdown показано.UI.beforeDropdownHide
dropdown буде приховано.UI.dropdownHidden
dropdown приховано.UI.beforeSearch
буде здійснено пошук.UI.searched
пошук здійснено.UI.beforeSelected
значення буде встановлено.event.detail.indexes
(масив) масив індексів опцій в полі.event.detail.selected
(булево) true або false для значення атрибутуselected
.
UI.selected
значення встановлено.event.detail.indexes
(масив) масив індексів опцій в полі.event.detail.selected
(булево) true або false для значення атрибутуselected
.
UI.beforeRender
компонент буде синхронізовано з полем.UI.rendered
компонент синхронізовано з полем.UI.beforeRemove
компонент буде видалено та деактивовано.UI.removed
компонент видалено та деактивовано.
Поглиблений доступ
Як тільки компонент буде активовано на елементі, елемент отримає об'єктUI
. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад,mySelect.UI.dropdown
щоб отримати елемент списку що випадає. А такmySelect.UI.value
можна легко отримати значення multiple списку одразу в масиві, чи рядком, якщо список не multiple.
Багаторівневе меню
Метод UI.Menu()
будує компонент меню зі звичайного списку ul
. Вкладеність меню буде
такою ж, як і вкладеність списку. Будь-який тег li
може містити тег a
або
span
, який стане пунктом меню, а також ul
, який визначить вкладеність цього пункту.
- Вигляд
- Код
-
<!--- UI.Menu() ---> <ul class="UI_Menu"> <li><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
-
Метод
UI.Menu([userConf])
за замовчуванням опрацює всіul
з класомUI_Menu
. Це вже спрацювало, бо в кінці файлуUI.js
викликаноUI.Menu()
. Метод приймає необов'язковий аргумент — літерал об'єкта з конфігурацією. Якщо конфігурація не передана, метод використає конфігурацію за замовчуванням. Така поведінка стосується також полей об'єкту конфігурації. Метод повертає екземпляркласу-будівельника
.Поля об'єкту конфігурації
Слід зазначити, що всі або окремі перераховані нижче поля, окрім
selector
, можна передати методу атрибутамиdata-
. Це дозволить конфігурувати кожен окремий екземпляр. Передані таким чином поля конфігурації вказують методу застосовувати їх з найвищим пріоритетом. Назви полів слід вказувати з префіксомdata-
в стиліkebab-case
. Приклад:{iconMail: `<i class="fa-solid fa-envelope"></i>`}
->data-icon-mail="<i class='fa-solid fa-envelope'></i>"
. Так, це спрацює..)selector
(рядок, опціонально, за замовчуванням ".UI_Menu"). CSS-селектор або комбінація селекторів, за якою будуть знайдені елементи на сторінці. Елементи будуть відфільтровані за тегомul
в колекцію. Саме ця колекція буде надалі опрацьована методом.toggleIcon
(рядок, опціонально, за замовчуванням "<i class='fa-solid fa-bars'></i>"). Іконка кнопки, яка покаже/сховає все меню чи вкладені пункти на малих пристроях. Може містити HTML.markLink
(булево, опціонально, за замовчуванням false). Якщо uri поточної сторінки збігається зі значеннямhref
посилання на будь-якому рівні вкладеності, метод знайде батьківськийli
самого верхнього рівня та виділить його серед інших.
клас-будівельник
UI.Menu()
повертає екземпляр безіменногокласу-будівельника
для подальших ланцюгових викликів допоміжних публічних методів та властивостей.Властивості та методи
класу-будівельника
- Метод
markLink([ul])
виділить пункт самого верхнього рівня, якщо на нижчих рівнях знайде посилання на поточну сторінку (дивись поле конфігураціїmarkLink
). Повертаєклас-будівельник
.- Аргумент
ul
(HTMLElement, опціонально, за замовчуванням null). Елемент з колекції, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
- Аргумент
- Метод
toggleShow([force, ul])
Перемикає видимість всього меню чи подменю на малих пристроях. Повертаєклас-будівельник
.- Аргумент
force
(булево, опціонально, за замовчуванням null). Значення true показує меню або подменю, значення false приховує меню або подменю. - Аргумент
ul
(HTMLElement, опціонально, за замовчуванням null). Елемент з колекції абоul
подменю, який потрібно опрацювати. Якщо аргумент не передано, будуть опрацьовані всі елементи колекції.
- Аргумент
- Метод
remove()
деактивує всі активовані елементи колекції та повертає звичайний виглядul
. Повертаєклас-будівельник
. - Властивість
get
повертає масив активованих елементів колекції. Повинна бути викликана останнім в ланцюгу викликів.
Події
UI.Menu()
генерує перераховані нижче події. Підписуватись на ці події слід встановлюючи опрацьовувач на<ul>
на якому активовано компонент.UI.activated
компонент активовано.UI.unactivated
компонент деактивовано.UI.beforeShow
все меню чи подменю буде показано.UI.showed
все меню чи подменю показано.UI.beforeHide
все меню чи подменю буде приховано.UI.hidden
все меню чи подменю приховано.UI.beforeRemove
компонент буде видалено та деактивовано.UI.removed
компонент видалено та деактивовано.
Поглиблений доступ
Як тільки компонент буде активовано на елементі, елемент отримає об'єктUI
. В цьому об'єкті доступні поля корисні для роботи з компонентом. Наприклад,myUl.UI.toggleButton
щоб отримати елемент кнопки що розвертає/звертає меню.