Foundation CSS Acordeón y URL

Posted on by Rudeus Greyrat

Foundation CSS es un marco que simplifica la creación de impresionantes sitios web, aplicaciones y correos electrónicos receptivos que se ven maravillosos y están disponibles en cualquier dispositivo, un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011. Numerosas empresas , como Facebook, eBay, Mozilla, Adobe e incluso Disney, utilícelo. El marco se basa en bootstrap, al igual que SaaS. Es más fácil de personalizar, más adaptable y más avanzado. También incluye CLI, lo que facilita su uso con paquetes de módulos. Proporciona la herramienta Fastclick.js para la representación de dispositivos móviles que es más rápida.

Los acordeones son los elementos que son muy útiles para organizar y navegar por varias secciones en un solo contenedor. Podemos simplemente recuperar y almacenar una gran cantidad de datos de manera sistemática utilizando este acordeón.

En este artículo, hablaremos sobre el acordeón y las URL. Esto es específicamente muy útil para agregar la dirección de las secciones del contenedor al historial del navegador. Además de eso, esto también es muy útil cuando queremos redirigir a una sección o panel específico. Para agregar esta característica, no necesitamos agregar ninguna clase específica, necesitamos agregar data-deep-link=”true” al contenedor de acordeón. Además, debemos agregar data-update-history=”true” al mismo, lo que garantizará que el historial de navegación se actualice cada vez que se haga clic en una pestaña de acordeón.

Sintaxis:

<ul class="accordion" data-accordion 
    data-deep-link="true" data-update-history="true">
      <li class="accordion-item" data-accordion-item>
          ...
      </li>
   <li class="accordion-item" data-accordion-item>
         ...
   </li>
</ul>

Ejemplo 1: el siguiente código muestra cómo agregar la función de URL al contenedor de acordeón.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- Foundation CSS Stylesheet -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
 
    <!-- jQuery CDN -->
    <script src=
    "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
 
    <!-- Foundation CSS JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
 
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>Foundation CSS Accordion and URLs</h3>
    <div style="width:1100px;">
 
        <!-- Creating an unordered list as an accordion -->
        <ul class="accordion" data-accordion
            data-deep-link="true" data-update-history="true">
            <li class="accordion-item" data-accordion-item>
                <a href="#first" class="accordion-title">
                    <h6>GfG Logo</h6>
                </a>
                <div class="accordion-content"
                    data-tab-content id="first">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                        alt="">
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#second" class="accordion-title">
                    <h6>DS</h6>
                </a>
                <div class="accordion-content"
                    data-tab-content id="second">
                    <p class="lead">
                        A data structure is a particular way
                        of organizing data in a computer so
                        that it can be used effectively. For
                        example, we can store a list of items
                        having the same data-type using the
                        array data structure.
                    </p>
 
 
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#third" class="accordion-title">
                    <h6>Algorithms</h6>
                </a>
                <div class="accordion-content"
                    data-tab-content id="third">
                    <p class="lead">
                        The word Algorithm means "A set of
                        rules to be followed in calculations
                        or other problem-solving operations"
                        Or "A procedure for solving a mathematical
                        problem in a finite number of steps that
                        frequently by recursive operations".
                    </p>
 
 
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#four" class="accordion-title">
                    <h6>Competitive Programming</h6>
                </a>
                <div class="accordion-content"
                    data-tab-content id="four">
                    <p class="lead">
                        Competitive Programming is a mental sport
                        which enables you to code a given problem
                        under provided constraints. The purpose of
                        this article is to guide every individual
                        possessing a desire to excel in this sport.
                        This article provides a detailed syllabus for
                        Competitive Programming designed by industry
                        experts to boost the preparation of the readers.
                    </p>
 
 
                </div>
            </li>
        </ul>
    </div>
     
    <script>
        $(document).foundation();
    </script>
</body>
 
</html>

Producción:

 

Ejemplo 2: El siguiente código demuestra la implementación de enlaces profundos a un contenedor de acordeón que tiene un atributo data-allow-all-closed=”true” agregado. Este atributo permite cerrar todas las pestañas al mismo tiempo. 

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- Foundation CSS Stylesheet -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">
 
    <!-- jQuery CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>
 
    <!-- Foundation CSS JavaScript -->
    <script src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js">
    </script>
</head>
 
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>Foundation CSS Accordion and URLs</h3>
    <div style="width: 1100px;">
        <!-- Creating an unordered list as an accordion -->
        <ul class="accordion" data-accordion data-deep-link="true"
            data-update-history="true"
            data-allow-all-closed="true">
            <li class="accordion-item" data-accordion-item>
                <a href="#first" class="accordion-title">
                    <h6>GfG Logo</h6>
                </a>
                <div class="accordion-content"
                    data-tab-content id="first">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
                        alt="">
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#second" class="accordion-title">
                    <h6>GfG</h6>
                </a>
                <div class="accordion-content"
                    data-tab-content id="second">
                    <p class="lead">
                        A Computer Science portal for geeks.
                        Gain and share your knowledge & skills
                        with a variety of learning platforms
                        offered by GeeksforGeeks. Billions of
                        Users, Millions of Articles Published,
                        Thousands Got Hired by Top Companies
                        and the numbers are still growing. We
                        provide a variety of services for
                        you to learn, thrive and also have fun!
                    </p>
 
 
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#third" class="accordion-title">
                    <h6>C++</h6>
                </a>
                <div class="accordion-content"
                    data-tab-content id="third">
                    <p class="lead">
                        C++ is a general-purpose programming
                        language and is widely used nowadays
                        for competitive programming. It has
                        imperative, object-oriented and generic
                        programming features. C++ runs on lots
                        of platforms like Windows, Linux, Unix,
                        Mac etc.
                    </p>
 
 
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#four" class="accordion-title">
                    <h6>Java</h6>
                </a>
                <div class="accordion-content"
                    data-tab-content id="four">
                    <p class="lead">
                        Java has been one of the most popular
                        programming languages for many years.
                        Java is Object Oriented. However, it is
                        not considered as pure object-oriented
                        as it provides support for primitive data
                        types (like int, char, etc)The Java codes
                        are first compiled into byte code
                        (machine-independent code). Then the byte
                        code runs on Java Virtual Machine (JVM)
                        regardless of the underlying architecture.
                    </p>
 
 
                </div>
            </li>
            <li class="accordion-item" data-accordion-item>
                <a href="#five" class="accordion-title">
                    <h6>Python</h6>
                </a>
                <div class="accordion-content"
                    data-tab-content id="five">
                    <p class="lead">
                        Python is a high-level, general-purpose
                        and a very popular programming language.
                        Python programming language (latest Python 3)
                        is being used in web development, Machine
                        Learning applications, along with all cutting
                        edge technology in Software Industry. Python
                        Programming Language is very well suited for
                        Beginners, also for experienced programmers
                        with other programming languages like C++
                        and Java.
                    </p>
 
 
                </div>
            </li>
        </ul>
    </div>
     
    <script>
        $(document).foundation();
    </script>
</body>
 
</html>

Producción:

 

Referencia: https://get.foundation/sites/docs/accordion.html#accordion-and-urls

Publicación traducida automáticamente

Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *