Contenu du snippet
Permet d'afficher des onglets sur une page.
Fonctionne maintenant avec Mozilla FireFox 0.8 :-)
Source / Exemple :
<HTML>
<HEAD>
<style>
.TabCommon {FONT: 18px Verdana; COLOR: #6D6D6D; PADDING: 5px; FONT-WEIGHT: bold; TEXT-ALIGN: center; HEIGHT: 30px; WIDTH: 100px;}
.TabContent {PADDING: 5px;}
.TabContentBottom {PADDING: 10px; BORDER-BOTTOM: 2px outset #99ccff;}
.TabOff {CURSOR: hand; BACKGROUND-COLOR: #E2E2E3; BORDER-LEFT: 1px solid #BBBBBB;}
.TabOn {CURSOR: default; BORDER-TOP: 2px outset #D1D1D1; COLOR: #000000;}
.TabBorderBottom{BORDER-BOTTOM: 2px inset #D1D1D1;}
.TabActiveBorderLeftRight{BORDER-RIGHT: 2px outset #D1D1D1; BORDER-LEFT: 2px outset #D1D1D1;}
.TabActiveBackground {BACKGROUND-COLOR: #F7F8F3;}
</style>
<script>
function TabClick( nTab ){
Col = document.getElementsByName("Content");
for (i = 0; i < document.getElementsByName("Content").length; i++)
{
document.getElementsByName("tabs")[i].className = "TabBorderBottom TabCommon TabOff";
document.getElementsByName("Content")[i].style.display = "none";
}
document.getElementsByName("Content")[nTab].style.display = "block";
document.getElementsByName("tabs")[nTab].className = "TabCommon TabOn TabActiveBackground TabActiveBorderLeftRight";
}
</script>
</HEAD>
<BODY onload="TabClick(0);">
<TABLE CELLPADDING=0 CELLSPACING=0 ALIGN="center" STYLE="width: 450px">
<TR>
<TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(0);"><NOBR>Onglet 1</NOBR></TD>
<TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(1);"><NOBR>Onglet 2</NOBR></TD>
<TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(2);"><NOBR>Onglet 3</NOBR></TD>
<TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(3);"><NOBR>Onglet 4 ...</NOBR></TD>
<TD CLASS="TabBorderBottom" STYLE="width: 50px;"> </TD>
</TR>
<TR>
<TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight">Texte commun </TD>
</TR>
<TR>
<TD COLSPAN=5 CLASS="TabContent TabActiveBackground TabActiveBorderLeftRight TabContentBottom">
<DIV ID="Content" NAME="Content">contenu Onglet 1</DIV>
<DIV ID="Content" NAME="Content">contenu Onglet 2</DIV>
<DIV ID="Content" NAME="Content">contenu Onglet 3</DIV>
<DIV ID="Content" NAME="Content">contenu Onglet 4</DIV>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Conclusion :
Fonctionne maintenant avec Mozilla FireFox 0.8 :-)
A voir également
- #d1d1d1
- Onglet javascript - Meilleures réponses
- Onglet html css javascript - Guide
- Html onglets dynamiques - Guide
- Navigateur à onglets gérant ses favoris et qui peut se dupliquer (==>capture) - Codes sources - Visual Basic / VB.NET (API)
- Dreampopup: onglet style mx - Codes sources - Visual Basic / VB.NET (Control)
- Excel - synthese des onglets - boucle sur onglet - Codes sources - Visual Basic / VB.NET (VBA)
juste un truc : il vaut mieu mettre le ONCLICK en miniscule
il faut mettre:
$row_sup_html .= ' <TD CLASS="TabBorderBottom TabCommon TabOff" ID="tabs" NAME="tabs" ONCLICK="TabClick(' . $index . ');"><NOBR>Onglet ' . $onglet['titre'] . '</NOBR></TD>';
Et cela suppose d'avoir une table comme celle qui suit:
CREATE TABLE `onglet` (
`id` int(11) NOT NULL auto_increment,
`contenu` text NOT NULL default '',
`titre` varchar(255) NOT NULL default '',
`visibility` varchar(1) NOT NULL default '1',
KEY `id` (`id`)
) TYPE=MyISAM
après, ça doit rouler tout seul. Je verrais demain à publier un source avec cette modification.
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.