Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

  • Print
  • + Share This
This chapter is from the book

Using StackContainer

The stack container lets you stack pages (that is, content panes) on top of each other.

The next example, stackcontainer.html, creates a stack of four pages that list personnel at an imaginary company.

  1. Open your Web page in a text editor.
  2. Add dojo.require("dijit.layout.ContentPane"); and dojo.require("dijit.form.StackContainer"); statements to your code.
  3. Create a new stack container by setting a <div> element's dojoType attribute to dijit.form.StackContainer and enclose four content panes. Add two buttons that call the container's forward and back methods to navigate through the stack.

    Script 4.5 shows what your page should look like after you make the additions.

    Script 4.5. Adding stack containers.

    1   <html>
    2     <head>
    3       <title>Using Stack Containers</title>
    4       <link rel="stylesheet"
    5         type="text/css"
    6         href="http://o.aolcdn.com/
    7         dojo/1.1/dojo/
    8         resources/dojo.css" />
    9       <link rel="stylesheet"
    10        type="text/css"
    11        href="http://o.aolcdn.com/dojo/
    12        1.1/dijit/
    13        themes/tundra/tundra.css" />
    14      <script
    15        djConfig="parseOnLoad:true"
    16        type="text/javascript"
    17        src="https://o.aolcdn.com/dojo/1.1/
    18          dojo/dojo.xd.js">
    19      </script>
    20      <script type="text/javascript">
    21        dojo.require("dojo.parser");
    22        dojo.require(
    23          "dijit.layout.ContentPane");
    24        dojo.require(
    25          "dijit.layout.StackContainer");
    26      </script>
    27    </head>
    28    <body class="tundra">
    29      <h1>Using Stack Containers</h1>
    30      <br>
    31      <div id="stack"
    32       dojoType=
    33       "dijit.layout.StackContainer"
    34       style="width:150px; height:75px;
    35       margin:5px; border:solid 1px;">
    36       <div dojoType=
    37        "dijit.layout.ContentPane">
    38        <b>Ralph Kramden</b><br>CEO
    39       </div>
    40       <div dojoType=
    41        "dijit.layout.ContentPane">
    42        <b>Ed Norton</b><br>VP Operations
    43       </div>
    44       <div dojoType=
    45        "dijit.layout.ContentPane">
    46        Alice Kramden<br>VP Marketing
    47       </div>
    48       <div dojoType=
    49        "dijit.layout.ContentPane">
    50        Trixie Norton<br>Treasurer
    51       </div>
    52      </div>
    53      <button dojoType=
    54        "dijit.form.Button">&lt;
    55        <script type="dojo/method"
    56          event="onClick" args="evt">
    57          dijit.byId("stack").back(  );
    58        </script>
    59      </button>
    60      <button dojoType=
    61        "dijit.form.Button">&gt;
    62        <script type="dojo/method"
    63          event="onClick" args="evt">
    64          dijit.byId("stack").forward(  );
    65        </script>
    66      </button>
    67    </body>
    68  </html>
    
  4. Save your file.
  5. Navigate to your file in a browser. You should see a stack container and two buttons (Figure 4.5).
    Figure 4.5

    Figure 4.5 A stack container.

  6. Click the buttons to navigate from page to page (Figure 4.6).
    Figure 4.6

    Figure 4.6 A new page in a stack container.

  • + Share This
  • 🔖 Save To Your Account