Vos résultats de recherche

    Piles et Paquets

     

    Il se peut qu'il soit nécessaire d'afficher des éléments comme un empilement superposé de cartes. Les éléments stack et deck peuvent être utilisés à cet effet.

    Containers

    Chaque boîte XUL est un container qui peut contenir n'importe quel autre élément. Il y a un certain nombre d'éléments qui sont des types spécialisés de boîtes, tels que les barres d'outils et les onglets. La balise box crée la plus simple des boîtes sans propriétés spéciales. Toutefois, les types spécialisés de boîtes fonctionnent comme des boîtes normales dans le sens où elles orientent les éléments qu'elles contiennent, mais elles ont des fonctionnalités supplémentaires.

    En fait, beaucoup de composants peuvent contenir d'autres éléments. Nous avons déjà vu que les boutons peuvent contenir d'autres choses que leurs contenus par défaut. Une barre de défilement est juste un type spécial de boîte qui crée ses propres éléments si vous ne les fournissez pas. Ceux-ci contrôlent également le déplacement de l'ascenseur de la barre de défilement.

    Dans les prochaines sections, nous allons introduire quelques éléments qui sont prévus pour le contrôle d'autres éléments. Ce sont tous des types spéciaux de boîtes et permettent d'inclure tous les attributs des boîtes.

    Piles

    L'élément stack est une simple boîte. Il fonctionne comme toute autre boîte mais a la propriété spéciale que ces enfants sont tous disposés les uns au dessus des autres. Le premier enfant de la pile est dessiné sur le dessous, le second enfant est dessiné ensuite, suivi du troisième et ainsi de suite. De nombreux éléments peuvent être empilés sur une pile.

    La propriété orient n'a aucune signification particulière sur un élément stack, car les enfants sont empilés les uns sur les autres au lieu d'être côte à côte. Les dimensions d'une pile sont déterminées par celle de son plus grand enfant, mais vous pouvez utilisez les propriétés CSS width, height, min-width ou d'autres propriétés similaires à la fois sur la pile et ses enfants.

    L'élément stack pourrait être utilisé quand un indicateur d'état doit d'être ajouté au dessus d'un élément existant. Par exemple, un indicateur de progression pourrait être créé avec une barre et un libellé en surimpression.

    Image:xultu_stacks_progress.png

    Effet d'ombre avec des piles

    Une utilisation pratique de l'élément stack est de pouvoir simuler un certain nombre de propriétés CSS avec. Par exemple, vous pouvez créer un effet similaire à la propriété text-shadow comme ceci :

    var el = env.locale; Exemple 1: Source Voir

    <stack>
       <description value="Ombré" style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/>
       <description value="Ombré" style="color: red; font-size: 15pt;"/>
    </stack>
    

    Image:xultu_stacks1.png

    Les deux éléments description créent chacun un texte avec une taille de 15 points. Le premier est toutefois décalé d'un pixel vers la droite et vers le bas grâce à l'ajout d'une marge de texte sur la gauche et sur le haut. Le résultat est le dessin répété du même texte 'Ombré' mais en léger décalage. Le second élément description est dessiné en rouge pour que l'effet soit encore plus visible.

    Cette méthode a des avantages sur l'emploi de text-shadow car vous pouvez complètement personnaliser les effets d'ombres de votre texte principal. Il peut avoir sa propre police de caractères, un soulignement ou une taille propre (vous pouvez même créer un texte ombré clignotant). C'est aussi utile car Mozilla ne supporte pas pour l'instant les textes ombrés en CSS. Un désavantage est que l'espace occupé par le texte ombré fait une pile plus grande. L'effet d'ombrage est très utile pour créer des boutons d'apparence désactivée :

    var el = env.locale; Exemple 2: Source Voir

    <stack style="background-color: #C0C0C0">
       <description value="Désactivé" style="color: white; padding-left: 1px; padding-top: 1px;"/> 
       <description value="Désactivé" style="color: grey;"/>
    </stack>
    

    Cet arrangement de couleurs de texte et d'ombrage créent cet aspect désactivé que l'on retrouve sur certaines plates-formes.

    Notez que les évènements tels que les clics de la souris et les touches du clavier sont transmis à l'élément sur le haut de la pile qui est le dernier élément de la pile. Cela signifie qu'un bouton ne fonctionnera correctement que s'il est le dernier élément de la pile.

    Paquets

    Un élément deck place également ses enfants les uns au dessus des autres comme l'élément stack, toutefois les paquets n'affichent qu'un seul de leurs enfants à la fois. Ce comportement s'avère utile pour une interface d'assistant dans laquelle une série de panneaux similaires sont affichés en série. Au lieu de créer des fenêtres séparées et d'ajouter des boutons de navigation à chacune d'elles, vous n'avez qu'à créer une seule fenêtre et utiliser un paquet dans lequel le contenu changera.

    Comme pour les piles, les enfants directs d'un élément deck forment les pages du paquet. S'il y a trois enfants dans l'élément deck, le paquet aura trois enfants. La page affichée du paquet peut être changée en définissant un attribut selectdIndex sur l'élément deck. L'index est un nombre qui identifie quelle page à afficher. Les pages sont numérotées à partir de zéro. Ainsi, le premier enfant du paquet est la page '0', le second est la page '1', etc.

    Ce qui suit est un exemple de paquet :

    var el = env.locale; Exemple 3: Source Voir

    <deck selectedIndex="2">
       <description value="Ceci est la première page "/>
       <button label="Ceci est la seconde page "/>
       <box>
         <description value="Ceci est la troisième page "/>
         <button label="Ceci est également la troisième page "/>
       </box>
    </deck>
    

    Ici, il y a trois pages, celle affichée par défaut est la troisième. La troisième page est une boîte avec deux éléments qui y sont inclus. L'ensemble de cette boîte et de ses éléments forme une page. Le paquet sera aussi grand que le plus grand de ses enfants, qui dans le cas présent sera la troisième page.

    Vous pouvez changer de page en utilisant un script pour modifier l'attribut selectedIndex. Pour plus de renseignements là dessus, reportez vous aux sections sur les évènements et le DOM.

    <hr>

    La prochaine section décrit comment les piles peuvent être utilisées pour positionner les éléments.

    Interwiki

    Pièces jointes

    Fichier Taille Date Joint par
    xultu_stacks1.png
    8860 octets 2007-08-14 07:57:08 Fredchat
    xultu_stacks_progress.png
    926 octets 2007-08-14 07:58:30 Fredchat
    menubar-ex2.jpg
    2625 octets 2006-05-27 08:20:15 Morishoji
    menubar-ex3.jpg
    8039 octets 2006-05-28 09:26:15 Morishoji

    Étiquettes et contributeurs liés au document

    Étiquettes :
    Contributeurs ayant participé à cette page : E.cg, Chbok
    Dernière mise à jour par : E.cg,