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.
<script src="/js/vendor/modernizr.js"></script>Before the closing body tag, insert JQuery and FastClick.
HTML
<script src="/js/vendor/jquery.js"></script>
<script src="/js/vendor/fastclick.js"></script>Then either load each plugin individually, or include foundation.min.js, which automatically loads the Foundation Core and all JavaScript plugins.
HTML
<script src="/js/foundation.min.js"></script>
<!-- or individually -->
<script src="/js/foundation.js"></script>
<script src="/js/foundation.alert.js"></script>
<!-- ... -->
<script src="/js/foundation.dropdown.js"></script>
<script src="/js/foundation.tab.js"></script>Initialize Foundation
After you have included the Foundation JavaScript, just add a simple call to initialize all plugins on your page.
We recommend that you initialize Foundation at the end of the page <body>.
HTML
<script>
$(document).foundation();
</script>Note: We include a tested version of jQuery in the Foundation repo to get you started quickly.
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
$(document).foundation({
reveal : {
animation_speed: 500
},
tooltip : {
disable_for_touch: true
},
topbar : {
custom_back_text: false,
is_hover: false,
mobile_show_parent_link: true
}
});The above will initialize all of the plugins with default settings as well as customized settings for reveal, tooltip, and topbar.
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.
Lets pretend that we have an alert that was on our page when Foundation was first initialized:
HTML
<div data-alert class="alert-box" id="myAlert">
This is a standard alert.
<a href="#" class="close">×</a>
</div>The default fade out speed is 300 miliseconds, 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.
This will fire the start method on Joyride:
JS
$(document).foundation('joyride', 'start');