PHPfrance

la communauté d'entraide francophone dédiée au PHP

souci affichage onglets php

4 messages   •   Page 1 sur 1
   Outils de sujet
perezj
Petit nouveau ! | 2 Messages

18 avr. 2008, 15:48

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>
x@v
Mammouth du PHP | 570 Messages

18 avr. 2008, 19:31

sans la classe ont risque pas de comprendre quoi que se soit :!:
Modérateur PHPfrance
Modérateur PHPfrance | 7636 Messages

20 avr. 2008, 00:13

Modération :
perezj, afin d'améliorer la lisibilité de ton message,
pense à utiliser les balises [code] ou [php] (selon le langage utilisé).

Elles sont disponibles au-dessus de la zone de saisie de ton message
lorsque tu postes un nouveau message.

Des indications sont disponibles sur la manière de mettre en forme vos messages dans la FAQ

PS: profite du "up" que je viens de te faire pour donner suite à ton sujet...

/!\ Avant de poster se documenter et rechercher.
Qui ne sait pas rendre un service n'a pas le droit d'en demander.
MaBrute
Petit nouveau ! | 2 Messages

28 avr. 2008, 14:15 

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;">&nbsp;</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 {
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épondre
4 messages   •   Page 1 sur 1
   Outils de sujet