Foundation - JavaScript

In this chapter, we will study about JavaScript. It is easy to set up JavaScript in Foundation; only thing you require is jQuery.

JavaScript Installing

You can use ZIP download, package manager, or CDN to get Foundation JavaScript file. In your code you can provide links to jQuery and Foundation as <script> tags, placed before the closing <body> and check that Foundation is loaded after jQuery. For more information click here.

File Structure

When you install Foundation through command line, Foundation plugins downloads as individual files such as foundation.tabs.js, foundation.dropdownMenu.js, foundation.slider.js and so on. All these files are combined into foundation.js, which provides all the plugins at one time. If you wish to use some plugin, first foundation.core.js should be loaded.

For instance −

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

Certain plugins may require particular utility libraries, which come with Foundation installation. You can study in detail about specific plugin requirements in the next chapter JavaScript Utilities.

Loading individual files creates network overhead, specifically for mobile users. For faster page loading, use of grunt or gulp is recommended.

Initializing

The foundation() function is used to initialize all the Foundation plugin at one time.

For instance −

(document).foundation();

Using Plugins

Using data attributes, plugins are connected to HTML elements as they match the plugins’ name. A single HTML element can have only one plugin at a time, although the majority of the plugins can be nested within other ones. For instance, tooltip link is created by adding data-tooltip. For more information click here.

Configuring Plugins

Plugins can be customized by using its configuration settings. For instance, you can set the speed of the accordion slides up and down. The plugin settings can be globally changed using the plugin's DEFAULTS property. For more information click here.

Adding Plugins after Page Load

When new HTML is added to the DOM, any of the plugins on those elements will not be initialized by default. You can check for new plugins by re-calling the .foundation() function.

For instance −

$.ajax('assets/partials/kitten-carousel.html', function(data) {
   $('#kitten-carousel'</span>).html(data).foundation();
});

Programmatic Use

In JavaScript, plugins can be created programmatically and each plugin is global Foundation object's class, with a constructor which takes two parameters such as an element and an object.

var $accordion = new Foundation.Accordion($('#accordion'), {
   slideSpeed: 600, multiExpand: true
});

Majority of the plugins are provided with public API, which lets you manipulate it via JavaScript. You can look through the documentations of plugin to study the available functions and methods can be invoked easily.

For instance −

$('.tooltip').foundation('destroy'); 
// this will destroy all Tooltips on the page.	

$('#reveal').foundation('open'); 
// this will open a Reveal modal with id `reveal`.

$('[data-tabs]').eq(0).foundation('selectTab', $('#example')); 
// this will change the first Tabs on the page to whatever panel you choose.

  • You are allowed to choose any jQuery selector and if the selector holds multiple plugins, then they all will have identical chosen method called.

  • Arguments can be passed just like passing arguments to JavaScript.

  • Methods that are prefixed with underscore(_) are considered as a portion of internal API, meaning, that without warning they can break, change or even disappear.

Events

Whenever a specific function finishes, DOM triggers an event. For instance, whenever tabs are changed, it can be listened and create a return response to it. Each plugin can trigger list of events, which will be documented in plugin's documentation. In Foundation 6, callback plugins are removed and must be taken as event listeners.

For instance −

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});
Advertisements