Souci d'affichage d'onglets PHP
jp31810
Messages postés
10
Statut
Membre
-
jp31810 Messages postés 10 Statut Membre -
jp31810 Messages postés 10 Statut Membre -
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>
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>
Configuration: Windows XP Firefox 2.0.0.13
2 réponses
-
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)
-
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
?>
-
-
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 ?
-
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 !
- 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 ?
-
