World Conquest Chronicles

World Conquest Chronicles

Wizard Tags, v1.0

Posted on

Скриншот примера использования

(CC BY-SA 4.0, Copyright © 2015 thewizardplusplus)

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

Мажорный релиз.

Возможности

  • отображение выбранных тегов;
  • автоматическое добавление тегов:
    • при вводе одного из выбранных разделителей;
    • при нажатии клавиши Enter;
  • список автодополнения ввода:
    • автодополнение ввода;
    • удаление дублей из списка доступных тегов;
  • автоматический тримминг тегов:
    • в списке автодополнения ввода;
    • в списке выбранных тегов;
  • опции:
    • список доступных тегов для списка автодополнения ввода:
      • массив;
      • пользовательская функция, генерирующая список;
    • сортировка списка автодополнения ввода:
      • по возрастанию;
      • по убыванию;
      • пользовательской функцией;
    • начальный список выбранных тегов;
    • список разделителей для автоматического добавления тегов;
    • опциональный запрет на выбор одного тега несколько раз;
    • плейсхолдер для поля ввода;
    • кэлбек для события изменения списка выбранных тегов;
  • API:
    • получение версии библиотеки;
    • получение списка выбранных тегов.

Пример использования

wizard_tags_example.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset = "utf-8" />
        <meta
            name = "viewport"
            content = "width=device-width, initial-scale=1.0" />

        <link rel = "stylesheet" href = "path_to_wizard_tags/styles/wizard_tags.css" />
        <link rel = "stylesheet" href = "path_to_wizard_tags/styles/default_theme.css" />

        <script src = "path_to_wizard_tags/scripts/wizard_tags.js"></script>
        <script src = "wizard_tags_example.js"></script>

        <title>Wizard Tags - Default Example</title>
    </head>
    <body>
        <header>
            <h4>Wizard Tags — Default Example</h4>
            <hr />
        </header>
        <section>
            <p>
                Version of Wizard Tags —
                v<span class = "version-view">0.0</span>.
            </p>
            <p>
                Selected tags:
                <span class = "selected-tags-view">—</span>.
            </p>
            <div class = "tags-input"></div>
        </section>
        <footer>
            <hr />
            © thewizardplusplus, 2015
        </footer>
    </body>
</html>

wizard_tags_example.js:

window.addEventListener(
    'load',
    function() {
        var selected_tags_view = document.querySelector('.selected-tags-view');
        var tags_input = new WizardTags(
            '.tags-input',
            {
                tags: [
                    'one',
                    'two',
                    'three',
                    'four',
                    'four',
                    'five',
                    'five',
                    '',
                    '      six',
                    'six'
                ],
                default_tags: ['one', 'two'],
                separators: ',',
                only_unique: true,
                placeholder: 'Themes',
                sort: 'desc',
                onChange: function() {
                    var tags = this.getTags();
                    if (tags.length) {
                        selected_tags_view.innerHTML = tags.join(', ');
                    } else {
                        selected_tags_view.innerHTML = '—';
                    }
                }
            }
        );

        var version_view = document.querySelector('.version-view');
        version_view.innerHTML = tags_input.getVersion();

        var test_form = document.querySelector('.test-form');
        test_form.addEventListener(
            'submit',
            function(event) {
                console.log('attempt to submit test form');

                event.preventDefault();
                return false;
            }
        );
    }
);

Репозиторий

Ссылка: https://github.com/thewizardplusplus/wizard-tags/tree/v1.0.

Содержание: код, документация, пример использования.

Лицензия: MIT.

Авторские права