All samples are using Ink.requireModules, please read how to use it at Ink.requireModules section

Ink.Autoload namespace

Function name Description
.add(moduleName, selector) Add a new entry to be autoloaded.
.remove(moduleName) Removes a module from autoload, making it not be automatically loaded.
.run(parentEl, [options]) Run Autoload on a specific element.
Property name Description
.selectors Matches module names to default selectors. {Object}

.add(moduleName, selector) method

Add a new entry to be autoloaded.


  • moduleName

    The module name (Example: 'Modal_1', or 'Dropdown_1')
  • selector

    A selector which finds elements where this module should be autoloaded (Example: '.my-modal' or '.my-dropdown')

.remove(moduleName) method

Removes a module from autoload, making it not be automatically loaded.


  • moduleName

    The module's name and version ('Name_ver')

.run(parentEl, [options]) method

Run Autoload on a specific element.

Useful when you load something from AJAX and want it to have automatically loaded Ink modules.


  • parentEl

    Root element. The children of this element will be processed by Autoload.
  • options

    Options object, containing:
  • options.forceAutoload

    Autoload things on elements even if they have `data-autoload="false"`
  • options.createClose

    Whether to create the Ink.UI.Close component. Defaults to `true`.
  • options.createSmoothScroller

    Whether to create the Scroller component. Defaults to `true`.
  • options.selectors

    Ink.Autoload.selectorsA hash mapping module names to selectors that match elements to load these modules. For example, `{ 'Modal_1': '.my-specific-modal' }`.
  • options.waitForDOMLoaded

    falseDo nothing until the DOM is loaded. Uses;

What is Autoload?

Autoload makes creating Ink components easy. You just have to include a certain class in your elements (or otherwise make them match a certain selector) and Autoload will find them and create the components for you.

<div id="my-something">
    Ink.requireModules(['Ink.UI.Something_1'], function (Something) {
        new Something('#my-sticky', { someOption: true, numberOption: 3 });

Notice how the ID is required to find the element and create it.

<div class="ink-something" data-some-option="true" data-number-option="3">

<script src="/path/to/autoload.js"></script>

Autoload will automatically wait until the page loads and create the UI modules for you. If you didn't load the module into the page using a script tag, it will use Ink's requireModules machinery to load it.

The following modules are available to be loaded by Autoload

Module Selector
Animate_1 .ink-animate
Carousel_1 .ink-carousel
DatePicker_1 .ink-datepicker
Dropdown_1 .ink-dropdown
Modal_1 .ink-modal
ProgressBar_1 .ink-progress-bar
Spy_1 [data-spy="true"]
Stacker_1 .ink-stacker
Sticky_1 .ink-sticky, .sticky
Table_1 .ink-table
Tabs_1 .ink-tabs
Toggle_1 .ink-toggle, .toggle
Tooltip_1 .ink-tooltip, .tooltip
TreeView_1 .ink-tree-view

You can modify your dist/autoload.js to change the selector list.

Is Autoload getting in the way?

If Autoload is loading things it shouldn't, you can do one of these things:

  • Just add the data-autoload="false" attribute to the element in question (new in Ink 3.0.3)
  • Modify your dist/autoload.js file to remove or modify the selector in question.
  • Add <script>window.INK_NO_AUTO_LOAD = true</script> to your page to stop Autoload from executing when the DOMReady event fires. You can use to run it selectively inside a specific container in your page.

How do I get an Ink UI Component from an element Autoload has loaded?

You may want to get a component instance in order to call methods on it or destroy it.

You can (it works better in ink>=3.0.3) use Ink.UI.Common.getInstance() to get an instance from a DOM element at any time.

An alternative would be to stop autoload from loading the module and load it yourself using raw javascript.

.selectors attribute

Matches module names to default selectors.