Bootstrap nos proporciona insignias para mostrar recuentos en un icono que se puede usar para mostrar notificaciones/mensajes no leídos, etc. Necesitamos obtener el valor de recuento en la insignia del icono y actualizar ese valor en consecuencia. En este artículo, crearemos un ícono de notificación que puede contener el conteo como lo hace una notificación no leída. Dividiremos esto en dos secciones diferentes en la primera sección crearemos la estructura del ícono y en la segunda sección diseñaremos el ícono y lo haremos receptivo.
Enfoque: Procederemos con los siguientes pasos para asegurarnos de que siempre podamos obtener el número de notificación/recuento de insignias para el ícono, independientemente de la estructura DOM.
- Envolviendo el icono y la insignia en el mismo elemento.
- Usando la función jQuery find() para extraer el conteo.
- Aumentar/Disminuir el recuento de la credencial a partir del valor extraído.
- Actualice el valor.
Creación de estructura: a continuación se muestra un código de muestra que usaremos como plantilla. Finalmente, aplicaremos jQuery según la declaración del problema para lo siguiente.
- Enlaces CDN para los iconos de Font Awesome:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js”></script>
- Código HTML:
HTML
<!-- Final Solution --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js"> </script> </head> <body> <div class="container-fluid"> <br> <br> <center> <h1>GeeksforGeeks</h1> <h4>Icon with count Badge: <!-- Wrapping the icon and badge --> <span id="group"> <button type="button" class="btn btn-info"> <i class="fa fa-envelope"></i> </button> <span class="badge badge-light">5</span> </span> </h4> <br> <br> <button class="btn btn-danger"> <i class="fas fa-minus"></i> Subtract </button> <button class="btn btn-success"> <i class="fas fa-plus"></i> Addition </button> </center> </div> </body> </html>
Diseño de la estructura: en esta sección, diseñaremos la estructura y también haremos que el icono responda.
- Código CSS:
CSS
<style>
h1 {
color:green;
}
.badge {
position: relative;
top: -20px;
left: -25px;
border: 1px solid black;
border-radius: 50%;
}
button {
margin:5px;
}
</style>
- Código JavaScript: la implementación del enfoque depende únicamente del desarrollador y la estructura DOM depende del caso de uso requerido. No es necesario que el desarrollador agrupe la insignia en el mismo elemento que el ícono.
javascript
<script>
// Use find() function to extract the badge
// count from '#group' container.
$(document).ready(function() {
$(".btn").click(function() {
var val = parseInt($('#group').find('.badge').text());
// Check for the button clicked
if ($(this).hasClass('btn-danger')) {
$('#group').find('.badge').text(val - 1);
} else if ($(this).hasClass('btn-success')) {
$('#group').find('.badge').text(val + 1);
}
});
});
</script>
Nota: Más adelante agruparemos esto enstringndo para aplicar jQuery en la insignia, independientemente de la implementación del desarrollador para la misma.
Combinación de código HTML, CSS y JavaScript: este es el código final que es la combinación de las dos secciones anteriores que crean la estructura y diseñan la estructura.
html
<!-- Final Solution -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/js/all.min.js">
</script>
<style>
h1 {
color:green;
}
.badge {
position: relative;
top: -20px;
left: -25px;
border: 1px solid black;
border-radius: 50%;
}
button {
margin:5px;
}
</style>
</head>
<body>
<div class="container-fluid">
<br>
<br>
<center>
<h1>GeeksforGeeks</h1>
<h4>Icon with count Badge:
<!-- Wrapping the icon and badge -->
<span id="group">
<button type="button" class="btn btn-info">
<i class="fa fa-envelope"></i>
</button>
<span class="badge badge-light">5</span>
</span>
</h4>
<br>
<br>
<button class="btn btn-danger">
<i class="fas fa-minus"></i>
Subtract
</button>
<button class="btn btn-success">
<i class="fas fa-plus"></i>
Addition
</button>
</center>
</div>
</body>
<script>
// Use find() function to extract the badge
// count from '#group' container.
$(document).ready(function() {
$(".btn").click(function() {
var val = parseInt($('#group').find('.badge').text());
// Check for the button clicked
if ($(this).hasClass('btn-danger')) {
$('#group').find('.badge').text(val - 1);
} else if ($(this).hasClass('btn-success')) {
$('#group').find('.badge').text(val + 1);
}
});
});
</script>
</html>
Salida :
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por devproductify y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA