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 BorderContainer

One of the most popular layout containers is the BorderContainer Dijit. This layout container lets you arrange content panes inside a common border by assigning values to their region attributes: "top", "bottom", "left", "right", and "center".

You can also allow the user to resize a content pane with the mouse by setting the content pane's splitter attribute to "true".

The example bordercontainer.html uses three content panes.

  1. Open your Web page in a text editor.
  2. Add dojo.require("dijit.layout.ContentPane"); and dojo.require("dijit.form.BorderContainer"); statements to your code.
  3. To draw a border container with three content panes, create a new border container using a <div> element with its dojoType attribute set to dijit.form.BorderContainer and place three content panes inside it, with their region attributes set to "top", "center", and "bottom". Set the top and bottom content panes' splitter attributes to "true".

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

    Script 4.3. Adding border containers.

    1   <html>
    2     <head>
    3       <title>Using Border
    4         Containers</title>
    (5-19) . . .
    20      <script type="text/javascript">
    21        dojo.require("dojo.parser");
    22        dojo.require(
    23          "dijit.layout.ContentPane");
    24        dojo.require(
    25          "dijit.layout.BorderContainer");
    26      </script>
    27    </head>
    28    <body class="tundra">
    29      <h1>Using Border Containers</h1>
    30      <br>
    31      <div
    32      dojoType=
    33        "dijit.layout.BorderContainer"
    34        style=
    35          "height:100px;width:150px;
    36          border:solid 2px;">
    37        <div
    38          dojoType=
    39         "dijit.layout.ContentPane"
    40         region="top"
    41         style="background-color:pink;
    42           height:30px;" splitter="true"
    43           minSize="10" maxSize="800">
    44           Top region
    45        </div>
    46        <div
    47          dojoType=
    48          "dijit.layout.ContentPane"
    49          region="center">
    50          Center region
    51        </div>
    52        <div
    53          dojoType=
    54          "dijit.layout.ContentPane"
    55          region="bottom"
    56          style="background-color:cyan;
    57          height:30px;"
    58          splitter="true"
    59          minSize="10" maxSize="800">
    60          Bottom region
    61        </div>
    62      </div>
    63    </body>
    64  </html>
    
  4. Save your file.
  5. Navigate to your file in a browser. You should see a border container with three content panes (Figure 4.3).
    Figure 4.3

    Figure 4.3 A border container with three content panes.

    You can resize the top and bottom content panes with the mouse. The cursor changes to a double-headed arrow for resizing.
  • + Share This
  • 🔖 Save To Your Account