Reference/Xul/deck

Deck est une boite similaire à stack : elle contient des élements qui sont empilés les uns sur les autres. A la différence de stack, un seul élement est visible en même temps. Un attribut, selectedIndex , permet de sélectionner l'élement à afficher.

Cette balise est utile pour faire un fonctionnement similaire à la boite de dialogue de préference dans Mozilla.

Exemple :

 <deck selectedIndex="1">
   <box> <description value="page 1" /> </box>
   <box> <description value="page 2" /> </box>
   <box> <description value="page 3" /> </box>
 </deck>

Ici, c'est la boite contenant la description "page 2" qui est affichée (elle a pour index 1).

Attributs de la balise

Attributs hérités de ElementXul.

selectedIndex

Contient le numéro de l'élement qu'il faut afficher. Le premier élement a pour index 0.

Propriétés Javascript

Propriétés héritées de ElementXul.

selectedIndex

Contient le numéro de l'élement qu'il faut afficher. Le premier élement a pour index 0.

selectedPanel

Contient une référence vers l'élement sélectionné.

Méthodes Javascript

Méthodes héritées de ElementXul.

Balises filles

Tout élement xul.

Références

http://www.xulplanet.com/references/elemref/ref_deck.html

Notes

Bug d'affichage

Dans le cas d'une "remote application", si vous placez un element html:form comme etant un fils d'un deck. Il y a un bug d'affichage. Les informations des elements du form restent visible dans les autres elements empilés.

• Image du deck avec la form : http://rabaix.net/xul/deck_with_form.png.
• Image du deck avec un autre element selectionne http://rabaix.net/xul/deck_with_bug_display.png

Pour resoudre ce probleme, il y a deux solutions:

1. placer l'element html:form dans une vbox/hbox
2. cacher les autres elements avec le style 'visibility'

Ce code change la valeur du 'selectedIndex' du deck lorsque l'utilisateur clique sur un element d'une listbox.

  // target = element selectionne dans la listbox (cf : images)
  for(var i = 0; i < $('candidatesEditDeck').childNodes.length; i++ ) {
    if(i == target.value) {
      $('candidatesEditDeck').childNodes?i.style.visibility = "";
      $('candidatesEditDeck').selectedIndex = target.value;
    } else {
      $('candidatesEditDeck').childNodes?i.style.visibility = "hidden";
    }
  }