Header Ads Widget

Ticker

6/recent/ticker-posts

Cambiar la vista de cuadrícula y lista con jQuery

 En este tutorial, veremos cómo cambiar la vista de cuadrícula y lista usando jquery. Este ejemplo lo ayudará a comprender fácilmente cómo crear una vista de cuadrícula / lista en html usando jquery. Este concepto se usa generalmente en el sitio web de comercio electrónico, donde puede ver el producto en cuadrícula y en la vista de lista con un solo clic en el botón.

Eche un vistazo a cómo crear una vista de lista y una vista de cuadrícula en html usando jquery.

HTML

<div id = "contenedor">
       <span class = "switcher grid"> Vista de cuadrícula </span>
        <span class = "switcher list"> Vista de lista </span>
        <hr>

   <ul class = "lista">
        <li> Cuadro 1 </li>
        <li> Cuadro 2 </li>
        <li> Cuadro 3 </li>
        <li> Cuadro 4 </li>
        <li> Cuadro 5 </li>
        <li> Cuadro 6 </li>
        <li> Cuadro 7 </li>
        <li> Cuadro 8 </li>
        <li> Cuadro 9 </li>
        <li> Cuadro 10 </li>
    </ul>
</div>    

jQuery

<script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js "> </script>
<script>
$ (documento) .ready (function () { 

$ ('. switcher'). on ("clic", función () { 

if ($ (esto) .hasClass ('lista')) {
$ ('# contenedor ul'). removeClass ('cuadrícula');
$ ('# contenedor ul'). addClass ('lista');
}

if ($ (esto) .hasClass ('cuadrícula')) {
$ ('# contenedor ul'). removeClass ('lista');
$ ('# contenedor ul'). addClass ('cuadrícula');
}
});
});

</script>

CSS

.switcher
{
ancho: 85px;
altura: 35px;
relleno: 10px;
margen: 3px;
color: #fff;
fondo: # 325980;
}
li
{
fondo: # 1a3e19;
margen: 10px;
color: #fff;
relleno: 10px;
}
.list li
{
ancho: 100%;
estilo de lista: ninguno;
}

.grid li
{
 bloqueo de pantalla;
 ancho: 25%;
 pantalla: bloque en línea;
}

Script de descarga de demostración en vivo

Publicar un comentario

0 Comentarios