# JavaScript

Use data attributes to apply JavaScript to UIkit components

You can use all UIkit components by just adding `data-uk-*` attributes to your HTML elements without writing a single line of JavaScript. This is UIkit's best practice of using its components and should always be considered first.

### Markup

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

But of course you can still use the components just through the jQuery API.

### Markup

    $(".button").uk("button");

## AMD support

AMD (Asynchronous Module Definition) is a way of defining JavaScript modules and their dependencies so they can be loaded asynchronously.

### Usage

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

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

    });

### Autoload UIkit and its components

    /* 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 component settings.

It is possible to adjust the default component settings as you can see in the following example.

### Usage

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

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

## Observe the DOM to auto-init new added components, e.g via AJAX.

If you inject dynamic HTML markup into the DOM via JavaScript, just add the `data-uk-observe` attribute to one of the parent elements to auto-initialize UIKit JavaScript components.

### Usage

                                <div data-uk-observe>
                                    <!-- inject your dynamic html here -->
                                </div>

### Observe an element via JavaScript

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

## Check Display event on visibility change.

Sometimes components, like Grid or Tab are hidden in the markup. This may happen when used in combination with the Switcher, Modal or Dropdown. Once they become visible, they need to be recalculated to adjust or fix the height and other dimensions.

To do so, add the `data-uk-check-display` attribute to the elements which need to be recalculated. They now listen to the `display.uk.check` event, which will be triggered by the container component, for example the Switcher. This is not needed for elements with `data-uk-margin`, `data-uk-grid-margin` and `data-uk-grid-match` attributes, those will be triggered by default.

### Usage

                                <!-- 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>