JavaScript

使用 data 属性将 JavaScript 应用于 UIkit 组件

您可以通过仅向 HTML 元素添加 data-uk-* 属性来使用所有 UIkit 组件，而无需编写任何 JavaScript 代码。 这是 UIkit 使用其组件的最佳实践，应始终优先考虑。

标记

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

当然，您仍然可以通过 UIkit API 使用这些组件。

标记

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 或响应式框架。

如果您通过 JavaScript 将动态 HTML 标记注入到 DOM 中，UIKit JavaScript 组件将通过 data-uk-* 属性自动初始化。

您可以通过 UIkit.domObserve 方法手动向 DOM 添加一个观察器。

通过 JavaScript 观察一个元素

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

检查显示事件的可见性更改。

有时，诸如 Grid 或 Tab 之类的组件会在标记中被隐藏。 当与 Switcher，Modal 或 Dropdown 结合使用时可能会发生这种情况。 一旦它们变得可见，就需要重新计算以调整或修复高度和其他尺寸。

为此，请将 data-uk-check-display 属性添加到需要重新计算的元素。 它们现在监听 display.uk.check 事件，该事件将由容器组件（例如 Switcher）触发。 这对于带有 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>