Panel Component
Description
Panel est un composant "groupe de panneau" se recouvrant, semblable aux "Volets"
de l'explorateur de fichier Microsoft, ou encore à la Sidebar de Mozilla.
L'essentiel des traitements est DHTML, a savoir un bout de javascript et une feuille de style
cls.panel.php est la classe PHP facilitant la création de ce panel côté serveur.
Compatibilité
Testé sur Mozilla 5 / Netscape 6, IE 5
Conforme aux spécifications DOM, Panel devrait fonctionner sans problème sur les navigateurs respectant cette norme.
Panel ne fonctionnera pas ou mal sur des navigateurs antérieurs: NS4-, IE4- .
Vous pouvez cela dit ameliorer Panel en y incluant une version degradée ( avec un appel server lors du changement
de panneau)
Synopsis
Voici un petit exemple affichant la circulation sur Paris dans un
panel à 3 panneaux. Capture pour les malheureux non équipé de navigateur compatible DOM.
include "cls.panel.php";
$pan = new Panel();
$pan->addPanel( "traffic1", "Ile de France", "traffic1.html" );
$pan->addPanel( "traffic2", "Périphérique" , "traffic2.html" );
$pan->addPanel( "traffic3", "Paris", "traffic3.html" );
$pan->setWidth( "460px" );
$pan->setOpenPanel( "traffic1" );
$pan->setPanelBgColor( "black" );
echo ">head";
?>
<style type="text/css">
body {
background-color: #4080A0;
margin: 0 0 0 0;
align: top;
}
body,td {
font-size: 0.8em;
font-family: "Ms Sans Serif",Helvetica;
}
</style>
<?
$pan->DisplayHead();
echo ">body";
$pan->Display();
echo ">/html";
NB: Les 3 fichiers traffic.html contiennent un simple tag IMG.
Documentation
Panel()
constructeur du composant
$panel = new Panel();
AddPanel( identifier, title, file )
Ajoute un panneau au Panel
- identifier est l'identifiant de ce panneau, il doit etre unique.
- title est le titre affiché du panel
- file est le chemin du fichier à inclure dans le panel.
Vous pouvez spécifier une URL si votre version de PHP supporte les include() d'URLs.
$panel->addPanel( "pan_search", "Recherche", "search_form.html" );
$panel->addPanel( "pan_results", "Résultats", "search_results.php" );
DisplayHead()
Affiche le code javascript et CSS utilisés pour le mécanisme de Panel.
A invoquer de préférence dans la partie HEAD de la page HTML.
Display()
Affiche le panel.
Appelle conditionnellement DisplayHead(), en cas d'oubli par exemple.
setPanelBgColor( $color )
défini la couleur de fond du panel
$panel->setPanelBgColor( "lightgray" );
setWidth( $w )
Défini la largeur du Panel. $w doit comporter l'unité de mesure CSS.
Optionnel, par défaut 100% du container parent.
$panel->setWidth( '300px');
Pour forcer la largeur, vous pouvez également placer le panel dans une table avec un width défini
setHeight( $h )
Défini la hauteur du panel, barres de titres exclus. $h doit comporter l'unité de mesure CSS.
$panel->setHeight( '600px');
setOpenPanel( $panelid )
Ouvre par défaut le panel identifié par panelid
$panel->setOpenPanel('doc');
Conseils
Dans le cas ou le contenu d'un panneau depasse, des scrollbars apparaisse automatiquement
Cela pose quelques soucis d'affichage à Mozilla lors du swapping d'un panneau à un autre.
Pour desactiver les scrollbars, commenter la ligne overflow: auto; dans la feuille de style.
Pour coller le panel au bord de la fenetre, utilisez le CSS suivant:
body {
margin-left: 0;
margin-top: 0;
}
Pour l'apparence générale de la page, utilisez une feuille de style à part, cf. exemple ci-dessous
Todo
- setTitleBgColor( $color ) or equiv. to customize title bar
- addPanelContent( id, content ) to add some HTML content to a panel
Statut
Auteur : Leo West
Contact : <maito:lwest@free.fr>
Generated on Fri, 16 Feb 2001 17:54:01 by RFC Engine Processor - © 1998-2000 Leo West