🥇Cómo cambiar de jQuery a Vanilla JS con Bootstrap 5

agosto 4, 2020

Portada » Cómo cambiar de jQuery a Vanilla JS con Bootstrap 5

Cómo cambiar de jQuery a Vanilla JS con Bootstrap 5

A continuación presentamos cómo cambiar de jQuery a Vanilla JS con Bootstrap 5, considerando que Bootstrap 5 es un marco de CSS gratuito y de código abierto dirigido al desarrollo web front-end receptivo y móvil.

Recientemente lanzaron Bootstrap 5 alpha, lo que ha eliminado jQuery como una dependencia, sin admitir a Internet Explorer 9 y 10, y trae algunas actualizaciones para archivos Sass, marcado y una nueva API de utilidades.

A continuación mostraremos los pasos básicos para usar VanillaJS en lugar de jQuery al crear sitios web con la versión reciente de Bootstrap 5.

El proceso de inicio

Se sugiere incluir Bootstrap 5 en el proyecto. Hay varias formas de hacerlo, pero para simplificarlo incluiremos el marco a través de CDN.

Primero, deberemos crear una página index.html en blanco dentro de una carpeta de proyecto:

<!DOCTYPE html>

<head>

<title>Bootstrap 5 Vanilla JS tutorial by Themesberg</title>

</head>

<body>

</body>

</html>

Después hay que incluir la hoja de estilo bootstrap.min.css antes del final de su etiqueta <head>:

Posteriormente hay que incluir la biblioteca Popper.js y el archivo JavaScript Bootstrap principal antes del final de la etiqueta <body>:

En este caso integrity y crossorigin significan atributos, veamos la razón:

Atributo de integridad: permite que el navegador verifique la fuente del archivo para asegurarse de que el código no se cargue si la fuente fue manipulada.

Atributo de origen cruzado: se manifiesta cuando se carga una solicitud utilizando ‘CORS’, que es un requisito de comprobación SRI cuando no se carga desde el ‘mismo origen’.

La última versión de Bootstrap tiene como diferencia principal ya no se requiera jQuery como dependencia, ya que ahorra aproximadamente 82.54 KB en ancho de banda en un estado minimizado.

Cambio de jQuery a Vanilla JS

Debemos considerar que usar Bootstrap 5 con jQuery todavía es posible de acuerdo con la documentación oficial.

Recomendamos usar JavaScript de Vanilla si la única razón por la que se usa jQuery fue para tener el selector de consultas, porque puedes hacer lo mismo con document.querySelector(‘#element’) como si lo fuera $(‘#element’).

Primeramente crearemos un archivo JavaScript para incluirlo antes del final de la etiqueta del cuerpo, pero después de los otros dos hay que incluir lo siguiente:

Entonces, ¿cuándo se requiere usar Javascript con Bootstrap 5? Hay ciertos componentes en el marco que funcionan solo si se inician a través de Javascript, como información sobre herramientas, popovers y toasts.

Además, con componentes como modales, menús desplegables y carruseles, es posible que quieras cambiarlos mediante programación en función de la respuesta del usuario o la lógica de la aplicación.

Inicialización de herramientas a través de Vanilla JavaScript

La información sobre herramientas no funciona si no se inicializan mediante JavaScript. Primero deberemos crear un elemento de información sobre herramientas dentro del archivo index.html:

Tooltip on top

</button>

Al pasar el cursor sobre el botón no mostrará información sobre herramientas, ya que de forma predeterminada es una función opcional de Bootstrap y debería inicializarse de forma manual con JavaScript. Si se quiere hacer con jQuery, se vería:

$(‘#tooltip’).tooltip();

Usando Vanilla JS se requiere utilizar el siguiente código para habilitar la información sobre herramientas:

var tooltipElement = document.getElementById(‘tooltip’);

var tooltip = new bootstrap.Tooltip(tooltipElement);

Este código selecciona el elemento con la identificación única de «información sobre herramientas» y crea un objeto de información sobre herramientas de Bootstrap. Luego se puede usar eso para manipular el estado de la información sobre herramientas, como mostrar u ocultar la información sobre herramientas mediante programación.

Aquí hay un ejemplo de cómo podría mostrarlo y ocultarlo mediante algunos métodos:

var showTooltip = true;

if (showTooltip) {

tooltip.show();

} else {

tooltip.hide();

}

Si deseas habilitar la información sobre herramientas, también se puede usar el siguiente código:

var tooltipTriggerList = [].slice.call(document.querySelectorAll(‘[data-toggle=»tooltip»]’));

var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {

return new bootstrap.Tooltip(tooltipTriggerEl)

});

Lo que sucede en este caso, es que seleccionamos los elementos que tienen el atributo data-toggle=»tooltip» y el valor e inicializamos un objeto de información sobre herramientas para cada uno. También los guarda en una variable tooltipList.

Visibilizar elementos con métodos de colapso JavaScript

La función de colapso en Bootstrap es otra forma útil de mostrar y ocultar elementos mediante atributos de datos o JavaScript.

A continuación veremos cómo mostrar u ocultar una tarjeta cuando se hace clic en cierto botón. Primero creemos el marcado HTML:

<button id=»toggleCardButton» type=»button» class=»btn btn-primary mb-2″>Toggle Card</button>

<h5 class=»card-title»>Freecodecamp.org</h5>

<p class=»card-text»>Awesome resource to learn programming from.</p>

<a href=»#» class=»btn btn-primary»>Learn coding for free</a>

</div>

Entonces deberemos crear un botón con la identificación toggleCardButton y una tarjeta con la identificación card. Tendremos que seleccionar dos elementos:

var toggleButton = document.getElementById(‘toggleCardButton’);

var card = document.getElementById(‘card’);

Necesitaremos crear un objeto de colapso con el elemento de tarjeta seleccionado:

var collapsableCard = new bootstrap.Collapse(card, {toggle: false});

La bandera toggle:false mantendrá el elemento visible después de crear el objeto. Si no está presente, ocultará la tarjeta por configuración.

Debemos agregar un detector de eventos para el clic de la acción:

toggleButton.addEventListener(‘click’, function () {

// do something when the button is being clicked

});

Finalmente tenemos que alternar la tarjeta con el objeto de colapso que inicializamos de esta forma:

toggleButton.addEventListener(‘click’, function () {

collapsableCard.toggle();

});

Ahora la tarjeta se mostrará y ocultará cada vez que se haga clic en el botón. Todo esto podría haberse hecho utilizando la función de atributos de datos de Bootstrap, pero da la posibilidad de alternar ciertos elementos en función de una llamada API o de la lógica en la aplicación.

A manera de conclusión decimos que se puede usar el marco CSS más popular sin la necesidad de requerir jQuery en su proyecto. Esto permitirá guardar hasta 85 KB de datos.

Leíste: Cómo cambiar de jQuery a Vanilla JS con Bootstrap 5, te recomendamos: Cómo Git Bisect ayuda a la depuración

Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode

Bootstrap 5, Cambio de jQuery a Vanilla JS, El proceso de inicio, Inicialización de herramientas a través de Vanilla JavaScript, Pasos para cambiar de jQuery a Vanilla JS con Bootstrap 5

agosto 4, 2020

Cómo cambiar de jQuery a Vanilla JS con Bootstrap 5

El proceso de inicio

Cambio de jQuery a Vanilla JS

Inicialización de herramientas a través de Vanilla JavaScript

Redacción