Souci d'affichage d'onglets PHP

jp31810 Messages postés 10 Date d'inscription   Statut Membre Dernière intervention   -  
jp31810 Messages postés 10 Date d'inscription   Statut Membre Dernière intervention   -
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:

2 réponses

Réponse 1 / 2
kij_82 Messages postés 4089 Date d'inscription   Statut Contributeur Dernière intervention   857
 
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)
0
jp31810 Messages postés 10 Date d'inscription   Statut Membre Dernière intervention  
 
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
?>
0
Réponse 2 / 2
kij_82 Messages postés 4089 Date d'inscription   Statut Contributeur Dernière intervention   857
 
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 ?
0
jp31810 Messages postés 10 Date d'inscription   Statut Membre Dernière intervention  
 
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 !
0
kij_82 Messages postés 4089 Date d'inscription   Statut Contributeur Dernière intervention   857 > jp31810 Messages postés 10 Date d'inscription   Statut Membre Dernière intervention  
 
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 ?
0
jp31810 Messages postés 10 Date d'inscription   Statut Membre Dernière intervention   > kij_82 Messages postés 4089 Date d'inscription   Statut Contributeur Dernière intervention  
 
c'est pareil
0

Discussions similaires

Les images ne s'affichent plus
papyrus95 -
melle -

15 réponses
impossible de voir les photos et videos sur une conversation messenger
cortomaltese83 -
Oceii -

4 réponses
Probleme d'affichage google chrome
flyingvvv -
helo -

5 réponses
Problème d'affichage d'une page web.
mk51 -
mk51 -

33 réponses