WordPress dalla versione 2.7 supporta il threading dei commenti, ovvero l’incapsulamento di tutte le discussioni di un articolo. Il tag wp_list_comments() si prende carico della gestione delle liste nidificate, delle classi associate ad ogni livello di commento, di predisporre i link giusti e di recuperare i contenuti dei commenti. Il problema nasce quando si vuole personalizzare la modalità di visualizzazione dei commenti. In questo caso è necessario utilizzare l’opzione di callback che viene fornito nella lista degli argomenti di wp_list_comments().

Un callback è un’istruzione per eseguire un’altra funzione definita. Nel nostro caso la useremo per personalizzare il codice HTML dei commenti, pur mantenendo la possibilità di utilizzare il threading.
 

Definiamo il callback

 
Per prima cosa definiamo la nostra funzione di callback ed inseriamola nel file function.php (ovviamente ricordatevi si fare una copia di backup).
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

function miotema_comment($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment;
?>
	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
		<div id="comment-<?php comment_ID(); ?>">
			<div class="comment-author vcard">
				<?php echo get_avatar( $comment->comment_author_email, 48 ); ?>
				<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
			</div>
			<?php if ($comment->comment_approved == '0') : ?>
				<em><?php _e('Il tuo commento è in attesa di moderazione.') ?></em>
				<br />
			<?php endif; ?>
 
			<div class="comment-meta commentmetadata">
				<a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a>
				<?php edit_comment_link(__('(Edit)'),'  ','') ?>
			</div>
                        </br></br>
			<?php comment_text() ?>
			<div class="reply">
				<?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
			</div>
		</div>
<?php
}

 
Vediamo quale funzione entra in gioco.
 
comment_class()
Questa funzione crea un elenco di classi come class = “classe1 class2 class3″ per identificare i commenti pari/dispari, la profondità attuale dei commenti o altro.
 
comment_ID()
L’ID è il numero univoco del commento in corso.
 
get_avatar()
Utilizza l’e-mail per associare un gravatar. Primo parametro deve essere l’oggetto $ comment, il secondo è il formato per l’avatar, l’ultimo è l’URL di un avatar di default (deve essere URL completo).
 
get_comment_link()
Ottiene il link al commento in corso.
 
edit_comment_link()
Ottiene il link per modificare il commento corrente.
 
comment_text()
Ottiene il testo del il commento in corso.
 
comment_reply_link()
Ottiene il link per rispondere al commento in corso.
 

Agganciamo la nostra funzione

 
Il layout che andiamo a ridefinire è quello generato proprio da wp_list_comments(). Per fare ciò è sufficiente fornire il parametro “callback=nome_funzione” per indicare a WordPress di ignorare il normale comportamento della funzione e utilizzare invece una nostra versione personalizzata.
 
Nel nostro file comments.php andiamo dunque a modificare wp_list_comments() in questo modo:
 

1

wp_list_comments ('callback=miotema_comment');

 
Ovviamente è possibile utilizzare un foglio di stile CSS per rendere i commenti gradevoli da vedere:  per esempio io ho utilizzato questo metodo e questo è il risultato:
 

 
Tutto qui. Come sempre lasciate dei commenti o magari mandatemi una e-mail. Anche eventuali suggerimenti o consigli sono sempre graditi.

Per la visualizazione degli articoli più popolari uso il plugin WordPress.com Popular Post. Tale plugin permette molte personalizzazioni, ma manca la possibilità di poter visualizzare le immagini riferite ai post. L’idea di fondo parte da questo articolo che spiega come aggiungere delle immagini all’elenco dei post con l’ausilio di uno script esterno. Senza utilizzare script esterni, possiamo, invece, sfruttare le nuove features di WordPress 3.x.

Nel momento in cui vogliamo il percorso dell’immagine associata al post il programma procederà in questo modo:

• cerca la thumbnail associata al post;
• nel caso in cui il tema non supporti tale funzione o non si è inserita in fase di creazione del post, cerca la prima immagine nel post;
• nel caso in cui il post non abbia neanche una immagine, me associa una di default.

Vediamo come:

1) Modifica del plugin

Andando in Plugin->Editor selezioniamo il plugin WPPP e quindi il file wppp.php.

Per prima cosa troviamo il codice:

1
2
3
4
5
6
7

// Replace format with data
$replace = array(
'%post_permalink%' => get_permalink( $post['post_id'] ),
'%post_title%' => esc_html( $this->truncateText( $post['post_title'], $instance['title_length'] ) ),
'%post_title_attribute%' => esc_attr( $post['post_title'] ),
'%post_views%' => number_format_i18n( $post['views'] )
);

e aggiungiamo la seguente riga:

1

$replace['%post_thumb%']=return_post_image($post['post_id']);

A questo punto dobbiamo inserire la funzione return_post_image.

2) Modifica del file function.php

Nel file function.php aggiungiamo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/**
* Capture the first image from the post.
* @global object $post
* @global object $posts
* @return string
*/
function theme_function_capture_first_image($p=null) {
$firstImg = '';
if (empty($p)) {
global $post, $posts;
$firstImg = '';
ob_start(); ob_end_clean();
$output = preg_match_all('//i', $post->post_content, $matches);
$firstImg = $matches[1][0];
} else {
$output = preg_match_all('//i', $p->post_content, $matches);
$firstImg = $matches[1][0];
}
return $firstImg;
}
 
// ritorna una immagine associata al post: thumb, prima immagine del post, default
 
function return_post_image($post,$dim) {
$imgpath = '';
if (empty($dim)) $dim = array(60,60);
$imgpath=get_the_post_thumbnail($post, $dim );
if (empty($imgpath)) {
$imgpath = theme_function_capture_first_image(get_post($post));
if (empty($imgpath)) $imgpath = get_bloginfo('template_directory').'/images/default_pp.gif';
$imgpath = '<img src="' . $imgpath . '" alt="'. $title .'" />';
}
return $imgpath;
}

N.B.: Di default la dimensione dell’imamgine è di 60×60. Nel caso in cui noi volessimo una immagine di dimensione diversa, per esempio 32×32, basta modificare la chiamata alla funzione nel file wppp.php in questo modo:

1

replace['%post_thumb%']=return_post_image($post['post_id'], array(32,32));

Un’altra modifica, in futuro, potrebbe essere fare in modo di passare la dimensione dei thumbs nel momento in cui viene richiamato il plugin.

A questo punto quando richiamiamo il plugin avremo a possibilità di inserire il tag %post_thumb% che ci darà l’<img> riferita all’immagine associata al post.

3) il CSS per lo stile

Concludiamo con il css per lo stile dell’elenco dei post, che nel mio caso è:

1
2
3
4
5
6
7
8
9
10
11
12
13

/*Popular Posts*/
 
ul.wppp_list li {
min-height:65px;
display:block;
list-style:none outside none;
}
 
ul.wppp_list img {
float:left;
margin-right:4px;
border:2px solid #ECEFF5;
}

Ed ecco il risultato finale:

Enjoy it!

Aggiornando la piattaforma alla versione 3.x di WordPress, il tema che avete installato precedentemente sicuramente non conterrà le nuove funzioni di personalizzazione dell’intestazione e dello sfondo del blog. Grazie a semplici modifiche ai files del tema è possibile inserire, lato pannello di amministrazione, queste funzioni in modo da modificare l’aspetto del blog senza dover agire sul codice del tema stesso.

la Testata

Tra le novità di WordPress 3.x vi è il pannello per la personalizzazione delle intestazioni. E’ possibile accedere alle intestazioni personalizzate abilitando la voce nel pannello di amministrazione di WordPress 3.x anche se il vostro tema non lo supporta nativamente.
Per fare ciò basta inserire nel file function.php le seguenti linee di codice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

define( 'HEADER_IMAGE', '%s/images/logo.jpj' ); //logo di defaul
define( 'HEADER_IMAGE_WIDTH', apply_filters( '', 948 ) ); // Larghezza del logo
define( 'HEADER_IMAGE_HEIGHT', apply_filters( '', 180 ) ); // Altezza del logo
define( 'NO_HEADER_TEXT', true );
add_custom_image_header( '', 'admin_header_style' ); // Abilita la voce nel pannello di controllo 
 
// Foglio di stile per il pannello amministratore
if ( ! function_exists( 'admin_header_style' ) ) :
function admin_header_style() {
?>
<style type="text/css">
#headimg {
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width: <?php echo HEADER_IMAGE_WIDTH; ?>px;
}
#headimg h1, #headimg #desc {
display: none;
}
</style>
<?php
}
endif;

Nel pannelo di controllo nel menu “aspetto” comparirà la voce “Testata”.

Selezionandola, comparirà la nuova pagina di amministrazione per la scelta delle immagini da inserire nell’header del blog.
Una volta caricate le immagini possiamo anche decidere di visualizzarle in maniera random.

Nel header.php basta inserire la seguente linea di codice:

1

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

o anche

1

<div id="header-container" style="background: url('<?php echo header_image(); ?>');">

lo Sfondo

Altra modifica possibile per utilizzare le nuove funzioni di WordPress 3.x è la possibilità di personalizza lo sfondo

Aggiungendo nel file function.php la linea di codice:

1

add_custom_background();

nel pannello di amministrazione comparirà la voce “Sfondo” nel menù “Aspetto”:

Selezionandola, comparirà la nuova pagina di amministrazione per la scelta dello sfondo da inserire nel blog.

Enjoy it and.. see you soon!

WordPress include un meccanismo semplice per introdurre dei menù di navigazione personalizzati nel proprio tema. Per incorporare nel tema il supporto al menù, è necessario aggiungere poche righe di codice. Innanzitutto nel file functions.php del tema, si deve scrivere una funzione per registrare il nome dei menù che si vogliono creare. Il nome sarà quello che comparirà nella pagina del pannello di amministrazione di WordPress alla pagina Aspetto->Menu.

Per esempio, tramite questo codice, nel box “Posizione dei temi” comparirà la posizione “Menu Intestazione”:

function register_my_menus() {
  register_nav_menus(
    array('menu-intestazione' => __( 'Menu Intestazione' ))
  );
}

questo codice, invece, farà comparire due nuove posizioni:

function register_my_menus() {
register_nav_menus(
  array(
    'menu-intestazione' => __( 'Menu Intestazione' ),
    'menu-extra' => __( 'Menu Extra' ))
  );
}

Per assicurarsi che il tema attivi l’opzione dei menù personalizzati, è necessario aggiungere anche questa riga che comunica al tema di eseguire la funzione “register_my_menus”:

add_action( 'init', 'register_my_menus' );

A questo punto resta da inserire nel tema la posizione in cui vogliamo che il menù (o i vari menù) siano visualizzati. Per far questo si deve aprire nell’editor il file del template corrispondente alla posizione desiderata e inserire una chiamata alla funzione wp_nav_menu() per ciascuna posizione. Per esempio, si vuole posizionare il menu “Menu Intestazione”, precedentemente registrato nel file header.php, in modo che compaia nella testata del tema. Il codice da inserire è il seguente:

<?php wp_nav_menu(  array( 'theme_location' => 'menu-intestazione' ));  ?>

IMPORTANTE: il nome associato a theme_location deve essere lo stesso inserito in functions.php.

Questa funzione crea una lista del tipo

<ul> 
  <li></li>
  <li></li>
</ul>

Se si aggiunge alla funzione wp_nav_menu() il parametro “container_class”, si può specificare la classe associata al menù:

<?php wp_nav_menu(array('theme_location' => 'menu-intestazione',
        'container_class' => 'classe_menu_intestazione'));  ?>

In questo modo si può personalizzare la grafica del menù specificando nel CSS gli attributi della classe “classe_menu_intestazione”.

Oppure, come nel mio caso, se già esiste nel foglio di stile una classe per i menù tradizionali, basta sostituire il codice all’interno, per esempio, del

<div id=”menu”>......</div>

richiamando la funzione

<?php wp_nav_menu(  array( 'theme_location' => 'menu-intestazione' ));  ?>

Enjoy it and.. see you soon!

Ormai del mio tema per wordpress, che ho scaricato tra quelli gratuiti nel lontano 2009, ci sta ben poco. Nel corso dei mesi tante sono state le modifiche: supporto ai plugin, ai widget, agli script in JQuery, modifiche in php che adesso ad elencarli tutti ho davvero tanta difficoltà. Wordpress si aggiorna, introduce nuove funzioni e nuove possibilità di fare blogging, ma il mio tema “no, non lo voglio cambiare!”.

Così, armato di santa pazienza, googlando un pò in giro, ecco che mi ritrovo per l’ennesima volta a far modifiche.

Vediamo la prima: la funzione post thumbnail (miniature).

Le icone che vedere associate agli articoli di questo blog sono in realtà associate alle categorie (uso il plugin Category Icons). Pertanto esse non sono direttamente legate al contenuto dell’articolo. Stanco della visualizzazione testuale a lista dei post correlati ho installato il plugin Related Posts Thumbnails che crea un riquadro per ogni articolo correlato inserendo una immagine contenuta nell’articolo stesso. Problema: e se nel contenuto non vi sono inserite delle immagini? Il plugin usa la minitura associata all’articolo!

Per attivare la gestione lato backend della “miniatura articolo” è sufficiente editare il file functions.php e inserire le seguenti linee di codice che, nell’ottica di compatibilità e stabilità, sono:

if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
}

Fatto questo, entrando nell’amministrazione e andando nella modifica di un post, troveremo sulla sidebar destra un nuovo pannello:

Con

1

<!--?php get_post_thumbnail();?-->

recuperiamo l’url della nostra thumbnail e possiamo tranquillamente inserirlo nel loop in questo modo ad esempio:

1

<div><img src="<?php get_post_thumbnail(); ?>" alt="<?php the_title(); ?>" /></div>

Enjoy it and.. see you soon!

La Stereovisione o Stereoscopia^W è una tecnica di realizzazione e visione di immagini, disegni, fotografie e filmati, finalizzata a trasmettere una illusione di tridimensionalità, analoga a quella generata dalla visione binoculare del sistema visivo umano. La visione stereoscopica consente di inferire la struttura tridimensionale di una scena osservata da due o piu’ telecamere (nel caso di due telecamere si parla di visione binoculare).

Il principio alla basa della visione stereoscopica, noto sin dal rinascimento, consiste in una triangolazione mirata a mettere in relazione la proiezione di un punto della scena sui due (o più) piani immagine delle telecamere (e.g. tali punti sono denominati punti omologhi) che compongono il sistema di visione stereoscopico (stereo rig). L’individuazione dei punti omologhi, problema noto in letteratura come il problema della corrispondenza (correspondence problem o matching stereo), consente di ottenere una grandezza denominata disparità (disparity) mediante la quale, conoscendo opportuni parametri del sistema stereoscopico, è possibile risalire alla posizione 3D del punto considerato.

Se volete approfondire l’argomento in maniera esaustiva vi consiglio di iniziare a leggere l’articolo di Stefano Mattoccia.

Partendo dal codice dove catturavo il flusso video da una sola webcam per visualizzarlo su una “label”, questa volta ho cercato di catturare il flusso video da due webcam e visualizzarle contemporaneamente sullo schermo. Per una maggiore fluidità nel refresh delle immagini (almeno 30 frame al secondo) ho usato le librerie opengl. Unico accorgimento: non collegare le due webcam sullo stesso canale USB (hub USB).

Ambiente di programmazione:

• C++ basato sul tool MINGW
• framework QT 4.7.4
• IDE QTcreator 2.3
• librerie OpenCV 2.3.1

Ringrazio Walter Lucetti che mi ha evitato ore ed ore di studio per utilizzare le opengl in ambiente QT4.

Le webcam utilizzate

Il programma in esecuzione

Ed ecco il codice:
Note: There is a file embedded within this post, please visit this post to download the file.
ovviamente dovete cambiare il percorso delle lib e degli include relative a OpenCV.
Enjoy it!

Vi presento il mio piccolo ed umile progetto: un player, molto spartano, che visualizza il flusso video catturato da una webcam.

Ambiente di programmazione:

• C++ basato sul tool MINGW
• framework QT 4.5.3
• IDE QTcreator 1.2.1
• librerie OpenCV

Il framework QT permette di creare programmi multipiattaforma: modificando solo il percorso delle librerie e degli “include” posso compilare lo stesso pregramma e crearmi degli eseguibili per win32, linux32 o macosx. Le OpenCV sono delle librerie opensource per la computer vision e per maggiori ragguagli vi rimando a questo dettagliato articolo di Matteo Lucarelli.

Link:
QT 4.5.3 win32
QT 4.5.3 linux32
QT 4.5.3 macosx

OpenCV library
di tutto e di più sulle OpenCV

Il codice è molto semplice, l’unica difficoltà riscontrata è stata su come far visualizzare l’immagine della cam sul widget. Scorrazzando su internet ho trovato del codice che mi ha permesso di trasformare l’immagine rilasciata dalla libreria opencv in una label.
Di seguito il risultato su tre diversi S.O.

WIN7

Linux Ubuntu 9.10

Mac OS X 10.5.8

Ed ecco il codice:
Note: There is a file embedded within this post, please visit this post to download the file.
ovviamente dovete cambiare il percorso delle lib e degli include relative a OpenCV; visto che questo punto l’ho studiato per tutti e tre i S.O. se avete problemi chiedete pure.

Enjoy it!

Dopo avere giocherellato con l’OSX 10.5.8, il Leopardo dell’Apple, ho cominciato a navigare sul web googlando alla ricerca di informazioni riguardante la programmazione in ambiente OSX, finché non mi ha incuriosito questo articoletto del 2005, ma che ho scoperto essere ancora di grande attualità.

Registrato al sito dell’Apple riservato agli sviluppatori (Mac Dev Center), ho scaricato ed installato l’ambiente di sviluppo integrato Xcode^W 3.1.2.
Xcode lavora in congiunzione con Interface Builder^W (IB), un tool grafico per realizzare interfacce grafiche. Xcode include GCC, che è in grado di compilare codice C, C++, Objective C/C++ e Java. Supporta ovviamente i framework Cocoa e Carbon, oltre ad altri.
Mi sono dunque soffermato sull’Objective C^W , linguaggio di programmazione orientata agli oggetti^W e su Cocoa , il framework o ambiente di programmazione orientato agli oggetti sviluppato da Apple Inc. per il sistema operativo Mac OS X.
A questo punto, per iniziare, consiglio una lettura attenta, dei primi dieci capitoli (sono abbastanza brevi) del sito MACOCOA e di qualche tutorial (in rete se ne trovano diversi anche in italiano) come:
Programmare MacOSX
Diventare un Xcoder (e-book)
Presto, dopo essermi ben documentato, le prime impressioni e magari qualche prima piccola applicazione.
Enjoy it!

PHPGraphLib è una libreria “preconfezionata”, orientata agli oggetti e scritta in php che utilizza le librerie GD. Essa è destinata alla creazione di grafici per l’inserimento di questi ultimi in pagine web. I grafici permettono di mostrare a tutti i dati o risultati numerici in maniera più chiara tramite l’utilizzo di immagini e colori.

L’uso della libreria facilita il compito agli sviluppatori meno esperti anche perché include un sistema di gestione degli errori molto efficace. I risultati ottenibili con questa libreria sono veramente stupefacenti, la potenza del codice inserito nell’unica pagina di PHPGraphLib possono essere utilizzati al massimo, date le piccole dimensioni di quest’ultima.
Sul sito dell’autore (Elliott Brueggeman) possiamo trovare la pagina di download da dove scaricare la libreria, disporre della guida ufficiale e di alcuni esempi testuali e video.
Per potere utilizzare PHPGraphLib bisogna salvare i due file contenuti nella libreria, “phpgraphlib.php” e “phpgraphlib_pie.php”, in una cartella. Successivamente occorrerà modificare il file php.ini ed eliminare il commento ( ; ) alla riga “extension=php_gd2.dll” nel caso sia commentata.
Per ultimo occorrerà includere il file *.php della libreria nella nostra pagina php e scrivere il codice per creare il grafico.
Nota: bisogna creare in grafico in una pagina php a parte e richiamarla come imagine nella pagine dove vogliamo visualizzare il grafico.

Vediamo dei semplici esempi:

include("phpgraphlib.php"); 
$graph=new PHPGraphLib(500,350);
$data=array(12124,5535,43373,22223,90432,23332,15544,24523,32778,38878,28787,33243,34832,32302);
$graph->addData($data);
$graph->setTitle("Widgets Produced");
$graph->setGradient("red", "maroon");
$graph->createGraph();

salviamolo come “immagine.php” e richiamiamo il grafico nella pagina htlm con

<img src="immagine.php"/>

il risultato è il seguente:

Nella pagina Statistiche di questo blog ho utilizzato queste librerie.
Nel caso del diagramma a torte, per esempio, passo dinamicamente i valori da diagrammare in questo modo:

<img src="<?php echo "statistiche_torta.php?a=$a&r=$r&s=$s&m=$m" ?/>" />

Nel file ” statistiche_torta.php”

    include ("phpgraphlib.php");
    include ("phpgraphlib_pie.php");
 
    $a=$_GET['a'];
    $r=$_GET['r'];
    $s=$_GET['s'];
    $m=$_GET['m'];
 
    $graph=new PHPGraphLibPie(450,250);
    $data=array("Aggregatori"=>$a, "Motori di ricerca"=>$r,"Social Network"=>$s, "E.mail"=>$m);
    $graph->addData($data); 
    $graph->setLabelTextColor("silver");
    $graph->setLegendColor("silver");
    $graph->setLegendOutlineColor("white");    
    $graph->setTitle("Parlano di me....");
    $graph->setLabelTextColor("50,50,50");
    $graph->setLegendTextColor("50,50,50");
    $graph->createGraph();

Ovviamente è possibile passare direttamente l’array da diagrammare oppure ricavare i valori eseguendo query in mysql, complicando il codice.

Enjoy it!

Un effetto molto gradevole ed utile nell’economia di un sito web è senz’altro un’interfaccia a tab. JQuery permette di crearne di complesse ma la volontà di questo articolo è descriverne uno base, semplice, ma comunque funzionale e facilmente adattabile a molte esigenze.

Il risultato è questo: demo

Nel pacchetto Note: There is a file embedded within this post, please visit this post to download the file.
oltre allo script jQuery, troverete anche i file e la cartella:

• index.htm
• style.css
• scripts.js
• cartella images

Passo 1 – creazione delle immagini

Decidete quanti tab sono necessari al vostro progetto (nel mio caso 3). Se non siete bravi in grafica e design cercate su internet le immagini che concettualmente si avvicinano al contenuto di ogni tab.
Modificate le dimensioni tenendo conto dello spazio che volete utilizzare.
A questo punto duplicate la vostra immagine e modificatela con effetti a piacere. Una volta terminato, create una nuova immagine ed incollate sopra la figura modificata e sotto la figura originale. (vedi immagine)

Passo 2 – file HTML e CSS

Se aprite il file index.html troverete:

<ul id="tabMenu">  
     <li class="tabrss selected"></li> <!-- bottone di default-->  
     <li class="tabpost"></li>  
    <li class="tabcom"></li>  
</ul>

Nel file style.css, il div “tabMenu” è associato a:

li.tabcom  {background:url(images/tabcom.png) no-repeat 0 -77px;}
li.tabrss  {background:url(images/tabrss.png) no-repeat 0 -77px;}
li.tabpost {background:url(images/tabpost.png) no-repeat 0 -77px;}  
li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -77px;}
li.selected {background-position:0 0;}

Come potete notare di default l’immagine (di dimensioni 77px / 77px) parte da -77 px (quindi viene vusualizzata la sezione a colori), se si passa il cursore del mouse sopra (voce “li.mouseover” nel file style.css) parte da 0 px (quindi viene visualizzata la sezione in b/n), così come quando viene selezionata (voce “li.mouseover” nel file style.css). Quindi avremo, a secondo i casi, una situazione del genere:

Il contenuto delle tre tab (ma se ne possono aggiungere altre a piacere) andrà inserito nella seguente struttura contenuta nel file index.html:

<div class="boxBody">
<div id="posts" class="show">    <!-- pagina di default-->  
 
......................</div>
<div id="famous">
 
...............</div>
<div id="comments">
 
.................</div>
</div>

Ovviamente bisogna lavorare di CSS per rendere il tutto più gradevole.

Passo 3 – file JS

Nel file script.js è contenuta la funzione per la gestione dei tab con l’effetto a finestra nel cambio tra un tab e l’altro.

//nasconde il tab precedente
$('.boxBody div').slideUp("slow");
 
//visualizza il tab selezionato
$('.boxBody div:eq(' + $('#tabMenu > li').index(this) + ')').slideDown('1500');

In questo modo utilizziamo solo la libreria jQuery. Se voglamo altri effetti, come il fade alle immagini (invece della tecnica sopra illustrata) o altri effetti sul contenuto dei tab, ovviamente il file script.js sarà più complicato ed inoltre sarà necessario caricare i plugin di jQuery.

Enjoy it!