Bootstrap proporciona muchas funciones útiles que generalmente integramos en nuestros sitios web. Uno de ellos es la función » Cargar más » que podemos ver en cada segundo sitio web que visitamos. La función cargar más se utiliza para cargar más o mostrar más contenido disponible en la página web para el visitante. Inicialmente, la mitad del contenido está oculto, solo una parte es visible para el visitante. Y cuando se hace clic en el botón Cargar más, aparece el contenido restante. Esta característica también le da al sitio web un aspecto limpio. Esta es una característica muy interesante que debe probar en su sitio web.
Enfoque: la función Cargar más de bootstrap se puede integrar en el sitio web al incluir un script particular (que se muestra a continuación) y algunas bibliotecas de javascript en el código. Este script divide todos los elementos correspondientes a una clase en particular, en partes con un tamaño de acuerdo con la función de corte y muestra las diferentes partes una tras otra al hacer clic en el botón cargar más en la pantalla. Y cuando el tamaño se vuelve cero, es decir, no quedan más elementos, muestra el texto «No más para ver».
Veamos la implementación paso a paso de cómo integrar la función Cargar más en el sitio web paso a paso.
Paso 1: solo necesita incluir el siguiente script en su sitio web para que funcione el botón «cargar más». Aquí, .block es la clase de los elementos en el código HTML, en los que aplicaremos la función Cargar más y #cargar es la identificación del botón Cargar más.
<script >
$(document).ready(function() {
$(".block").slice(0, 2).show();
if ($(".block:hidden").length != 0) {
$("#load").show();
}
$("#load").on("click", function(e) {
e.preventDefault();
$(".block:hidden").slice(0, 2).slideDown();
if ($(".block:hidden").length == 0) {
$("#load").text("No More to view").fadOut("slow");
}
});
})
</script>
Paso 2: también debe incluir las siguientes bibliotecas de JavaScript en su archivo HTML como scripts.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com /ajax/libs/jqueryui/1.12.1/jquery-ui.min.js”></script>
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Load more function Example:2
</title>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
<style>
h1 {
color: #3C8E3D;
}
.block {
display: none;
font-size: 20px;
}
#load {
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<h1 align="center">
<b> GeeksforGeeks <br>
<u>Load more function</u>
</b>
</h1>
<div class="container">
<div class="block">
An array is a collection of items stored
at contiguous memory locations.The idea
is to store multiple items of the same
type together. This makes it easier to
calculate the position of each element
by simply adding an offset to a base
value, i.e., the memory location of the
first element of the array (generally
denoted by the name of the array).
</div>
<div class="block">
The base value is index 0 and the
difference between the two indexes is
the offset. For simplicity, we can
think of an array as a fleet of stairs
where on each step is placed a value
(let’s say one of your friends). Here,
you can identify the location of any of
your friends by simply knowing the count
of the step they are on.
</div>
<div class="block">
In C language, array has a fixed size
meaning once the size is given to it,
it cannot be changed i.e. you can’t
shrink it neither can you expand it.
The reason was that for expanding, if
we change the size we can’t be sure
( it’s not possible every time) that we
get the next memory location to us as free.
</div>
<div class="block"> <br>
Types of indexing in an array: <br>
0 (zero-based indexing) <br>
1 (one-based indexing) <br>
n (n-based indexing)
</div>
</div>
<div id="load"> <b> Load More </b></div>
<script>
$(document).ready(function () {
$(".block").slice(0, 1).show();
if ($(".block:hidden").length != 0) {
$("#load").show();
}
$("#load").on("click", function (e) {
e.preventDefault();
$(".block:hidden").slice(0, 1).slideDown();
if ($(".block:hidden").length == 0) {
$("#load").text("No More to view")
.fadOut("slow");
}
});
})
</script>
</body>
</html>
Producción:
Explicación: En este ejemplo, inicialmente solo se veía un párrafo en la salida, y con cada clic para cargar más botón , aparece un párrafo más, esto se debe a que en la función de división que mencionamos (0,1) esta vez.
Publicación traducida automáticamente
Artículo escrito por bhawnaatrish y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA