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.
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!
[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!
