Foundation CSS JavaScript Configuring Plugins
Last Updated :
13 Jul, 2022
Foundation CSS is an open-source front-end framework that is used to create a beautiful responsive website, apps, or email quickly and easily. ZURB published it in September of that year. Numerous businesses, like Facebook, eBay, Mozilla, Adobe, and even Disney, make use of it. This framework, which resembles SaaS, is built on the Bootstrap framework. It is more intricate, flexible, and individualized. Working with module bundlers is also a breeze because of its command-line interface. Email framework creates HTML emails that are viewable on all devices and are mobile-friendly. With Foundation for Apps, you can make fully responsive web applications.
In this article, we will learn to configure plugins for Foundation CSS. All the plugins have configuration settings that customize their work. For example, fast sliding of accordion in the up and down direction. Some code examples are given below for easy understanding.
Syntax:
<div data-accordion data-slide-speed="500"
data-multi-expand="true"></div>
<div data-accordion data-options=
"slideSpeed: 500; multiExpand: true;"></div>
- Setting defaults property globally:
Foundation.Accordion.defaults.slideSpeed = 500;
Foundation.Accordion.defaults.multiExpand = true;
Note: For the above syntaxes, we have taken the example of an accordion HTML element.
Example 1: In the following example, the accordion is demonstrated by using the accordion class along with the data-accordion attribute with data-slide-speed=”800″ data-multi-expand=”true” data options.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<style>
body {
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Foundation CSS JavaScript Configuring Plugins
</h3>
<div id="divID">
<ul class="accordion"
data-accordion data-slide-speed="800"
data-multi-expand="true">
<li class="accordion-item" data-accordion-item>
<a href="#"
class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 1</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#"
class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 2</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#"
class="accordion-title">Accordion 3</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 3</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#"
class="accordion-title">Accordion 4</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 4</p>
</div>
</li>
</ul>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Example 2: The following code shows the setting options with JavaScript involve passing an object into the constructor function. Refer to the script part. The options passed to plugins through JavaScript will take the highest precedence, and will overwrite any default values. In the following example, “slideSpeed: 500″ will take precedence over data-slide-speed=”100″ with other data options.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<style>
body {
margin-left:10px;
margin-right:10px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Foundation CSS JavaScript Configuring Plugins
</h3>
<div id="divID">
<ul class="accordion"
id="ulid"
data-accordion data-slide-speed="100">
<li class="accordion-item"
data-accordion-item>
<a href="#"
class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 1</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#"
class="accordion-title">Accordion 2</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 2</p>
</div>
</li>
<li class="accordion-item" data-accordion-item>
<a href="#"
class="accordion-title">Accordion 3</a>
<div class="accordion-content" data-tab-content>
<p>This is the Content of Accordion 3</p>
</div>
</li>
</ul>
</div>
<script>
$(document).ready(function () {
var options = {slideSpeed: 500,
multiExpand: false,
allowAllClosed: true};
var accordion = new Foundation.Accordion($('#ulid'), options);
$(document).foundation(options,accordion);
})
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/javascript.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...