Dojo BorderContainer

Ads
 

Dojo BorderContainer

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

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

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:

Ads

Ads