Creare un menu a tab per siti web

Pagina 3 di 3

Caricare .js or .css files associati con una paginaesterna (in caso esista)

Se una particolare pagina esterna contiene dei JavaScripts odegli style sheets, dovete rimuoverli dal codice dellapagina, ed inserirli invece in files .js e .css separati.Dopodiché utilizzate un’altra feature di questoscript per caricare dinamicamente questi files quando la tabassociata viene selezionata. Questo step aggiuntivo ènecessario perché IE6 non sempre carica correttamentejs e stylesheets (inseriti direttamente nel codice) se lapagina è stata caricata via Ajax (una bella sorpresaeh?!).

Osservando il codice qui sotto:

<li><a href="whatever.php" rel="contentarea" rev="content.css, content.js">Forums</a></li>

Notate che è possivile utilizzare l’attributo"rev” dell’elemento <a> element perdire allo scriptdi caricare I files .css o .js esterniquando una tab viene selezionata, partendo dall’ipotesiche questi files presumibilmente contengano del codice chepunti alla pagina in questione. Files multipli vanno separatida una virgola. Come sempre potete utilizzare anche URLassolute se preferite, in questo caso anche URLsesterne:

<li><a href="whatever.php" rel="contentarea" rev="http://www.myothersite.com/stuff/content.css">Forums</a></li>

Multiple Ajax Tabs Contents nella stessa pagina

Quuest script supporta Tabs multiple nella stesa pagina: perfar questo è sufficiente aggiungere la parte HTMLdello script tante volte quanto desiderato, ricordandosi didare ad ogni tab un id unico, inizializzandole poi alla fine.Si veda il codice:

<ul id="maintab" class="shadetabs"><li><a href="external.htm" rel="ajaxcontentarea">Bird</a></li><li><a href="external2.htm" rel="ajaxcontentarea">Dog</a></li></ul><div id="ajaxcontentarea" class="contentstyle"><p>Default Content...</p></div><ul id="newstab" class="shadetabs"><li><a href="local.htm" rel="newscontentarea">Local</a></li><li><a href="world.htm" rel="newscontentarea">World</a></li></ul><div id="newscontentarea" class="contentstyle"><p>Default Content...</p></div><script type="text/javascript">startajaxtabs("maintab" , "newstab")</script>

In questo caso avrete due tabs assieme.