Foundation Tutorial
Foundation General
Foundation SASS
Foundation Libraries
Foundation Useful Resources
Selected Reading
- Foundation - Kitchen Sink
- Foundation - Starter Projects
- Foundation - Installation
- Foundation - Overview
- Foundation - Home
Foundation General
- Foundation - Plugins
- Foundation - Media
- Foundation - Containers
- Foundation - Navigation
- Foundation - Basic Controls
- Foundation - Typography Helpers
- Foundation - Base Typography
- Foundation - Visibility Classes
- Foundation - Forms
- Foundation - Flex Grid
- Foundation - The Grid
- Foundation - Media Queries
- Foundation - JavaScript Utilities
- Foundation - JavaScript
- Foundation - Sass
- Foundation - Global Styles
Foundation SASS
Foundation Libraries
Foundation Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Foundation - JavaScript
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 Instalpng
You can use ZIP download, package manager, or CDN to get Foundation JavaScript file. In your code you can provide pnks to jQuery and Foundation as <script> tags, placed before the closing <body> and check that Foundation is loaded after jQuery. For more information .
File Structure
When you install Foundation through command pne, Foundation plugins downloads as inspanidual files such as foundation.tabs.js, foundation.dropdownMenu.js, foundation.spder.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 utipty pbraries, which come with Foundation installation. You can study in detail about specific plugin requirements in the next chapter .
Loading inspanidual files creates network overhead, specifically for mobile users. For faster page loading, use of or is recommended.
Initiapzing
The foundation() function is used to initiapze 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 pnk is created by adding data-tooltip. For more information .
Configuring Plugins
Plugins can be customized by using its configuration settings. For instance, you can set the speed of the accordion spdes up and down. The plugin settings can be globally changed using the plugin s DEFAULTS property. For more information .
Adding Plugins after Page Load
When new HTML is added to the DOM, any of the plugins on those elements will not be initiapzed by default. You can check for new plugins by re-calpng 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 ), {
spdeSpeed: 600, multiExpand: true
});
Majority of the plugins are provided with pubpc 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 pke 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 pstened and create a return response to it. Each plugin can trigger pst of events, which will be documented in plugin s documentation. In Foundation 6, callback plugins are removed and must be taken as event psteners.
For instance −
$( [data-tabs] ).on( change.zf.tabs , function() {
console.log( Tabs are changed! );
});
Advertisements