Je vous présente d'abord comment va-t-on utiliser le programme pour créer des onglets ensuite je vous préseterai les classes utilisées. Vous allez voir c'est facile:
Comment ça marche?
Le programme qu'on doit écrire pour utiliser le générateur d'onglets est le suivant:
<?php
//classes à utiliser
require_once("classes/tabs.php");
//------------------------
//définition des onglets
//------------------------
//le conteneur des onglets
$tabs = new tabs($id="t1", $title="eCommerce");
//Un onglet
$tabs->Add($title="Inscription", $contents="inscription.htm", $selected=true);
//Un second Onglet
$tabs->Add($title="Catalogue", $contents="catalogue.htm");
//Et un troisième
$tabs->Add($title="Facture", $contents="facture.htm");
//Afficher les onglets
$tabs->get();
//Et c'est terminé
?>Remarquez que vous pouvez afficher n'importe où dans votre page HTML : dans des <div>, des <td>, des <p> ...
Comme vous pouvez créer autant de conteneurs d'onglets indépondants dans une même page HTML. C'est cool non
Et voici maitenant les classes à utiliser. En fait il y'en a deux: la classe "tabs" qui construit le conteneur des onglets avec un afficheur unique et la classe élémentaire "tab" qui elle s'occupe du comportement d'un onglet.
En principe, un onglet (tab) porte un titre et est sensible au clic. Quand on clic dessus, une fonction javascript doit charger la page définie comme "content" de l'onglet et l'afficher dans un afficheur unique situé dans le conteneur des onglet (tabs) Cet afficheur est à base d'un "iframe" capable de charger tout type de contenu dont la source est externe.
La fonction javascript doit aussi simuler graphiquement l'effet "activé" de l'onglet cliqué. Pour ce faire elle recharge des images de bordures et de fond de la cellule de l'onglet. Ces images ne consomment que quelques pixels (entre 1 et 3) celle du fond est répliquée par un effet repeat-x du style background-image.
Il s'agit en fait de 3 couples d'images:
- 1. un couple on/off pour le cadre gauche "images/Left_tab_on.gif" et "images/Left_tab_off.gif"
2. un couple on/off pour le contenu de l'onglet "images/Center_tab_on.gif" et "images/Center_tab_off.gif"
3. un couple on/off pour le cadre droit "images/Right_tab_on.gif" et "images/Right_tab_off.gif"
le mot "on" veut dire une couleur vive
le mot "off" veut dire une couleur sombre
Pour les dimensions consultez la classe "tab.php"
Amusez-vous bien
Classe "tabs.php"
--------------------
<?php
require_once("tab.php");
class tabs {
var $id, $title="", $collection=null, $width="100%", $height="100%", $style='';
function tabs($id, $title="", $width="100%", $height="100%", $collection=null, $style='background:transparent'){
$this->id = $title."_".($id?$id:rand(1,100));
$this->title = $title;
$this->width = $width?$width:"100%";
$this->height = $height?$height:"100%";
$this->collection = $collection;
$this->style = $style;
}
function Add($title=null, $contents=null, $selected=false, $width='Auto', $height='21px', $style=''){
$this->collection[] = new tab($parent=$this->id, $title, $contents, $selected, $width, $height, $style);
}//end function Add()
function get(){
if ($this->collection && is_array($this->collection) && count($this->collection)>0){
echo "<script> var tabs_{$this->id} = new Array(); var selectedTabId = null; </script>
<h2 style='$this->style'>{$this->title}
<table style='$this->style' cellpadding=0 cellspacing=0 border=0><tr>";
$id_tab_selected = 0; //tab sélectionné par défaut
foreach ($this->collection as $index=>$tab){
echo "<td style='padding:0'>";
$tab->get();
echo "</td>";
if ($tab->selected) $index_tab_selected = $index;
}
$largeur_contenu = count($this->collection)+1;
echo <<<HTML
<script>
//sélection par défaut
window.onload=function(){selectTab_{$this->collection[$index_tab_selected]->id}();};
</script>
<td style="padding:0; border-style:solid; border-width:0 0 1 0; border-color:silver;"> </td></tr>
<tr><td colspan="$largeur_contenu"><iframe id="tab_{$this->id}_contents" src="{$this->collection[$index_tab_selected]->contents}"
style="width:{$this->width}; height:{$this->height}; border-style:solid; border-width:0 1 1 1; border-color:silver; overflow:Auto;"></iframe>
</td></tr></table></h2>
HTML;
}//end if ($this->collection...
}//end function get()
}//end class tabs
?>-------------------------
<?php
class tab {
var $parent, $id, $title, $contents, $selected, $width, $height, $style;
function tab($parent, $title=null, $contents=null, $selected=false, $width='Auto', $height='21px', $style='background:transparent'){
$this->parent = $parent;
$this->id = preg_replace("#\s|[^a-zA-Z1-9]#", "_", "id_$title");
$this->title = $title;
$this->contents = $contents;
$this->selected = $selected;
$this->width = $width;
$this->height = $height;
$this->style = $style;
}//end constructor class tab
function get(){
$parent = $this->parent;
$id = $this->id;
$title = $this->title;
$contents = $this->contents;
$onOff = $this->selected?"on":"off";
$width = $this->width;
$height = $this->height;
$style = $this->style;
echo <<<HTML
<table style="$style" cellpadding=0 cellspacing=0 border=0 width=100%>
<tr>
<td id="left_tab_$id" style="background-image:url(images/Left_tab_$onOff.gif); width:3px; height:$height; text-align:center; padding:0; border-style:none; cursor:pointer" onClick="selectTab_$id();"></td>
<td id="center_tab_$id" style="background-image:url(images/Center_tab_$onOff.gif); width:$width; height:$height; text-align:center; padding:0; border-style:none; cursor:pointer" onClick="selectTab_$id();"
onMouseOver="window.status=this.innerText;" onMouseOut="window.status='';">$title</td>
<td id="right_tab_$id" style="background-image:url(images/Right_tab_$onOff.gif); width:5px; height:$height; text-align:center; padding:0; border-style:none; cursor:pointer" onClick="selectTab();"></td>
</tr>
</table>
<script>
var i = tabs_{$parent}.length;
tabs_{$parent}[i] = new Array();
tabs_{$parent}[i][0] = "$id";
tabs_{$parent}[i][1] = "$title";
tabs_{$parent}[i][2] = "$contents";
function selectTab_$id(){
document.getElementById("left_tab_$id").style.background = "url(images/Left_tab_on.gif)";
document.getElementById("center_tab_$id").style.background = "url(images/Center_tab_on.gif)";
document.getElementById("center_tab_$id").style.color = "";
document.getElementById("right_tab_$id").style.background = "url(images/Right_tab_on.gif)";
document.getElementById("tab_{$parent}_contents").src = "$contents";
selectedTabId = '$id';
for (i=0; i<tabs_{$parent}.length; i++) {
var id = tabs_{$parent}[i][0];
if (id != '$id'){
document.getElementById("left_tab_"+id).style.background = "url(images/Left_tab_off.gif)";
document.getElementById("center_tab_"+id).style.background = "url(images/Center_tab_off.gif)";
document.getElementById("center_tab_"+id).style.color = "white";
document.getElementById("right_tab_"+id).style.background = "url(images/Right_tab_off.gif)";
}
}
return;
}
</script>
HTML;
}//end function get()
}//end class tab
?>