Visualisation d'une page Webjax
Controls.Container.Panel
Le widget Controls.Container.Panel permet de transformer ou de créer des fenêtres au sein d'une page.
Ce widget peut être intéressant afin d'éviter d'inclure des popups dans un site.
Vous verrez en suivant le cours de cette page que les fenêtres peuvent être construites à partir d'éléments DOM existants ou bien à partir des méthodes du widget.
Il est important de comprendre, si vous souhaitez des Panel à partir d'un marquage DOM existant, que vous devez respecter la
structure d'éléments suivante (ndr : classes CSS) :
On peut donc noter les trois classes CSS suivantes comme déterminantes :
- "hd" : classe CSS applicable au header
- "bd" : classe CSS applicable au contenu
- "ft" : classe CSS applicable au footer
La syntaxe du constructeur de ce widget est présentée ci après :
Les arguments sont listés ci après :
- el : identifiant du Panel
- userConfig : objet littéral contenant des options applicables au Panel
Le widget supporte des options spécifiques qui sont listées dans le tableau ci après :
!!! :: cet objet ou widget hérite aussi des propriétés de Overlay .
Option
Type
Défaut
Détails
close
Boolean
null
Détermine si une icône 'close' ou 'fermer' doit être affichée dans le header.
draggable
Boolean
null
Déterminer si le Panel sera déplaçable par son header.
underlay
String
shadow
Détermine le type d'underlay ou couche supérieure qui sera appliquée.
Les autres valeurs possibles sont 'none' et 'matte'.
modal
Boolean
false
Détermine si le document devra être désactivé tant que le Panel ne sera pas fermé.
keylisteners
YAHOO.util.KeyListener / Array
null
Un KeyListener ou Array de KeyListener contenant des évènements de touches claviers à activer lors de
l'affichage du Panel.
!!! : la librairie Prototype.js a été incluse dans cette page afin de simplifier l'accès
aux exemples via Element.ScrollTo et permettre un test 'personnalisable' de Tooltip.
Exemple d'utilisation #00 de Controls.Container.Panel
Cet exemple vous permet de tester les possibilités du widget Panel.
Panel 'test_0' :: Header
créé à partir d'élément existants.
webjax c'est bien toto président
Panel 'test_0' :: Footer
Le Panel ci dessus est configuré de façon simple.
Exemple d'utilisation #01 de Controls.Container.Panel
Ce second exemple vous présente la construction d'un panel à partir
des méthodes du widget et sans éléments DOM existants (ndr : le Panel ou plus
précisement la structure DOM du Panel est construite à la volée par Javascript).
Le contenu du Panel peut être défini ci après :
Le code source de cet exemple est présentée ci après :
Exemple d'utilisation paramétrable de Controls.Container.Panel
Cet exemple vous permet d'utiliser une version modifiée de creerPanel() (ndr : méthode définie
pour l'exemple précédent).
Cette nouvelle version de la méthode permet de prendre en compte toutes les options
spécifiques à Panel.
L'exemple est paramétrable et testable ci après :
point d'accroche
Le code source de cet exemple est présenté ci après :
Ce widget peut être intéressant afin d'éviter d'inclure des popups dans un site.
Vous verrez en suivant le cours de cette page que les fenêtres peuvent être construites à partir d'éléments DOM existants ou bien à partir des méthodes du widget.
Il est important de comprendre, si vous souhaitez des Panel à partir d'un marquage DOM existant, que vous devez respecter la structure d'éléments suivante (ndr : classes CSS) :
On peut donc noter les trois classes CSS suivantes comme déterminantes :
- "hd" : classe CSS applicable au header
- "bd" : classe CSS applicable au contenu
- "ft" : classe CSS applicable au footer
La syntaxe du constructeur de ce widget est présentée ci après :
Les arguments sont listés ci après :
- el : identifiant du Panel
- userConfig : objet littéral contenant des options applicables au Panel
Le widget supporte des options spécifiques qui sont listées dans le tableau ci après :
!!! :: cet objet ou widget hérite aussi des propriétés de Overlay .
| Option | Type | Défaut | Détails |
| close | Boolean | null | Détermine si une icône 'close' ou 'fermer' doit être affichée dans le header. |
| draggable | Boolean | null | Déterminer si le Panel sera déplaçable par son header. |
| underlay | String | shadow | Détermine le type d'underlay ou couche supérieure qui sera appliquée. Les autres valeurs possibles sont 'none' et 'matte'. |
| modal | Boolean | false | Détermine si le document devra être désactivé tant que le Panel ne sera pas fermé.
|
| keylisteners | YAHOO.util.KeyListener / Array | null | Un KeyListener ou Array de KeyListener contenant des évènements de touches claviers à activer lors de l'affichage du Panel. |
!!! : la librairie Prototype.js a été incluse dans cette page afin de simplifier l'accès
aux exemples via Element.ScrollTo et permettre un test 'personnalisable' de Tooltip.
Exemple d'utilisation #00 de Controls.Container.Panel
Cet exemple vous permet de tester les possibilités du widget Panel.
Panel 'test_0' :: Header
créé à partir d'élément existants.
webjax c'est bien toto président
webjax c'est bien toto président
Panel 'test_0' :: Footer
Le Panel ci dessus est configuré de façon simple.
Exemple d'utilisation #01 de Controls.Container.Panel
Ce second exemple vous présente la construction d'un panel à partir des méthodes du widget et sans éléments DOM existants (ndr : le Panel ou plus précisement la structure DOM du Panel est construite à la volée par Javascript).
Le contenu du Panel peut être défini ci après :
Le code source de cet exemple est présentée ci après :
Exemple d'utilisation paramétrable de Controls.Container.Panel
Cet exemple vous permet d'utiliser une version modifiée de creerPanel() (ndr : méthode définie pour l'exemple précédent).
Cette nouvelle version de la méthode permet de prendre en compte toutes les options spécifiques à Panel.
L'exemple est paramétrable et testable ci après :
point d'accroche
Le code source de cet exemple est présenté ci après :
: 12/01/2007 20:32:06 | 
: 
