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 TabContainer

The TabContainer container lets you place your content panes on tabbed pages. All you need to do is place content panes (with the title attribute set to the tab's label) inside this container. To let the user close a tab, set the content pane's closable attribute to "true".

The example tabcontainer.html displays four tabs, and the fourth tab can be closed (when you click the close icon, the tab disappears).

To add tab containers:

  1. Open your Web page in a text editor.
  2. Add dojo.require("dijit.layout.ContentPane"); and dojo.require("dijit.form.TabContainer"); statements to your code.
  3. Create a new tab container, enclosing four content panes in it. Make the fourth tab closable, and add code to display an alert box when the content pane's onClose event occurs.

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

    Script 4.7. Adding tab containers.

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

    Figure 4.8 A tab container.

  6. Click a new tab to opening the corresponding page (Figure 4.9).
    Figure 4.9

    Figure 4.9 A new tab page.

  • + Share This
  • 🔖 Save To Your Account