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>