JavaScript Setup

We streamlined how you implement Foundation plugins by combining them into a single plugin under the $.fn.foundation() jQuery namespace.

Installation

Foundation JavaScript was designed to work with jQuery right out of the gate. In the <head> section of your page add Modernizr. Modernizr acts as a shim for HTML5 elements that older browsers may not recognize, and provides detection for mobile devices:

Configuration

Foundation offers you options to customize plugin initialization. By default, calling $('#scope').foundation(); will initialize all available plugins on the page. Alternatively, you can pass individual plugins along with configuration options and a callback. This way, you can select which plugins you want to customize, and which are fine by default. You can take a look at the call here:

$(document).foundation({tab: {toggleable: false}});

The call will initialize all the plugins on the page and will configure tabs with toggleable enabled.

You can configure multiple libraries within the same call as well. Here are a few ways to make it happen:

JS

The above will initialize all of the plugins with default settings as well as customized settings for reveal, tooltip, and topbar.

Data Options

Instead of passing the settings to the plugins using JavaScript, you can pass them through the markup using data-options. To pass in an option, just place it in the data-options HTML attribute of the element the plugin is being called on. To pass in multiple options, format them as a semicolon-delimited list:

Configure on the fly

New to Foundation 5, you can now reconfigure instances of your plugin after the page has loaded and Foundation has already been initialized.

Let's pretend that we have an alert that was on our page when Foundation was first initialized:

HTML

<divdata-alertclass="alert-box"id="myAlert">
This is a standard alert.
<ahref="#"class="close">&times;</a></div>

The default fade out speed is 300 milliseconds, if we wanted to change this to 3 seconds we could do the following:

JS

$('#myAlert').foundation({alert: {speed: 3000}});

You can set any configuration option or callback this way.

Calling Internal Methods

Foundation JavaScript allows you call internal plugin methods by passing the method name as the second argument. This is necessary for plugins like Joyride, which are not initialized on page load by default.