Souci d'affichage d'onglets PHP

Fermé

jp31810 Messages postés 10 Date d'inscription mardi 4 septembre 2007 Statut Membre Dernière intervention 17 avril 2008 - 17 avril 2008 à 15:00
jp31810 Messages postés 10 Date d'inscription mardi 4 septembre 2007 Statut Membre Dernière intervention 17 avril 2008 - 17 avril 2008 à 16:55

Bonjour,
Pour des raisons de ré utilisabilité, j'utilise des classes (php et javascript) trouvées sur le web pour afficher des onglets dans une page html.
Mon souci est que seul le contenu du dernier onglet s'affiche même en cliquant sur les différents onglets et en utilisant la variable $selected=true.
En fait, le get affiche rapidement le contenu des différents onglets mais reste bloqué sur le dernier.
Comment puis je contourner ce problème ?
Je peux envoyer les sources des classes si nécessaire.

<html>
<body>
<?php
//classes à utiliser
require_once("../classes/tabs.php");

//------------------------
//définition des onglets
//------------------------

//le conteneur des onglets
$tabs = new tabs($id="t1", $title="Administration");

//onglet d'administration des utilisateurs
$tabs->Add($title="Utilisateurs", $contents="Utilisateur.php", $selected=true);
//onglet d'administration des organismes
$tabs->Add($title="Organismes", $contents="Organismes.html");
//onglet d'administration des groupes
$tabs->Add($title="Groupes", $contents="Groupes.html");
//onglet d'administration des roles
$tabs->Add($title="Roles", $contents="Roles.html");
//onglet d'administration des applications
$tabs->Add($title="Applications", $contents="Applications.html");

//Afficher les onglets
$tabs->get();

?>

</body>
</html>

A voir également:

Souci d'affichage d'onglets PHP
Restaurer onglets chrome - Guide
Easy php - Télécharger - Divers Web & Internet
Affichage double ecran - Guide
Windows 11 affichage classique - Guide
Comment agrandir l'affichage de l'écran - Guide

2 réponses

Réponse 1 / 2

kij_82 Messages postés 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
17 avril 2008 à 15:05

Bonjour,

Pour pouvoir te répondre il faudrait que l'on voit comment fonctionne ce fameux get() :)
Tu peux mettre le code de ta classe tabs ? (s'il n'est pas trop excessif je peux t'aider je pense)

jp31810 Messages postés 10 Date d'inscription mardi 4 septembre 2007 Statut Membre Dernière intervention 17 avril 2008
17 avril 2008 à 15:24

classe tabs :
<?php
require_once("tab.php");
class tabs {
var $parent, $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
?>

classe tab:
<?php
class tab {
public $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->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
?>

Réponse 2 / 2

kij_82 Messages postés 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857
17 avril 2008 à 16:16

Le code m'a l'air d'être correct, je n'arrive pas trop à voir pourquoi le dernier apparaitrait.
Il y a bien le premier qui apparait c'est ça ? Avec en plus le dernier ?

jp31810 Messages postés 10 Date d'inscription mardi 4 septembre 2007 Statut Membre Dernière intervention 17 avril 2008
17 avril 2008 à 16:25

effectivement le conteneur apparraît bien ainsi que l'entête de tous les onglets mais quel que soit le sous onglet sur lequel on clique, seul le contenu d'applications s'affiche !

kij_82 Messages postés 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013 857 > jp31810 Messages postés 10 Date d'inscription mardi 4 septembre 2007 Statut Membre Dernière intervention 17 avril 2008
17 avril 2008 à 16:45

Et si au lieu de cette ligne :

$tabs->Add($title="Utilisateurs", $contents="Utilisateur.php", $selected=true);

tu mets :

$tabs->Add("Utilisateurs", "Utilisateur.php", true);

Que se passe-t-il ?

Sinon les classes n'ont pas été développée par toi, mais sont-elles sensée fonctionner ?
J'ai un gros doute sur certaines fonctions.
N'y a-t-il pas un endroit où tu peux joindre celui qui a fait ces sources ?

jp31810 Messages postés 10 Date d'inscription mardi 4 septembre 2007 Statut Membre Dernière intervention 17 avril 2008 > kij_82 Messages postés 4089 Date d'inscription jeudi 7 avril 2005 Statut Contributeur Dernière intervention 30 septembre 2013
17 avril 2008 à 16:55

c'est pareil

Discussions similaires

adele

Comment supprimer les onglets?

onglets qui restent ouverts

Impossible de trouver l'icône "onglets" sur le J3 2016

Les onglets restent ouverts