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

Creating a TabContainer Dijit in Code

You can also create TabContainer layout Dijits in code. The next example, tabcontainerprogram.html, mimics the previous task. In the code, you configure the content panes by passing attributes to the ContentPane constructor, such as {title : "Tab 4", closable: true}, to set the title and closable attributes.

To create tab containers in code:

  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.8 shows what your page should look like after you make the additions.

    Script 4.8. Creating tab containers in code.

    1   <html>
    2     <head>
    3       <title>Creating Tab Containers in
    4         Code</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
    22      <script type="text/javascript">
    23        dojo.require("dojo.parser");
    24        dojo.require(
    25        "dijit.layout.ContentPane");
    26        dojo.require(
    27        "dijit.layout.TabContainer");
    28        dojo.addOnLoad(function(){
    29          var container = new
    30          dijit.layout.TabContainer({
    31          style : "width:280px;
    32          height:100px;"}, "tab");
    33          var page1 = new
    34          dijit.layout.ContentPane(
    35          {title : "Tab 1"});
    36          page1.domNode.innerHTML="<b>
    37          Ralph Kramden</b><br>CEO";
    38          var page2 = new
    39          dijit.layout.ContentPane({title :
    40          "Tab 2"});
    41          page2.domNode.innerHTML="<b>Ed
    42          Norton</b><br>VP Operations";
    43          var page3 = new
    44          dijit.layout.ContentPane({title :
    45          "Tab 3"});
    46          page3.domNode.innerHTML="<b>Alice
    47          Kramden</b><br>VP Marketing";
    48          var page4 = new
    49          dijit.layout.ContentPane({title :
    50          "Tab 4", closable: true});
    51          page4.domNode.innerHTML="<b>
    52          Trixie Norton</b><br>Treasurer";
    53          container.addChild(page1);
    54
    55          container.addChild(page2);
    56         container.addChild(page3);
    57         container.addChild(page4);
    58
    59         container.startup();
    60       });
    61      </script>
    62    </head>
    63    <body class="tundra">
    64      <h1>Creating Tab Containers in
    65        Code</h1>
    66      <br>
    67      <div id="tab">
    68      </div>
    69    </body>
    70  </html>
    
  4. Save your file.
  5. Navigate to your file in a browser. You should see the new tab container (Figure 4.10).
    Figure 4.10

    Figure 4.10 Creating a tab container in code.

  • + Share This
  • 🔖 Save To Your Account