Foundation - JavaScript

In this chapter let's study about JavaScript. It is easy to set up JavaScript in Foundation, only thing you require is jQuery.

Installing

You can use ZIP download, package manager or CDN to get Foundation JavaScript file. In your code provide links to jQuery and Foundation using <script> tags. 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 comes with Foundation installation. You can study in detail about specific plugin requirements in 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 plugin's name. A single HTML element can have only one plugin at one time, although the majority of the plugins can be nested within other ones. 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').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 2 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 to manipulate it via JavaScript. You can look through documentations of plugin to study 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 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!');
});