JavaScript

Использование данных атрибутов применить JavaScript и UIkit компоненты

Вы можете использовать все UIkit компоненты, просто добавив data-uk-* атрибуты HTML-элементов, не написав ни одной строки JavaScript. Это UIkit'ы лучшие практики использования его компонентов и всегда должны рассматриваться в первую очередь.

Разметки

<button data-uk-button>My Button</button>

Но, конечно, вы все еще можете использовать компоненты только по UIkit АПИ.

Разметки

UIkit.button($(".button"), {/* options */});

AMD поддержки

AMD (асинхронные определения модуля) является способом определения JavaScript модулей и их зависимостей, чтобы они могли быть загружен асинхронно.

Использование

/* Simple require of the UIkit core */
require("path/to/uikit.js", function(UI){

    // UI is the global UIkit object a.k.a. $.UIkit

});

Автозагрузку UIkit и ее компонентов

/* setup require.js first */
requirejs.config({

    paths: {
        "uikit": 'path/to/uikit.js'
    },

    config: {
        "uikit": {
            "base": "path/to/uikit_dist_folder"
        }
    }

});

/* now you can autoload uikit core + components separated by a comma */
require("uikit!notify,sortable", function(UI){

    // access loaded components: UI.notify, UI.sortable

});

Переопределение параметров по умолчанию компонента.

Можно настроить компонент по умолчанию настройки как вы можете видеть на следующем примере.

Использование

                            // override default tooltip settings
                            UIkit.on('beforeready.uk.dom', function(){

                                $.extend(UIkit.components.tooltip.prototype.defaults, {
                                    pos: 'top',
                                    delay: 500,
                                    animation: true
                                });
                            });
                            

Авто-инициализации добавлены новые компоненты, электронные.г через AJAX или реактивной фраймворк.

Если вы вводите динамической разметки HTML в DOM через JavaScript, программирования с использованием uikit JavaScript компонентов будут автоматически инициализироваться посредством #0 атрибуты#.

Вы можете вручную добавить наблюдателя на DOM через UIkit.domObserve метод.

Наблюдать через элемент JavaScript

UIkit.domObserve('#element', function(element) { /* apply on dom change within element */ })

Установите флажок отображать события на видимость перемен.

Иногда компоненты, такие как Грид или Вкладка спрятаны в разметке. Это может произойти при использовании в комбинации с Переключатель, Модальные или Выпадающий. Как только они становятся видимыми, они должны быть пересчитаны, чтобы отрегулировать или исправить высоту и другие размеры.

Чтобы сделать это, добавьте data-uk-check-display атрибут к элементам, которые должны быть пересчитаны. Они сейчас слушают display.uk.check событие, которое будет вызвано контейнер компонент, например коммутатор. Это не требуется для элементов с data-uk-margin, data-uk-grid-margin и data-uk-grid-match атрибуты, те будут срабатывать по умолчанию.

Использование

                            <!-- Element within a modal, switcher or dropdown -->
                            <div id="myelement" data-uk-check-display>...</div>

                            <script>
                            $("#myelement").on('display.uk.check', function(){
                               // custom code to adjust height etc on show
                            });
                            </script>