Guida jQuery: creare post o elementi con background “a zebra” alternato

Nell’articolo-guida su jQuery di oggi vediamo come creare una struttura post (o elementi in generale) con background “a zebra” ovvero colorati in modo alternato.

SCOPRI LA DEMO >>

Una soluzione molto facile e veloce da mettere in atto ma che talvolta rende il design molto pulito e gradevole e sopratutto capace di mettere in risalto il contenuto della pagina. Questa soluzione non è nuova: le sue vere “radici” risiedono nelle tabelle html, si aveva infatti la necessità di dividere le varie righe con colorazioni alternate proprio per migliorare la leggibilità dei contenuti. Oggi vi spiego come riprodurre lo stesso effetto non usando però le tabelle, bensì dei banali div (applicabili senza alcuna difficoltà anche nel vostro tema wordpress). Potete, ad esempio colorare in modo alternato i vari post presenti nel loop del vostro sito WordPress.

La struttura HTML

La struttura html è molto essenziale:

<div id="post-cont">

	<div class="post">
    <h1>Viva Targetweb</h1>
    </div>

	<div class="post">
    <h1>Viva Targetweb2</h1>
    </div>

	<div class="post">
    <h1>Viva Targetweb3</h1>
    </div>

	<div class="post">
    <h1>Viva Targetweb3</h1>
    </div>

</div><!--post cont-->

Abbiamo un div contenitore “post_cont” e al suo interno andiamo a posizionare i div con la classe “post ” a cui andremo ad applicare il nostro script. Come vedete la struttura di base è identica a quella del loop di WordPress.

Stile & sviluppo del progetto

Lo stile richiede solo una classe fondamentale, ovvero la classe con il colore con cui andremo a colorare i vari div “post”.

.post-color{ background:#cbddf0;}

Scelto lo stile e il colore andiamo a vedere lo script che rende possibile la colorazione ” a zebra” alternata dei post:

	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script>
		$(document).ready(function() {

			$('.post:even').addClass('post-color');		

		});//FINE DOM

		</script>

Anche in questo caso lo script è molto elementare: si tratta di usare il selettore :even per selezionare la classe “.post” in modo alternato. Dopodichè una volta selezionati solo i div(.post) che ci servono andiamo ad aggiungere la classe di colorazione specificata nel css con la funzione jQuery addClass() che permette, come suggerisce il nome, di aggiungere una classe al div (o elemento in generale) selezionato.

Conclusioni

Come avrete notato la soluzione che vi ho proposto oggi è molto semplice sia da creare che da mettere in atto nei modi più disparati (blog wordpress, sito statico etc etc.). Spero vi sia utile per i vostri progetti!

LICENZA: Lo script è usabile e modificabile in tutte le sue parti! Se lo hai migliorato fammelo sapere nei commenti o nei social network, potresti essere protagonista su targetweb.it!

– VISITA LA DEMO

[viral-download file1=”http://www.targetweb.it/download/2012/zebra-bg-jquery-targetweb.rar” name1=”Scarica lo script!” url=”http://www.targetweb.it/guida-jquery-creare-post-o-elementi-con-background-a-zebra-alternato/” message=”Per scaricare il file completo devi condividere l’articolo su un social network. ” tweet=”#jQuery – Creare post o elementi con background “a zebra” alternato” thankyou=”Grazie per aver condiviso, clicca sul link qui sotto:”/]

 INSPIRATIONS (applicato a tema WordPress)

Se l’articolo ti è piaciuto o ti è stato utile condividilo sui tuoi social network preferiti! o fammi sapere cosa ne pensi nei commenti!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Nuovo Font creativo per web designer: Prosto

Nuovo Font creativo per web designer: Prosto