• Programmazione » Programmazione » Ajax - Tutorial, articoli e suggerimenti

Pagina 1 di 3

L'articolo di oggi ci porta nel mondo del contenttabbing,  tecnica utilizzata da molti portali (e nonsolo), per rendere disponibili notizie e contenuti fruibiliin maniera veloce ed elegante.

Lo script in questione utilizza Ajax per mostrare unaselezione di contenuti esterni nella vostra paginaall’interno di un DIV, il tutto via tabsdefinite latoCSS. Un comportamento speculare a quello della nuova hompaegedi Yahoo, che utilizza un concetto simile per mostrare lenotizie (si veda il box qui sotto):
 

Prima di iniziare bisogna specificare che questo scriptè stato prodotto da Dynamic Drive HTML, e da noi solorimaneggiato per rendervelo più chiaro.  

Detto questo, ecco qui di seguito le caratteristiche delnostro script, che ci porteranno ad ottenere un risultatoassolutamente similare a quello visto poco fasull'immagine di Yahoo, (come potete testarenell'esempio che abbiamo preparato): 

• Esecuzione di fetch e display di una pagina esterna (ma appartenente allo stesso dominio) all’interno di un  container, nel momento in cui un tab viene cliccato.
• Aggiunta di  un "contenuto di default" all’interno del container da mostrare nel caso in cui nessun tab venga selezionato. Nota: questo contenuto viene aggiunto direttamente alla vostra pagina, perciò questo passaggio non si avvarrà di tecniche Ajax (per questioni di efficienza del server).
• Per ogni tab – se lo desiderate -potete non solo caricare una pagina esterna, ma anche caricare css e js esterni, associati con la pagina in questione.
• Supporto di Tabs multiple all’interno della stessa pagina.
• Lo script infine è totalmente non intrusivo e search engine friendly. Le tabs sono semplicemente links basati su di una lista. Per i motori di ricerca o i browsers con JavaScript disabilitato,il contenuto apparirà come pagine vere e proprie (anziché contenuto inserito nel codice direttamente via Ajax).

Lo scopo di questo script è principalmente essereefficace, oltre che apparire gradevole.Nota: per l'interfaccia è statoutilizzato Shade Image Tabs Menu, che è comunquefacilmente sostituibile con qualsiasi altro css menu divostra scelta.

Detto questo, vediamo ora quale sarà il risultatocliccando qui (esempio)

Nota: Per motivi di sicurezza, le pagineesterne caricate da ogni tab devono provenire dallo stessosito in cui si trovano le tabs . Ongi file .css e .jsassociato con queste pagine, invece, può provenire daqualsiasi dominio.

Istruzioni per la configurazione:

Innanzitutto scaricate e scompattate il pacchetto completo,contenente script ed esempio, cliccando qui. Come potetevedere nel file index.htm, l’HTML per inserire edattivare le Ajax tabs appare come segue:

<ul id="maintab" class="shadetabs"><li class="selected"><a href="#default" rel="ajaxcontentarea">Intro</a></li><li><a href="external.htm" rel="ajaxcontentarea">Canarino</a></li><li><a href="external2.htm" rel="ajaxcontentarea">Cane</a></li><li><a href="external3.htm" rel="ajaxcontentarea">Gatto</a></li><li><a href="external4.htm" rel="ajaxcontentarea" rev="content.css, content.js">Foca</a></li></ul><div id="ajaxcontentarea" class="contentstyle"><p>Questo è il testo di default inserito direttamente nella pagina. E' l'unico testo che non viene richiamato tramite Ajax..</p></div><script type="text/javascript">//lo script inizializza le tabs per l'UL con id="maintab" per tab multiple, separare gli id con una //virgola.startajaxtabs("maintab")</script>

Come abbiamo visto, tutte le tabs sono solo normalissimeliste con un link testuale per attivare la pagina esterna dacaricare. ora però arriva la parte un po piùimpegnativa, che richiede un po più confidenza con loscript stesso e i suoi componenti. Vediamo dunque iltutto unpo più in dettaglio:
 

• id="maintab" , class="shadetabs": l'id dovrebbe essere un ID arbitrario ma unico che viene aggiunto all’elemento <UL> della tab in questione. La CLASS="shadetabs" dovrebbe essere aggiunta così com’è,visto che dà il layout alle tabs.
• class="selected": Aggiungete questo attributo al tab<LI> che volete come selezionato di default quando viene caricata la pagina. Il contenuto associato a questo tab verrà caricato automaticamente. Opzionale
• href="pagina_da_caricare": Utilizzate l’attributo "href" dell’elemento <a> di ogni tab per dire allo script quale pagina esterna va caricata via Ajax. La pagina può essere un qualsiasi file, ad es file.htm, ciao.txt, or outside.php etc. Se invece volete che venga caricato il "default content" , che viene aggiunto direttamente nel container, dovete semplicemente utilizzare la keyword "#default".
• rel="contentarea": Aggiungete questo attributo nell’elemento <a> per ogni tab di modo da dire allo script di caricare lo script all’interno del DIV container dello stesso ID (in questo caso, "contentarea").
• rev="oggetti da caricare": Aggiungete questo attributo nell’elemento <a> di una specifica tab se volete caricare dinamicamente dei files .js o .css files per la pagina esterna in questione. Nel caso di files multipli da aggiungere, separate i files with con una virgola(ie: "stile.css, scipt.js". Opzionale.
• Finalmente, chiamate la funzione call  startajaxtabs("maintab") dopo aver definito la parte HTML delle tabs, in modo da attivare lo script, dove "maintab" sarà l’ID delle tabs appena impostate. Quualora aveste diverse tabs nella stessa pagina, basterà attivarle tutte inserendo gli id nella funzione, seguiti dalla virgola.[esempio startajaxtabs("maintab" , "maintab2"]