Dunque, dunque...
Le schede le puoi creare come una serie di div flottanti:
Codice PHP:
<div id="menu">
<div id="tab1" style="float:left;" onclick="selectTab(1);" onmouseover="over(this);" onmouseout="out(this);">item1</div>
<div id="tab2" style="float:left;" onclick="selectTab(2);">item2</div>
<div id="tab3" style="float:left;" onclick="selectTab(3);">item3</div>
</div>
Puoi aggiungere ai div gli eventi onmouseover e onmouseout per gestire il fatto che l'utente posi il mouse sulle schede (nell'esempio l'ho applicato solo alla prima).
Codice PHP:
function over(tag) //mouse sull'elemento
{
tag.style... //imposta grafica particolare quando il mouse è sull'elemento
}
function out(tag) //mouse esce dall'elemento
{
tag.style... //resetta grafica di defaul per l'elemento
}
Tramite l'attributo style del div puoi cambiargli la grafica a piacimento. Puoi anche lavorare con img al posto di div e cambiare l'attributo src. (Questi effetti possono essere fatti anche con i css anzichè con funzioni JS ma non sono pienamente compatibili).
Quando l'utente clicca sulla scheda si attiva la funzione selectTab:
Codice PHP:
function selectTab(tab)
{
switch(tab)
{
case 1: showTab1(); return;
case 1: showTab2(); return;
case 1: showTab3(); return;
}
}
La funzione tramite switch chiamerà la funzione specifica per gestire la data scheda.
A questo punto ha bisogno che si evochi una finestrella (dialog) con all'interno del codice!
Comincia con l'inserire questo div nella tua pagina index principale:
Codice PHP:
<div id="dialog" style="display:none; position:fixed;"></div>
Questo tramite display none sarà invisibile fino a quando lo chiameremo.
Torniamo a showTab1 e leghiamo le cose:
Codice PHP:
function showTab1()
{
var dialog = document.getElementById("dialog"); //collegamento al div dialog
dialog.style.left = "100px"; //posizione x del dialog evocato
dialog.style.top = "50px"; //posizione y del dialog evocato
dialog.style.display = "block"; //mostra dialog
//INSERIRE HTML NEL DIALOG
}
Al posto dell'ultimo commento (INSERIRE HTML NEL DIALOG) puoi usare due tipi di codici in base all'esigenza. Se necessiti di semplice html ti basterà fare questo:
Codice PHP:
dialog.innerHTML = "[i]sono la prima scheda[/i]";
Se invece vuoi inserire del php (o meglio: html generato tramite php 
) devi necessariamente fare una chiamata AJAX e l'intera funzione prenderà queste sembianze:
Codice PHP:
function showTab1()
{
var dialog = document.getElementById("dialog"); //collegamento al div dialog
dialog.style.left = "100px"; //posizione x del dialog evocato
dialog.style.top = "50px"; //posizione y del dialog evocato
dialog.style.display = "block"; //mostra dialog
var xmlhttp = window.XMLHttpRequest? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); //ajax
xmlhttp.open("POST","tagHandler.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length",1);
xmlhttp.setRequestHeader("Connection","close");
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
dialog.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send("tab=1");
}
Lavorando con il metodo post puoi anche bypassare la precedente funzione con lo switch e mandare direttamente la richiesta di tab attraverso il metodo POST.
Ricordati poi di impostare una via di uscita per la dialog (X in alto a destra o chiudendola se l'utente seleziona qualcosa al suo interno:
Codice PHP:
function closeDialog()
{
document.getElementById("dialog").style.display = "none";
}
Ok, penso sia tutto. Ho battuto il codice a mano quindi ci sarà sicuramente qualche errorino, sepro tu abbia capito la logica di lavoro 
Rispondi quotando
