Dojo BorderContainer

In this section, you will learn about the dojo BorderContainer.

BorderContainer: This is a container that operates in a choice of two layout modes: 1. The design attribute may be set to "headline" (by default) or 2. "sidebar". The "headline" layout extends the top and bottom regions of entire width of the box . And the remaining regions are placed in the middle or center. The "sidebar" layout, the side panels take priority to extend the full height of the box.

Try Online: BorderContainer

Here is the code for BorderContainer Example:

<html>
<head>

<title>Layout Container Example</title>
  <style type="text/css">
  @import "../dijit/themes/tundra/tundra.css";
  @import "/resources/dojo.css"
  </style>
  <script type="text/javascript" src="http://o.
aolcdn.com/dojo/1.1/dojo/dojo.xd.js"
  djConfig="parseOnLoad: true"></script>

  <script type="text/javascript">
  dojo.require("dojo.parser");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.layout.BorderContainer");
 </script>
</head>

<body class="tundra">

  <div dojoType="dijit.layout.BorderContainer" design="screenDesign">

 <div dojoType="dijit.layout.ContentPane" id="top" 
region="top" style="background-color:gray">
 <h3> Roseindia Technology Pvt. Ltd.</h3>
 </div>

 <div dojoType="dijit.layout.ContentPane" id="left" region="left" 
  style="background-color:lightblue;width: 125px;">
  <B>Tutorials List</B>
  <ul>
  <li>Struts2</li>
  <li>JSP</li>
  <li>Servlets</li>
  <li>EJB</li>
  <li>Hibernate</li>
 </ul>

  </div>

  <div dojoType="dijit.layout.ContentPane" id="center" region="center"
  style="background-color:white">
  <blockquote>Introduction</a>
  <ol>
  <li>Short description</li>
  <li>Brief description </li>
  <li>Running Examples</li>
  </ol>
  </blockquote>
  </div>

  <div dojoType="dijit.layout.ContentPane" id="right" region="right"
  style="background-color:pink; width: 130px;">
  <p><B>Advertisement</B></p>
  <img src="advertisement.gif" align="right"/>
  </div>

  </div> 
  
</body>
</html>

Output of BorderContainer :

Try Online:

Related Tags for Dojo BorderContainer:
c, dojo, io, order, border, this, ai, container, learn, ear, e, il, section, in, nt, out, j, rc, do, s, is, ll, ea, ar, s, s, rd, th, ab, on, o

«Previous Index Next»