Foundation CSS es un marco front-end de código abierto que se utiliza para crear un hermoso sitio web, aplicaciones o correo electrónico con capacidad de respuesta de forma rápida y sencilla. ZURB lo publicó en septiembre de ese año. Numerosas empresas, como Facebook, eBay, Mozilla, Adobe e incluso Disney, lo utilizan. Este marco, que se asemeja a SaaS, se basa en el marco Bootstrap. Es más complejo, flexible e individualizado. Trabajar con paquetes de módulos también es muy sencillo debido a su interfaz de línea de comandos. El marco de correo electrónico crea correos electrónicos HTML que se pueden ver en todos los dispositivos y son aptos para dispositivos móviles. Con Foundation for Apps, puede crear aplicaciones web totalmente receptivas.
En este artículo, aprenderemos a configurar complementos para Foundation CSS. Todos los complementos tienen ajustes de configuración que personalizan su trabajo. Por ejemplo, deslizamiento rápido de acordeón en dirección hacia arriba y hacia abajo. Algunos ejemplos de código se dan a continuación para una fácil comprensión.
Sintaxis:
- Usando el atributo de datos:
<div data-accordion data-slide-speed="500"
data-multi-expand="true"></div>
- Uso de opciones de datos:
<div data-accordion data-options=
"slideSpeed: 500; multiExpand: true;"></div>
- Establecer la propiedad predeterminada globalmente:
Foundation.Accordion.defaults.slideSpeed = 500; Foundation.Accordion.defaults.multiExpand = true;
Nota: Para las sintaxis anteriores, hemos tomado el ejemplo de un elemento HTML de acordeón .
Ejemplo 1: En el siguiente ejemplo, se demuestra el acordeón usando la clase acordeón junto con el atributo data-accordion con las opciones de datos data-slide-speed=”800″ data-multi-expand=”true” .
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=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</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>
Producción:
Ejemplo 2: el siguiente código muestra que las opciones de configuración con JavaScript implican pasar un objeto a la función constructora. Consulte la parte del guión . Las opciones que se pasan a los complementos a través de JavaScript tendrán la prioridad más alta y sobrescribirán los valores predeterminados. En el siguiente ejemplo, “ slideSpeed: 500″ tendrá prioridad sobre data-slide-speed=”100″ con otras opciones de datos.
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=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
<!-- Compressed JavaScript -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
</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>
Producción:
Referencia: https://get.foundation/sites/docs/javascript.html
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA