XUL Programmer's Reference Manual

<deck>

Attributes Common Children
id titledbutton
index text
  img
  box
   
   

The <deck> element provides a way to dynamically swap elements within a group. The <deck> is a container for any number of child elements that can be accessed as indexed items via JavaScript and the DOM, as in the following demo:

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?> 

<window id="deck show" 
  xmlns:html="http://www.w3.org/1999/xhtml"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<html:script language="JavaScript">
var findex = 0;
function flipDeck() {
	if (findex >= 2) { findex = 0 }
	else {findex++ }
	var deck = document.getElementById("card_deck");
	deck.setAttribute("index", findex);
}
</html:script>

<box autostretch="never" >
  <box height="200px" autostretch="never" 
	style="background-color: lightgrey; border: solid 2px" 
	orient="vertical">
	<deck id="card_deck">
        <titledbutton value="Card 1" style="list-style-image:url('card1.gif')" />
        <titledbutton value="Card 2" style="list-style-image:url('card2.gif')" />
        <titledbutton value="Card 3" style="list-style-image:url('card3.gif')" />
	</deck>
	<spring flex="100%" />
	<titledbutton value="Flip Card" class="push" 
		onclick="flipDeck()" 
		autostretch="never" />
  </box>
</box>
</window>

The flipDeck() function called when the button is clicked changes the index attribute of the deck container so that only the child referenced by that attribute is displayed. In Mozilla, the following example looks as follows:

index
Description
index is an attribute that specifies which of the deck's child elements is to be displayed.
Syntax
<deck index="index number">
Example
 
<deck index="1">
  <titledbutton value="I'm not shown" class="push" />
  <titledbutton value="I am shown!" class="push" />
  <titledbutton value="I'm not shown" class="push" />
</deck>
Notes
The default value for index is 0.


 


 
Last updated: 3/20/00 Ian Oeschger