Javascript

Foundation 4 streamlines the implementation of the Foundation plugins by combining them all into a single plugin under the $.fn.foundation() Zepto/jQuery namespace.

Installation

Foundation JavaScript was designed to work with Zepto and jQuery right out of the gate. Zepto is not supported by all browsers, so as suggested in the Zepto documentation, you should test for compatibility and load Zepto or jQuery as necessary.

Include Libraries

In the head section of your page add Modernizr. Modernizr acts as a shim for HTML5 elements for older browsers as well as detection for mobile devices.

Initialize Foundation

After you have included the Foundation JavaScript, just add a simple call to initialize all plugins on your page.

It is recommended that you initialize Foundation at the end of the page <body>.

<script>$(document).foundation();</script>

Note: We include tested versions of jQuery and Zepto in the Foundation repo to get you started quickly. If you want to build your own version of Zepto, Foundation employs the event, fx_methods, assets, data, selector, and stack modules.

Configuration

Foundation accepts a myriad of options for 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 will allow you to select specific plugins to start on your page, even if their source is included. You can take a look at the call here:

Keep in mind, if you initialize multiple plugins at one time and pass a configuration object that object will get passed to all plugins that were initialized. So in the first example: section, dropdown, and alerts will all get passed the myCallbackFunction on initialization.

What if you wanted to pass the myCallbackFunction only to Section and still initialize the other plugins as well? You could do the following.

Calling Internal Methods

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

This will fire the start method on Joyride:

$(document).foundation('joyride','start');

Unbind Events

All plugins can be unbound from the DOM by firing the off event either on that plugin or globally to unbind all Foundation events.

This is a modal.

Reveal makes these very easy to summon and dismiss. The close button is simply an anchor with a unicode character icon and a class of close-reveal-modal. Clicking anywhere outside the modal will also dismiss it.

Finally, if your modal summons another Reveal modal, the plugin will handle that for you gracefully.