souci affichage onglets php

par **perezj** » 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 
?>

par **Truc** » 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...

par **x@v** » 18 avr. 2008, 19:31

sans la classe ont risque pas de comprendre quoi que se soit

par **perezj** » 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>

souci affichage onglets php

Répondre

Étendre la vue Revue du sujet : souci affichage onglets php

souci affichage onglets php